Update dashboard and automation colors to new module scheme

Dashboard widgets: - WorkflowPipelineWidget: Sites now has transparent bg with colored icon - Tasks stage uses navy (gray-700/800), Content/Drafts use blue (brand) - AIOperationsWidget: Content now uses blue (brand) instead of green - RecentActivityWidget: Content activity now uses blue (brand) - QuickActionsWidget: Tasks step uses navy, Content uses blue Automation components: - AutomationPage STAGE_CONFIG: Tasks→Content now navy, Content→Prompts blue - GlobalProgressBar: Updated stage colors to match new scheme - CurrentProcessingCard: Stage colors match new module scheme Color scheme: - Planner Pipeline (Blue → Pink → Amber): Keywords, Clusters, Ideas - Writer Pipeline (Navy → Blue → Pink → Green): Tasks, Content, Images, Published
2026-01-03 00:52:18 +00:00
parent 16dfc56ba0
commit e2d462d8b6
7 changed files with 82 additions and 50 deletions
--- a/frontend/src/components/Automation/CurrentProcessingCard.tsx
+++ b/frontend/src/components/Automation/CurrentProcessingCard.tsx
@@ -322,15 +322,16 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
  const percentage = computedTotal > 0 ? Math.round((computedProcessed / computedTotal) * 100) : 0;
  const isPaused = currentRun.status === 'paused';

-  // Choose stage accent color (simple map matching AutomationPage STAGE_CONFIG)
+  // Choose stage accent color (matching new module color scheme)
+  // PLANNER: Blue → Pink → Amber | WRITER: Navy → Blue → Pink → Green
  const stageColors = [
-    'from-brand-500 to-brand-600',
-    'from-purple-500 to-purple-600',
-    'from-purple-500 to-purple-600',
-    'from-success-500 to-success-600',
-    'from-warning-500 to-warning-600',
-    'from-purple-500 to-purple-600',
-    'from-success-500 to-success-600',
+    'from-brand-500 to-brand-600',     // Stage 1: Keywords → Clusters (blue)
+    'from-purple-500 to-purple-600',   // Stage 2: Clusters → Ideas (pink)
+    'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber)
+    'from-gray-700 to-gray-800',       // Stage 4: Tasks → Content (navy)
+    'from-brand-500 to-brand-600',     // Stage 5: Content → Image Prompts (blue)
+    'from-purple-500 to-purple-600',   // Stage 6: Image Prompts → Images (pink)
+    'from-success-500 to-success-600', // Stage 7: Review → Published (green)
  ];
  const stageColorClass = stageColors[(currentRun.current_stage || 1) - 1] || 'from-brand-500 to-brand-600';

--- a/frontend/src/components/Automation/GlobalProgressBar.tsx
+++ b/frontend/src/components/Automation/GlobalProgressBar.tsx
@@ -7,14 +7,23 @@ import React from 'react';
 import { AutomationRun, InitialSnapshot, StageProgress, GlobalProgress } from '../../services/automationService';
 import { BoltIcon, CheckCircleIcon, PauseIcon } from '../../icons';

