many changes for modules widgets and colors and styling

frontend/src/components/dashboard/QuickActionsWidget.tsx

@@ -20,6 +20,17 @@ interface QuickActionsWidgetProps {
   onAddKeywords?: () => void;
 }
 
+/**
+ * Workflow steps with solid colored backgrounds matching Automation/Usage pages:
+ * - Keywords: brand/primary (blue)
+ * - Clusters: purple  
+ * - Ideas: warning/amber
+ * - Tasks: brand/primary (blue)
+ * - Content: success/green
+ * - Images: purple
+ * - Review: warning/amber
+ * - Publish: success/green
+ */
 const workflowSteps = [
   { 
     num: 1, 
@@ -28,7 +39,7 @@ const workflowSteps = [
     description: 'Import your target keywords manually or from CSV',
     href: '/planner/keyword-opportunities',
     actionLabel: 'Add',
-    color: 'text-brand-600 dark:text-brand-400',
+    gradient: 'from-brand-500 to-brand-600',
   },
   { 
     num: 2, 
@@ -37,7 +48,7 @@ const workflowSteps = [
     description: 'AI groups related keywords into content clusters',
     href: '/planner/clusters',
     actionLabel: 'Cluster',
-    color: 'text-purple-600 dark:text-purple-400',
+    gradient: 'from-purple-500 to-purple-600',
   },
   { 
     num: 3, 
@@ -46,7 +57,7 @@ const workflowSteps = [
     description: 'Create content ideas from your keyword clusters',
     href: '/planner/ideas',
     actionLabel: 'Ideas',
-    color: 'text-warning-600 dark:text-warning-400',
+    gradient: 'from-warning-500 to-warning-600',
   },
   { 
     num: 4, 
@@ -55,7 +66,7 @@ const workflowSteps = [
     description: 'Convert approved ideas into content tasks',
     href: '/writer/tasks',
     actionLabel: 'Tasks',
-    color: 'text-purple-600 dark:text-purple-400',
+    gradient: 'from-brand-500 to-brand-600',
   },
   { 
     num: 5, 
@@ -64,7 +75,7 @@ const workflowSteps = [
     description: 'AI writes SEO-optimized articles from tasks',
     href: '/writer/content',
     actionLabel: 'Write',
-    color: 'text-success-600 dark:text-success-400',
+    gradient: 'from-success-500 to-success-600',
   },
   { 
     num: 6, 
@@ -73,7 +84,7 @@ const workflowSteps = [
     description: 'Create featured images and media for articles',
     href: '/writer/images',
     actionLabel: 'Images',
-    color: 'text-purple-600 dark:text-purple-400',
+    gradient: 'from-purple-500 to-purple-600',
   },
   { 
     num: 7, 
@@ -82,7 +93,7 @@ const workflowSteps = [
     description: 'Quality check and approve generated content',
     href: '/writer/review',
     actionLabel: 'Review',
-    color: 'text-warning-600 dark:text-warning-400',
+    gradient: 'from-warning-500 to-warning-600',
   },
   { 
     num: 8, 
@@ -91,7 +102,7 @@ const workflowSteps = [
     description: 'Push approved content to your WordPress site',
     href: '/writer/published',
     actionLabel: 'Publish',
-    color: 'text-purple-600 dark:text-purple-400',
+    gradient: 'from-success-500 to-success-600',
   },
 ];
 
@@ -128,13 +139,13 @@ export default function QuickActionsWidget({ onAddKeywords }: QuickActionsWidget
                 className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group"
               >
                 {/* Step Number */}
-                <span className="w-6 h-6 flex items-center justify-center rounded-full bg-brand-100 dark:bg-brand-900/30 text-sm font-semibold text-brand-600 dark:text-brand-400 flex-shrink-0">
+                <span className={`w-6 h-6 flex items-center justify-center rounded-full bg-gradient-to-br ${step.gradient} text-sm font-semibold text-white flex-shrink-0 shadow-sm`}>
                   {step.num}
                 </span>
                 
-                {/* Icon */}
-                <div className={`flex-shrink-0 ${step.color}`}>
-                  <Icon className="w-5 h-5" />
+                {/* Icon with solid gradient background */}
+                <div className={`flex-shrink-0 p-1.5 rounded-lg bg-gradient-to-br ${step.gradient} shadow-sm`}>
+                  <Icon className="w-4 h-4 text-white" />
                 </div>
                 
                 {/* Text Content */}
@@ -172,13 +183,13 @@ export default function QuickActionsWidget({ onAddKeywords }: QuickActionsWidget
                 className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group"
               >
                 {/* Step Number */}
-                <span className="w-6 h-6 flex items-center justify-center rounded-full bg-brand-100 dark:bg-brand-900/30 text-sm font-semibold text-brand-600 dark:text-brand-400 flex-shrink-0">
+                <span className={`w-6 h-6 flex items-center justify-center rounded-full bg-gradient-to-br ${step.gradient} text-sm font-semibold text-white flex-shrink-0 shadow-sm`}>
                   {step.num}
                 </span>
                 
-                {/* Icon */}
-                <div className={`flex-shrink-0 ${step.color}`}>
-                  <Icon className="w-5 h-5" />
+                {/* Icon with solid gradient background */}
+                <div className={`flex-shrink-0 p-1.5 rounded-lg bg-gradient-to-br ${step.gradient} shadow-sm`}>
+                  <Icon className="w-4 h-4 text-white" />
                 </div>
                 
                 {/* Text Content */}
@@ -216,13 +227,13 @@ export default function QuickActionsWidget({ onAddKeywords }: QuickActionsWidget
                 className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group"
               >
                 {/* Step Number */}
-                <span className="w-6 h-6 flex items-center justify-center rounded-full bg-brand-100 dark:bg-brand-900/30 text-sm font-semibold text-brand-600 dark:text-brand-400 flex-shrink-0">
+                <span className={`w-6 h-6 flex items-center justify-center rounded-full bg-gradient-to-br ${step.gradient} text-sm font-semibold text-white flex-shrink-0 shadow-sm`}>
                   {step.num}
                 </span>
                 
-                {/* Icon */}
-                <div className={`flex-shrink-0 ${step.color}`}>
-                  <Icon className="w-5 h-5" />
+                {/* Icon with solid gradient background */}
+                <div className={`flex-shrink-0 p-1.5 rounded-lg bg-gradient-to-br ${step.gradient} shadow-sm`}>
+                  <Icon className="w-4 h-4 text-white" />
                 </div>
                 
                 {/* Text Content */}