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.

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
                               </>
                             )}

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>