-// Stage colors matching AutomationPage STAGE_CONFIG exactly
+// Stage colors for visual distinction matching new module color scheme:
+// PLANNER PIPELINE (Blue → Pink → Amber):
+// - Keywords→Clusters: brand/blue
+// - Clusters→Ideas: purple/pink  
+// - Ideas→Tasks: warning/amber
+// WRITER PIPELINE (Navy → Blue → Pink → Green):
+// - Tasks→Content: gray-dark (navy) - entry point to Writer
+// - Content→Prompts: brand/blue
+// - Prompts→Images: purple/pink
+// - Images→Publish: success/green
 const STAGE_COLORS = [
-  'from-brand-500 to-brand-600',     // Stage 1: Keywords → Clusters (brand/teal)
-  'from-purple-500 to-purple-600',   // Stage 2: Clusters → Ideas (purple)
+  'from-brand-500 to-brand-600',     // Stage 1: Keywords → Clusters (brand/blue)
+  'from-purple-500 to-purple-600',   // Stage 2: Clusters → Ideas (purple/pink)
  'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber)
-  'from-brand-500 to-brand-600',     // Stage 4: Tasks → Content (brand/teal)
-  'from-success-500 to-success-600', // Stage 5: Content → Image Prompts (green)
-  'from-purple-500 to-purple-600',   // Stage 6: Image Prompts → Images (purple)
+  'from-gray-700 to-gray-800',       // Stage 4: Tasks → Content (navy)
+  'from-brand-500 to-brand-600',     // Stage 5: Content → Image Prompts (brand/blue)
+  'from-purple-500 to-purple-600',   // Stage 6: Image Prompts → Images (purple/pink)
  'from-success-500 to-success-600', // Stage 7: Review Gate (green)
 ];

