stlyes fixes
This commit is contained in:
@@ -272,7 +272,7 @@ export default function WriterDashboard() {
|
||||
description: `${stats?.content.published || 0} pieces published to WordPress`,
|
||||
timestamp: new Date(Date.now() - 30 * 60 * 1000),
|
||||
icon: PaperPlaneIcon,
|
||||
color: "text-green-600",
|
||||
color: "text-success-600",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@@ -280,7 +280,7 @@ export default function WriterDashboard() {
|
||||
description: `${stats?.content.total || 0} content pieces created`,
|
||||
timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
|
||||
icon: PencilIcon,
|
||||
color: "text-blue-600",
|
||||
color: "text-brand-600",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@@ -288,7 +288,7 @@ export default function WriterDashboard() {
|
||||
description: `${stats?.images.generated || 0} images created`,
|
||||
timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000),
|
||||
icon: BoxIcon,
|
||||
color: "text-orange-600",
|
||||
color: "text-warning-600",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -305,18 +305,18 @@ export default function WriterDashboard() {
|
||||
},
|
||||
xaxis: {
|
||||
categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
labels: { style: { colors: "#6b7280" } },
|
||||
labels: { style: { colors: "var(--color-gray-500)" } },
|
||||
},
|
||||
yaxis: {
|
||||
labels: { style: { colors: "#6b7280" } },
|
||||
labels: { style: { colors: "var(--color-gray-500)" } },
|
||||
},
|
||||
legend: {
|
||||
position: "top",
|
||||
labels: { colors: "#6b7280" },
|
||||
labels: { colors: "var(--color-gray-500)" },
|
||||
},
|
||||
colors: ["var(--color-primary)", "var(--color-success)", "var(--color-warning)"],
|
||||
grid: {
|
||||
borderColor: "#e5e7eb",
|
||||
borderColor: "var(--color-gray-200)",
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
@@ -352,7 +352,7 @@ export default function WriterDashboard() {
|
||||
toolbar: { show: false }
|
||||
},
|
||||
labels: Object.keys(stats.tasks.byStatus).filter(key => stats.tasks.byStatus[key] > 0),
|
||||
colors: ['#465FFF', '#F59E0B', '#10B981', '#EF4444', '#8B5CF6'],
|
||||
colors: ['var(--color-primary)', 'var(--color-warning)', 'var(--color-success)', 'var(--color-danger)', 'var(--color-purple)'],
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
fontFamily: 'Outfit',
|
||||
@@ -372,7 +372,7 @@ export default function WriterDashboard() {
|
||||
show: true,
|
||||
fontSize: '24px',
|
||||
fontWeight: 700,
|
||||
color: '#465FFF',
|
||||
color: 'var(--color-primary)',
|
||||
fontFamily: 'Outfit',
|
||||
formatter: () => {
|
||||
const total = Object.values(stats.tasks.byStatus).reduce((a: number, b: number) => a + b, 0);
|
||||
@@ -403,7 +403,7 @@ export default function WriterDashboard() {
|
||||
toolbar: { show: false },
|
||||
height: 300
|
||||
},
|
||||
colors: ['#465FFF', '#F59E0B', '#10B981'],
|
||||
colors: ['var(--color-primary)', 'var(--color-warning)', 'var(--color-success)'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
@@ -540,21 +540,21 @@ export default function WriterDashboard() {
|
||||
<Link
|
||||
key={module.title}
|
||||
to={module.path}
|
||||
className="rounded-2xl border-2 border-slate-200 bg-white p-6 hover:shadow-xl hover:-translate-y-1 transition-all group"
|
||||
className="rounded-2xl border-2 border-gray-200 bg-white p-6 hover:shadow-xl hover:-translate-y-1 transition-all group"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${module.color} items-center justify-center text-white shadow-lg`}>
|
||||
<Icon className="h-7 w-7" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-900 mb-2">{module.title}</h3>
|
||||
<p className="text-sm text-slate-600 mb-4">{module.description}</p>
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-2">{module.title}</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">{module.description}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-slate-900">{module.count}</div>
|
||||
<div className="text-xs text-slate-500">{module.metric}</div>
|
||||
<div className="text-2xl font-bold text-gray-900">{module.count}</div>
|
||||
<div className="text-xs text-gray-500">{module.metric}</div>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition" />
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition" />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
@@ -577,17 +577,17 @@ export default function WriterDashboard() {
|
||||
return (
|
||||
<div
|
||||
key={activity.id}
|
||||
className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:shadow-md transition"
|
||||
className="flex items-center gap-4 p-4 rounded-lg border border-gray-200 bg-white hover:shadow-md transition"
|
||||
>
|
||||
<div className={`size-10 rounded-lg bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center ${activity.color}`}>
|
||||
<div className={`size-10 rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center ${activity.color}`}>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<h4 className="font-semibold text-slate-900">{activity.type}</h4>
|
||||
<span className="text-xs text-slate-500">{formatTimeAgo(activity.timestamp)}</span>
|
||||
<h4 className="font-semibold text-gray-900">{activity.type}</h4>
|
||||
<span className="text-xs text-gray-500">{formatTimeAgo(activity.timestamp)}</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600">{activity.description}</p>
|
||||
<p className="text-sm text-gray-600">{activity.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -674,58 +674,58 @@ export default function WriterDashboard() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link
|
||||
to="/writer/tasks"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
|
||||
>
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
|
||||
<FileTextIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<h4 className="font-semibold text-slate-900 mb-1">Create Task</h4>
|
||||
<p className="text-sm text-slate-600">New writing task</p>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Create Task</h4>
|
||||
<p className="text-sm text-gray-600">New writing task</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] transition" />
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-primary)] transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/writer/content"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-success-500 hover:shadow-lg transition-all group"
|
||||
>
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
|
||||
<PencilIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<h4 className="font-semibold text-slate-900 mb-1">Generate Content</h4>
|
||||
<p className="text-sm text-slate-600">AI content creation</p>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Generate Content</h4>
|
||||
<p className="text-sm text-gray-600">AI content creation</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0bbf87] transition" />
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-success-500 transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/writer/images"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-warning-500 hover:shadow-lg transition-all group"
|
||||
>
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-warning-dark)] flex items-center justify-center text-white shadow-lg">
|
||||
<BoxIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<h4 className="font-semibold text-slate-900 mb-1">Generate Images</h4>
|
||||
<p className="text-sm text-slate-600">Create visuals</p>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Generate Images</h4>
|
||||
<p className="text-sm text-gray-600">Create visuals</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#ff7a00] transition" />
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-warning-500 transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/writer/published"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-purple-500 hover:shadow-lg transition-all group"
|
||||
>
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-purple)] to-[var(--color-purple-dark)] flex items-center justify-center text-white shadow-lg">
|
||||
<PaperPlaneIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<h4 className="font-semibold text-slate-900 mb-1">Publish Content</h4>
|
||||
<p className="text-sm text-slate-600">Publish to WordPress</p>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Publish Content</h4>
|
||||
<p className="text-sm text-gray-600">Publish to WordPress</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#5d4ae3] transition" />
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-purple-500 transition" />
|
||||
</Link>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
@@ -739,8 +739,8 @@ export default function WriterDashboard() {
|
||||
<FileTextIcon className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-900 mb-1">Task Creation</h4>
|
||||
<p className="text-sm text-slate-600">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Task Creation</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Create writing tasks from content ideas. Each task includes target keywords, outline, and word count requirements.
|
||||
</p>
|
||||
</div>
|
||||
@@ -750,8 +750,8 @@ export default function WriterDashboard() {
|
||||
<PencilIcon className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-900 mb-1">AI Content Generation</h4>
|
||||
<p className="text-sm text-slate-600">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">AI Content Generation</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Generate full content pieces using AI. Content is created based on your prompts, author profiles, and brand guidelines.
|
||||
</p>
|
||||
</div>
|
||||
@@ -761,8 +761,8 @@ export default function WriterDashboard() {
|
||||
<BoxIcon className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-900 mb-1">Image Generation</h4>
|
||||
<p className="text-sm text-slate-600">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Image Generation</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Automatically generate featured images and in-article images for your content. Images are optimized for SEO and engagement.
|
||||
</p>
|
||||
</div>
|
||||
@@ -773,34 +773,34 @@ export default function WriterDashboard() {
|
||||
<ComponentCard title="Getting Started" desc="Quick guide to using Writer">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 size-8 rounded-full bg-[#0693e3] text-white flex items-center justify-center font-bold text-sm">
|
||||
<div className="flex-shrink-0 size-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold text-sm">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-900 mb-1">Create Tasks</h4>
|
||||
<p className="text-sm text-slate-600">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Create Tasks</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Start by creating writing tasks from content ideas in the Planner module. Tasks define what content needs to be written.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 size-8 rounded-full bg-[#0bbf87] text-white flex items-center justify-center font-bold text-sm">
|
||||
<div className="flex-shrink-0 size-8 rounded-full bg-success-500 text-white flex items-center justify-center font-bold text-sm">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-900 mb-1">Generate Content</h4>
|
||||
<p className="text-sm text-slate-600">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Generate Content</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Use AI to generate content from tasks. Review and edit generated content before publishing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 size-8 rounded-full bg-[#ff7a00] text-white flex items-center justify-center font-bold text-sm">
|
||||
<div className="flex-shrink-0 size-8 rounded-full bg-warning-500 text-white flex items-center justify-center font-bold text-sm">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-900 mb-1">Publish</h4>
|
||||
<p className="text-sm text-slate-600">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Publish</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Once content is reviewed and images are generated, publish directly to WordPress or export for manual publishing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user