Refactor frontend components to use new icon imports and improve default values

- Updated `EnhancedMetricCard` to set a default accent color to blue. - Replaced `lucide-react` icons with custom icons in `LinkResults`, `OptimizationScores`, and various pages in the Automation and Optimizer sections. - Enhanced button layouts in `AutomationRules`, `Tasks`, and `ContentSelector` for better alignment and user experience. - Improved loading indicators across components for a more consistent UI experience.
2025-11-17 21:38:08 +00:00
parent 0818dfe385
commit ee56f9bbac
11 changed files with 153 additions and 125 deletions
--- a/backend/celerybeat-schedule
+++ b/backend/celerybeat-schedule
--- a/frontend/src/components/dashboard/EnhancedMetricCard.tsx
+++ b/frontend/src/components/dashboard/EnhancedMetricCard.tsx
@@ -62,7 +62,7 @@ export default function EnhancedMetricCard({
  subtitle,
  trend,
  icon,
-  accentColor,
+  accentColor = "blue", // Default to blue if not provided
  href,
  onClick,
  tooltip,
@@ -70,7 +70,7 @@ export default function EnhancedMetricCard({
  className = "",
 }: MetricCardProps) {
  const [isHovered, setIsHovered] = useState(false);
-  const colors = accentColors[accentColor];
+  const colors = accentColors[accentColor] || accentColors.blue; // Fallback to blue if invalid

  const formatValue = (val: string | number): string => {
    if (typeof val === "number") {
--- a/frontend/src/components/linker/LinkResults.tsx
+++ b/frontend/src/components/linker/LinkResults.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link2, CheckCircle, XCircle } from 'lucide-react';
+import { PlugInIcon, CheckCircleIcon, XCircleIcon } from '../../icons';

 interface Link {
  anchor_text: string;
@@ -25,7 +25,7 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Linking Results</h3>
        <div className="flex items-center gap-2">
-          <Link2 className="w-5 h-5 text-blue-500" />
+          <PlugInIcon className="w-5 h-5 text-blue-500" />
          <span className="text-sm text-gray-600 dark:text-gray-400">Version {linkerVersion}</span>
        </div>
      </div>
@@ -33,7 +33,7 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
      {linksAdded > 0 ? (
        <div className="space-y-4">
          <div className="flex items-center gap-2 text-green-600 dark:text-green-400">
-            <CheckCircle className="w-5 h-5" />
+            <CheckCircleIcon className="w-5 h-5" />
            <span className="font-medium">{linksAdded} link{linksAdded !== 1 ? 's' : ''} added</span>
          </div>

@@ -54,7 +54,7 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
        </div>
      ) : (
        <div className="flex items-center gap-2 text-gray-500 dark:text-gray-400">
-          <XCircle className="w-5 h-5" />
+          <XCircleIcon className="w-5 h-5" />
          <span>No links were added to this content.</span>
        </div>
      )}
--- a/frontend/src/components/optimizer/OptimizationScores.tsx
+++ b/frontend/src/components/optimizer/OptimizationScores.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import { ArrowUpIcon, ArrowDownIcon } from '../../icons';

 interface ScoreData {
  seo_score: number;
@@ -39,9 +39,9 @@ export const OptimizationScores: React.FC<OptimizationScoresProps> = ({
  const getChangeIcon = (current: number, previous?: number) => {
    if (!previous) return null;
    const diff = current - previous;
-    if (diff > 0) return <TrendingUp className="w-4 h-4 text-green-600" />;
-    if (diff < 0) return <TrendingDown className="w-4 h-4 text-red-600" />;
-    return <Minus className="w-4 h-4 text-gray-400" />;
+    if (diff > 0) return <ArrowUpIcon className="w-4 h-4 text-green-600" />;
+    if (diff < 0) return <ArrowDownIcon className="w-4 h-4 text-red-600" />;
+    return <span className="w-4 h-4 text-gray-400">—</span>;
  };

  const getChangeText = (current: number, previous?: number) => {
--- a/frontend/src/pages/Automation/Rules.tsx
+++ b/frontend/src/pages/Automation/Rules.tsx
@@ -5,7 +5,7 @@ import PageHeader from '../../components/common/PageHeader';
 import ComponentCard from '../../components/common/ComponentCard';
 import { automationApi, AutomationRule } from '../../api/automation.api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { BoltIcon, PlusIcon, PlayIcon, PauseIcon, TrashIcon, EditIcon } from '../../icons';
+import { BoltIcon, PlusIcon, TrashBinIcon, PencilIcon, PaperPlaneIcon, CloseIcon } from '../../icons';
 import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';

@@ -191,33 +191,33 @@ export default function AutomationRules() {
                  <div className="flex items-center gap-2 pt-2 border-t border-gray-200 dark:border-gray-700">
                    <button
                      onClick={() => handleToggleActive(rule)}
-                      className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                      className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center justify-center"
                      title={rule.is_active ? 'Deactivate' : 'Activate'}
                    >
-                      {rule.is_active ? <PauseIcon /> : <PlayIcon />}
+                      {rule.is_active ? <CloseIcon className="w-4 h-4" /> : <PaperPlaneIcon className="w-4 h-4" />}
                    </button>
                    {rule.trigger === 'manual' && (
                      <button
                        onClick={() => handleExecute(rule.id)}
-                        className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                        className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center justify-center"
                        title="Execute Now"
                      >
-                        <PlayIcon />
+                        <PaperPlaneIcon className="w-4 h-4" />
                      </button>
                    )}
                    <button
                      onClick={() => handleEdit(rule)}
-                      className="px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                      className="px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center justify-center"
                      title="Edit"
                    >
-                      <EditIcon />
+                      <PencilIcon className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => handleDelete(rule.id)}
-                      className="px-3 py-1.5 text-sm rounded-lg border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                      className="px-3 py-1.5 text-sm rounded-lg border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors flex items-center justify-center"
                      title="Delete"
                    >
-                      <TrashIcon />
+                      <TrashBinIcon className="w-4 h-4" />
                    </button>
                  </div>
                </div>
--- a/frontend/src/pages/Automation/Tasks.tsx
+++ b/frontend/src/pages/Automation/Tasks.tsx
@@ -4,7 +4,7 @@ import PageHeader from '../../components/common/PageHeader';
 import ComponentCard from '../../components/common/ComponentCard';
 import { automationApi, ScheduledTask } from '../../api/automation.api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { ClockIcon, CheckCircleIcon, XCircleIcon, RefreshCwIcon } from '../../icons';
+import { ClockIcon, CheckCircleIcon, XCircleIcon, ArrowRightIcon } from '../../icons';
 import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';

@@ -233,7 +233,7 @@ export default function AutomationTasks() {
                        onClick={() => handleRetry(task.id)}
                        className="flex items-center gap-2 px-4 py-2 text-sm bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
                      >
-                        <RefreshCwIcon />
+                        <ArrowRightIcon className="w-4 h-4" />
                        Retry Task
                      </button>
                    </div>
--- a/frontend/src/pages/Linker/ContentList.tsx
+++ b/frontend/src/pages/Linker/ContentList.tsx
@@ -7,7 +7,7 @@ import { fetchContent, Content as ContentType } from '../../services/api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { SourceBadge, ContentSource } from '../../components/content/SourceBadge';
 import { LinkResults } from '../../components/linker/LinkResults';
-import { Link2, Loader2 } from 'lucide-react';
+import { PlugInIcon } from '../../icons';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';

@@ -161,12 +161,12 @@ export default function LinkerContentList() {
                          >
                            {isProcessing ? (
                              <>
-                                <Loader2 className="w-4 h-4 animate-spin" />
+                                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                                Processing...
                              </>
                            ) : (
                              <>
-                                <Link2 className="w-4 h-4" />
+                                <PlugInIcon className="w-4 h-4" />
                                Add Links
                              </>
                            )}
--- a/frontend/src/pages/Linker/Dashboard.tsx
+++ b/frontend/src/pages/Linker/Dashboard.tsx
@@ -4,7 +4,7 @@ import PageMeta from '../../components/common/PageMeta';
 import ComponentCard from '../../components/common/ComponentCard';
 import EnhancedMetricCard from '../../components/dashboard/EnhancedMetricCard';
 import PageHeader from '../../components/common/PageHeader';
-import { Link2, FileText, TrendingUp, ArrowRight } from 'lucide-react';
+import { FileTextIcon, ArrowRightIcon, PlugInIcon, ArrowUpIcon } from '../../icons';
 import { fetchContent } from '../../services/api';
 import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
@@ -67,19 +67,26 @@ export default function LinkerDashboard() {
      <PageMeta title="Linker Dashboard" description="Internal linking overview and statistics" />
      
      <div className="space-y-6">
-        <PageHeader
-          title="Linker Dashboard"
-          description="Manage internal linking for your content"
-          actions={
-            <Link
-              to="/linker/content"
-              className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
-            >
-              <Link2 className="w-4 h-4" />
-              View Content
-            </Link>
-          }
-        />
+        <div className="flex items-center justify-between mb-6">
+          <PageHeader
+            title="Linker Dashboard"
+            lastUpdated={new Date()}
+            badge={{
+              icon: <PlugInIcon />,
+              color: 'blue',
+            }}
+          />
+          <Link
+            to="/linker/content"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+          >
+            <PlugInIcon />
+            View Content
+          </Link>
+        </div>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          Manage internal linking for your content
+        </p>

        {loading ? (
          <div className="text-center py-12">
@@ -94,8 +101,8 @@ export default function LinkerDashboard() {
                title="Total Linked"
                value={stats.totalLinked.toString()}
                subtitle={`${stats.contentWithoutLinks} without links`}
-                icon={<FileText className="w-6 h-6" />}
-                trend={null}
+                icon={<FileTextIcon className="w-6 h-6" />}
+                accentColor="blue"
                onClick={() => navigate('/linker/content')}
              />

@@ -103,8 +110,8 @@ export default function LinkerDashboard() {
                title="Total Links"
                value={stats.totalLinks.toString()}
                subtitle="Internal links created"
-                icon={<Link2 className="w-6 h-6" />}
-                trend={null}
+                icon={<PlugInIcon className="w-6 h-6" />}
+                accentColor="purple"
                onClick={() => navigate('/linker/content')}
              />

@@ -112,8 +119,8 @@ export default function LinkerDashboard() {
                title="Avg Links/Content"
                value={stats.averageLinksPerContent.toString()}
                subtitle="Average per linked content"
-                icon={<TrendingUp className="w-6 h-6" />}
-                trend={null}
+                icon={<ArrowUpIcon className="w-6 h-6" />}
+                accentColor="green"
                onClick={() => navigate('/linker/content')}
              />
            </div>
@@ -126,13 +133,13 @@ export default function LinkerDashboard() {
                  className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                >
                  <div className="flex items-center gap-3">
-                    <Link2 className="w-5 h-5 text-blue-500" />
+                    <PlugInIcon className="w-5 h-5 text-blue-500" />
                    <div>
                      <h3 className="font-medium text-gray-900 dark:text-white">Link Content</h3>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Process content for internal linking</p>
                    </div>
                  </div>
-                  <ArrowRight className="w-5 h-5 text-gray-400" />
+                  <ArrowRightIcon className="w-5 h-5 text-gray-400" />
                </Link>

                <Link
@@ -140,13 +147,13 @@ export default function LinkerDashboard() {
                  className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                >
                  <div className="flex items-center gap-3">
-                    <FileText className="w-5 h-5 text-purple-500" />
+                    <FileTextIcon className="w-5 h-5 text-purple-500" />
                    <div>
                      <h3 className="font-medium text-gray-900 dark:text-white">View Content</h3>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Browse all content items</p>
                    </div>
                  </div>
-                  <ArrowRight className="w-5 h-5 text-gray-400" />
+                  <ArrowRightIcon className="w-5 h-5 text-gray-400" />
                </Link>
              </div>
            </ComponentCard>
--- a/frontend/src/pages/Optimizer/AnalysisPreview.tsx
+++ b/frontend/src/pages/Optimizer/AnalysisPreview.tsx
@@ -6,7 +6,7 @@ import { optimizerApi } from '../../api/optimizer.api';
 import { fetchContent, Content as ContentType } from '../../services/api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { OptimizationScores } from '../../components/optimizer/OptimizationScores';
-import { Loader2, ArrowLeft } from 'lucide-react';
+import { ArrowLeftIcon, BoltIcon } from '../../icons';

 export default function AnalysisPreview() {
  const { id } = useParams<{ id: string }>();
@@ -63,19 +63,26 @@ export default function AnalysisPreview() {
      <PageMeta title="Content Analysis" description="Preview content optimization scores" />
      
      <div className="space-y-6">
-        <PageHeader
-          title="Content Analysis"
-          description="Preview optimization scores without optimizing"
-          actions={
-            <button
-              onClick={() => navigate(-1)}
-              className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-            >
-              <ArrowLeft className="w-4 h-4" />
-              Back
-            </button>
-          }
-        />
+        <div className="flex items-center justify-between mb-6">
+          <PageHeader
+            title="Content Analysis"
+            lastUpdated={new Date()}
+            badge={{
+              icon: <BoltIcon />,
+              color: 'orange',
+            }}
+          />
+          <button
+            onClick={() => navigate(-1)}
+            className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            <ArrowLeftIcon className="w-4 h-4" />
+            Back
+          </button>
+        </div>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          Preview optimization scores without optimizing
+        </p>

        {loading || analyzing ? (
          <div className="text-center py-12">
--- a/frontend/src/pages/Optimizer/ContentSelector.tsx
+++ b/frontend/src/pages/Optimizer/ContentSelector.tsx
@@ -9,7 +9,7 @@ import { SourceBadge, ContentSource } from '../../components/content/SourceBadge
 import { SyncStatusBadge, SyncStatus } from '../../components/content/SyncStatusBadge';
 import { ContentFilter, FilterState } from '../../components/content/ContentFilter';
 import { OptimizationScores } from '../../components/optimizer/OptimizationScores';
-import { Zap, Loader2, CheckCircle2 } from 'lucide-react';
+import { BoltIcon, CheckCircleIcon } from '../../icons';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';

@@ -146,42 +146,49 @@ export default function OptimizerContentSelector() {
      <PageMeta title="Optimize Content" description="Select and optimize content for SEO and engagement" />
      
      <div className="space-y-6">
-        <PageHeader
-          title="Optimize Content"
-          description="Select content to optimize for SEO, readability, and engagement"
-          actions={
-            <div className="flex items-center gap-4">
-              <select
-                value={entryPoint}
-                onChange={(e) => setEntryPoint(e.target.value as EntryPoint)}
-                className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-              >
-                <option value="auto">Auto-detect</option>
-                <option value="writer">From Writer</option>
-                <option value="wordpress">From WordPress</option>
-                <option value="external">From External</option>
-                <option value="manual">Manual</option>
-              </select>
-              <button
-                onClick={handleBatchOptimize}
-                disabled={selectedIds.length === 0 || processing.length > 0}
-                className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-              >
-                {processing.length > 0 ? (
-                  <>
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                    Optimizing...
-                  </>
-                ) : (
-                  <>
-                    <Zap className="w-4 h-4" />
-                    Optimize Selected ({selectedIds.length})
-                  </>
-                )}
-              </button>
-            </div>
-          }
-        />
+        <div className="flex items-center justify-between mb-6">
+          <PageHeader
+            title="Optimize Content"
+            lastUpdated={new Date()}
+            badge={{
+              icon: <BoltIcon />,
+              color: 'orange',
+            }}
+          />
+          <div className="flex items-center gap-4">
+            <select
+              value={entryPoint}
+              onChange={(e) => setEntryPoint(e.target.value as EntryPoint)}
+              className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+            >
+              <option value="auto">Auto-detect</option>
+              <option value="writer">From Writer</option>
+              <option value="wordpress">From WordPress</option>
+              <option value="external">From External</option>
+              <option value="manual">Manual</option>
+            </select>
+            <button
+              onClick={handleBatchOptimize}
+              disabled={selectedIds.length === 0 || processing.length > 0}
+              className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {processing.length > 0 ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                  Optimizing...
+                </>
+              ) : (
+                <>
+                  <BoltIcon className="w-4 h-4" />
+                  Optimize Selected ({selectedIds.length})
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          Select content to optimize for SEO, readability, and engagement
+        </p>

        {/* Filters */}
        <ContentFilter onFilterChange={setFilters} />
@@ -275,12 +282,12 @@ export default function OptimizerContentSelector() {
                          >
                            {isProcessing ? (
                              <>
-                                <Loader2 className="w-4 h-4 animate-spin" />
+                                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                                Optimizing...
                              </>
                            ) : (
                              <>
-                                <Zap className="w-4 h-4" />
+                                <BoltIcon className="w-4 h-4" />
                                Optimize
                              </>
                            )}
--- a/frontend/src/pages/Optimizer/Dashboard.tsx
+++ b/frontend/src/pages/Optimizer/Dashboard.tsx
@@ -4,7 +4,7 @@ import PageMeta from '../../components/common/PageMeta';
 import ComponentCard from '../../components/common/ComponentCard';
 import EnhancedMetricCard from '../../components/dashboard/EnhancedMetricCard';
 import PageHeader from '../../components/common/PageHeader';
-import { Zap, FileText, TrendingUp, ArrowRight } from 'lucide-react';
+import { BoltIcon, FileTextIcon, ArrowUpIcon, ArrowRightIcon } from '../../icons';
 import { fetchContent } from '../../services/api';
 import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
@@ -69,19 +69,26 @@ export default function OptimizerDashboard() {
      <PageMeta title="Optimizer Dashboard" description="Content optimization overview and statistics" />
      
      <div className="space-y-6">
-        <PageHeader
-          title="Optimizer Dashboard"
-          description="Optimize your content for SEO, readability, and engagement"
-          actions={
-            <Link
-              to="/optimizer/content"
-              className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
-            >
-              <Zap className="w-4 h-4" />
-              Optimize Content
-            </Link>
-          }
-        />
+        <div className="flex items-center justify-between mb-6">
+          <PageHeader
+            title="Optimizer Dashboard"
+            lastUpdated={new Date()}
+            badge={{
+              icon: <BoltIcon />,
+              color: 'orange',
+            }}
+          />
+          <Link
+            to="/optimizer/content"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+          >
+            <BoltIcon />
+            Optimize Content
+          </Link>
+        </div>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          Optimize your content for SEO, readability, and engagement
+        </p>

        {loading ? (
          <div className="text-center py-12">
@@ -96,8 +103,8 @@ export default function OptimizerDashboard() {
                title="Total Optimized"
                value={stats.totalOptimized.toString()}
                subtitle={`${stats.contentWithoutScores} not optimized`}
-                icon={<FileText className="w-6 h-6" />}
-                trend={null}
+                icon={<FileTextIcon className="w-6 h-6" />}
+                accentColor="blue"
                onClick={() => navigate('/optimizer/content')}
              />

@@ -105,8 +112,8 @@ export default function OptimizerDashboard() {
                title="Avg Score Improvement"
                value={`+${stats.averageScoreImprovement}%`}
                subtitle="Average improvement per optimization"
-                icon={<TrendingUp className="w-6 h-6" />}
-                trend={null}
+                icon={<ArrowUpIcon className="w-6 h-6" />}
+                accentColor="green"
                onClick={() => navigate('/optimizer/content')}
              />

@@ -114,8 +121,8 @@ export default function OptimizerDashboard() {
                title="Credits Used"
                value={stats.totalCreditsUsed.toString()}
                subtitle="Total credits for optimization"
-                icon={<Zap className="w-6 h-6" />}
-                trend={null}
+                icon={<BoltIcon className="w-6 h-6" />}
+                accentColor="orange"
                onClick={() => navigate('/optimizer/content')}
              />
            </div>
@@ -128,13 +135,13 @@ export default function OptimizerDashboard() {
                  className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                >
                  <div className="flex items-center gap-3">
-                    <Zap className="w-5 h-5 text-yellow-500" />
+                    <BoltIcon className="w-5 h-5 text-yellow-500" />
                    <div>
                      <h3 className="font-medium text-gray-900 dark:text-white">Optimize Content</h3>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Select and optimize content items</p>
                    </div>
                  </div>
-                  <ArrowRight className="w-5 h-5 text-gray-400" />
+                  <ArrowRightIcon className="w-5 h-5 text-gray-400" />
                </Link>

                <Link
@@ -142,13 +149,13 @@ export default function OptimizerDashboard() {
                  className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                >
                  <div className="flex items-center gap-3">
-                    <FileText className="w-5 h-5 text-purple-500" />
+                    <FileTextIcon className="w-5 h-5 text-purple-500" />
                    <div>
                      <h3 className="font-medium text-gray-900 dark:text-white">View Content</h3>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Browse all content items</p>
                    </div>
                  </div>
-                  <ArrowRight className="w-5 h-5 text-gray-400" />
+                  <ArrowRightIcon className="w-5 h-5 text-gray-400" />
                </Link>
              </div>
            </ComponentCard>