--- a/frontend/src/components/dashboard/AIOperationsWidget.tsx
+++ b/frontend/src/components/dashboard/AIOperationsWidget.tsx
@@ -37,16 +37,16 @@ interface AIOperationsWidgetProps {
 }

 /**
- * Operation config with solid colored backgrounds matching Automation/Usage pages:
- * - Clustering: purple
- * - Ideas: warning/amber
- * - Content: success/green
- * - Images: purple
+ * Operation config with solid colored backgrounds for visual distinction:
+ * - Clustering: purple/pink (matches Clusters module)
+ * - Ideas: warning/amber (matches Ideas module)
+ * - Content: brand/primary (blue) - matches Writer content module
+ * - Images: purple/pink (matches Images module)
 */
 const operationConfig: Record<string, { label: string; icon: typeof GroupIcon; gradient: string }> = {
  clustering: { label: 'Clustering', icon: GroupIcon, gradient: 'from-purple-500 to-purple-600' },
  ideas: { label: 'Ideas', icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' },
-  content: { label: 'Content', icon: FileTextIcon, gradient: 'from-success-500 to-success-600' },
+  content: { label: 'Content', icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' },
  images: { label: 'Images', icon: FileIcon, gradient: 'from-purple-500 to-purple-600' },
 };

--- a/frontend/src/components/dashboard/QuickActionsWidget.tsx
+++ b/frontend/src/components/dashboard/QuickActionsWidget.tsx
@@ -14,13 +14,15 @@ interface QuickActionsWidgetProps {
 }

 /**
- * Workflow steps with solid colored backgrounds matching Automation/Usage pages:
+ * Workflow steps with solid colored backgrounds for visual distinction:
+ * PLANNER PIPELINE (Blue → Pink → Amber):
 * - Keywords: brand/primary (blue)
- * - Clusters: purple  
+ * - Clusters: purple/pink  
 * - Ideas: warning/amber
- * - Tasks: brand/primary (blue)
- * - Content: success/green
- * - Images: purple
+ * WRITER PIPELINE (Navy → Blue → Pink → Amber → Green):
+ * - Tasks: gray-dark (navy) - entry point to Writer
+ * - Content: brand/primary (blue)
+ * - Images: purple/pink
 * - Review: warning/amber
 * - Publish: success/green
 */
@@ -58,8 +60,8 @@ const workflowSteps = [
    description: 'Convert approved ideas into content tasks',
    href: '/writer/tasks',
    actionLabel: 'Tasks',
-    gradient: 'from-brand-500 to-brand-600',
-    buttonTone: 'brand' as const,
+    gradient: 'from-gray-700 to-gray-800',
+    buttonTone: 'neutral' as const,
  },
  { 
    num: 5, 
@@ -67,8 +69,8 @@ const workflowSteps = [
    description: 'AI writes SEO-optimized articles from tasks',
    href: '/writer/content',
    actionLabel: 'Write',
-    gradient: 'from-success-500 to-success-600',
-    buttonTone: 'success' as const,
+    gradient: 'from-brand-500 to-brand-600',
+    buttonTone: 'brand' as const,
  },
  { 
    num: 6, 
--- a/frontend/src/components/dashboard/RecentActivityWidget.tsx
+++ b/frontend/src/components/dashboard/RecentActivityWidget.tsx
@@ -30,10 +30,21 @@ interface RecentActivityWidgetProps {
  loading?: boolean;
 }

+/**
+ * Activity config with solid colored backgrounds for visual distinction:
+ * - clustering: purple/pink (matches Clusters module)
+ * - ideas: warning/amber (matches Ideas module)
+ * - content: brand/primary (blue) - matches Writer content module
+ * - images: purple/pink (matches Images module)
+ * - published: success/green (matches Published module)
+ * - keywords: brand/primary (blue) - matches Keywords module
+ * - error: error/red
+ * - sync: success/green
+ */
 const activityConfig: Record<string, { icon: typeof GroupIcon; gradient: string }> = {
  clustering: { icon: GroupIcon, gradient: 'from-purple-500 to-purple-600' },
  ideas: { icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' },
-  content: { icon: FileTextIcon, gradient: 'from-success-500 to-success-600' },
+  content: { icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' },
  images: { icon: FileIcon, gradient: 'from-purple-500 to-purple-600' },
  published: { icon: PaperPlaneIcon, gradient: 'from-success-500 to-success-600' },
  keywords: { icon: ListIcon, gradient: 'from-brand-500 to-brand-600' },
--- a/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx
+++ b/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx
@@ -34,22 +34,24 @@ interface WorkflowPipelineWidgetProps {
 }

 /**
- * Pipeline stages with solid colored backgrounds matching Automation/Usage pages:
- * - Sites: brand/primary (blue)
+ * Pipeline stages with solid colored backgrounds for visual distinction:
+ * PLANNER PIPELINE (Blue → Pink → Amber):
+ * - Sites: transparent bg with colored icon (starting point)
 * - Keywords: brand/primary (blue) 
- * - Clusters: purple
+ * - Clusters: purple/pink
 * - Ideas: warning/amber
- * - Tasks: brand/primary (blue)
- * - Drafts/Content: success/green
+ * WRITER PIPELINE (Navy → Blue → Green):
+ * - Tasks: gray-dark (navy) - entry point to Writer
+ * - Drafts/Content: brand/primary (blue)
 * - Published: success/green
 */
 const stages = [
-  { key: 'sites', label: 'Sites', icon: GridIcon, href: '/sites', gradient: 'from-brand-500 to-brand-600' },
+  { key: 'sites', label: 'Sites', icon: GridIcon, href: '/sites', gradient: '', transparent: true },
  { key: 'keywords', label: 'Keywords', icon: ListIcon, href: '/planner/keywords', gradient: 'from-brand-500 to-brand-600' },
  { key: 'clusters', label: 'Clusters', icon: GroupIcon, href: '/planner/clusters', gradient: 'from-purple-500 to-purple-600' },
  { key: 'ideas', label: 'Ideas', icon: BoltIcon, href: '/planner/ideas', gradient: 'from-warning-500 to-warning-600' },
-  { key: 'tasks', label: 'Tasks', icon: CheckCircleIcon, href: '/writer/tasks', gradient: 'from-brand-500 to-brand-600' },
-  { key: 'drafts', label: 'Drafts', icon: FileTextIcon, href: '/writer/content', gradient: 'from-success-500 to-success-600' },
+  { key: 'tasks', label: 'Tasks', icon: CheckCircleIcon, href: '/writer/tasks', gradient: 'from-gray-700 to-gray-800' },
+  { key: 'drafts', label: 'Drafts', icon: FileTextIcon, href: '/writer/content', gradient: 'from-brand-500 to-brand-600' },
  { key: 'published', label: 'Published', icon: PaperPlaneIcon, href: '/writer/published', gradient: 'from-success-500 to-success-600' },
 ] as const;

@@ -82,6 +84,7 @@ export default function WorkflowPipelineWidget({ data, loading }: WorkflowPipeli
        {stages.map((stage, index) => {
          const Icon = stage.icon;
          const count = data[stage.key as keyof PipelineData];
+          const isTransparent = 'transparent' in stage && stage.transparent;
          
          return (
            <div key={stage.key} className="flex items-center">
@@ -89,8 +92,12 @@ export default function WorkflowPipelineWidget({ data, loading }: WorkflowPipeli
                to={stage.href}
                className="flex flex-col items-center group min-w-[60px]"
              >
-                <div className={`p-2.5 rounded-xl bg-gradient-to-br ${stage.gradient} shadow-md group-hover:shadow-lg group-hover:scale-105 transition-all`}>
-                  <Icon className="w-6 h-6 text-white" />
+                <div className={`p-2.5 rounded-xl ${
+                  isTransparent 
+                    ? 'bg-gray-100 dark:bg-gray-800 border-2 border-brand-300 dark:border-brand-700' 
+                    : `bg-gradient-to-br ${stage.gradient} shadow-md`
+                } group-hover:shadow-lg group-hover:scale-105 transition-all`}>
+                  <Icon className={`w-6 h-6 ${isTransparent ? 'text-brand-600 dark:text-brand-400' : 'text-white'}`} />
                </div>
                <span className="text-sm text-gray-700 dark:text-gray-300 mt-1.5 font-medium">
                  {stage.label}
--- a/frontend/src/pages/Automation/AutomationPage.tsx
+++ b/frontend/src/pages/Automation/AutomationPage.tsx
@@ -39,21 +39,23 @@ import {
 } from '../../icons';

 /**
- * Pipeline stage configuration with consistent design system colors:
- * - Keywords → Clusters: brand/primary (keywords side) to purple (clusters side)
- * - Clusters → Ideas: purple to warning/amber
- * - Ideas → Tasks: warning/amber to brand/primary
- * - Tasks → Content: brand/primary to success/green
- * - Content → Image Prompts: success to purple
- * - Image Prompts → Images: purple
- * - Review Gate: warning/amber
+ * Stage config with colors for visual distinction matching module color scheme:
+ * PLANNER PIPELINE (Blue → Pink → Amber):
+ * - Keywords→Clusters: brand/blue
+ * - Clusters→Ideas: purple/pink  
+ * - Ideas→Tasks: warning/amber
+ * WRITER PIPELINE (Navy → Blue → Pink → Green):
+ * - Tasks→Content: gray-dark (navy) - entry point to Writer
+ * - Content→Prompts: brand/blue
+ * - Prompts→Images: purple/pink
+ * - Images→Publish: success/green
 */
 const STAGE_CONFIG = [
  { icon: ListIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Keywords → Clusters' },
  { icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Clusters → Ideas' },
  { icon: BoltIcon, color: 'from-warning-500 to-warning-600', textColor: 'text-warning-600 dark:text-warning-400', bgColor: 'bg-warning-100 dark:bg-warning-900/30', hoverColor: 'hover:border-warning-500', name: 'Ideas → Tasks' },
-  { icon: CheckCircleIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Tasks → Content' },
-  { icon: PencilIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'Content → Image Prompts' },
+  { icon: CheckCircleIcon, color: 'from-gray-700 to-gray-800', textColor: 'text-gray-700 dark:text-gray-300', bgColor: 'bg-gray-100 dark:bg-gray-800/30', hoverColor: 'hover:border-gray-500', name: 'Tasks → Content' },
+  { icon: PencilIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Content → Image Prompts' },
  { icon: FileIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Image Prompts → Images' },
  { icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'Review → Published' },
 ];