ui frotneedn fixes

frontend/src/pages/Sites/Content.tsx

@@ -130,8 +130,7 @@ export default function SiteContentManager() {
         hideSiteSector
       />
       <div className="mb-6 flex justify-end">
-        <Button onClick={() => navigate(`/sites/${siteId}/posts/new`)} variant="primary">
-          <PlusIcon className="w-4 h-4 mr-2" />
+        <Button onClick={() => navigate(`/sites/${siteId}/posts/new`)} variant="primary" startIcon={<PlusIcon className="w-4 h-4" />}>
           New Post
         </Button>
       </div>

frontend/src/pages/Sites/Dashboard.tsx

@@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import PageMeta from '../../components/common/PageMeta';
 import PageHeader from '../../components/common/PageHeader';
+import ComponentCard from '../../components/common/ComponentCard';
 import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
 import EnhancedMetricCard from '../../components/dashboard/EnhancedMetricCard';
@@ -204,8 +205,8 @@ export default function SiteDashboard() {
           <Button
             variant="outline"
             onClick={() => navigate(`/sites/${siteId}/preview`)}
+            startIcon={<EyeIcon className="w-4 h-4" />}
           >
-            <EyeIcon className="w-4 h-4 mr-2" />
             Preview
           </Button>
           <Button
@@ -245,11 +246,8 @@ export default function SiteDashboard() {
       </div>
 
 
-      {/* Quick Actions - Matching Planner Dashboard pattern */}
-      <div className="mb-6">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-          Quick Actions
-        </h2>
+      {/* Quick Actions */}
+      <ComponentCard title="Quick Actions" desc="Common site management tasks">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           <button
             onClick={() => navigate(`/sites/${siteId}/pages`)}
@@ -321,7 +319,7 @@ export default function SiteDashboard() {
             <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] transition" />
           </button>
         </div>
-      </div>
+      </ComponentCard>
 
       {/* Recent Activity */}
       <Card className="p-6">

frontend/src/pages/Sites/DeploymentPanel.tsx

@@ -389,8 +389,8 @@ export default function DeploymentPanel() {
             <Button
               variant="outline"
               onClick={() => loadReadiness(selectedBlueprintId!)}
+              startIcon={<BoltIcon className="w-4 h-4" />}
             >
-              <BoltIcon className="w-4 h-4 mr-2" />
               Refresh Checks
             </Button>
             <Button

frontend/src/pages/Sites/List.tsx

@@ -571,43 +571,39 @@ export default function SiteList() {
           <div className="border-t border-gray-200 p-5 dark:border-gray-800">
             <div className="grid grid-cols-3 gap-2 mb-3">
               <Button
-                variant="outline"
-                size="sm"
                 onClick={() => navigate(`/sites/${site.id}`)}
-                className="w-full justify-center text-xs"
+                variant="primary"
+                size="sm"
+                startIcon={<EyeIcon className="w-4 h-4" />}
               >
-                <EyeIcon className="w-3 h-3 mr-1" />
                 Dashboard
               </Button>
               <Button
-                variant="outline"
-                size="sm"
                 onClick={() => navigate(`/sites/${site.id}/content`)}
-                className="w-full justify-center text-xs"
+                variant="secondary"
+                size="sm"
+                startIcon={<FileIcon className="w-4 h-4" />}
               >
-                <FileIcon className="w-3 h-3 mr-1" />
                 Content
               </Button>
               <Button
+                onClick={() => navigate(`/sites/${site.id}/pages`)}
                 variant="outline"
                 size="sm"
-                onClick={() => navigate(`/sites/${site.id}/pages`)}
-                className="w-full justify-center text-xs"
+                startIcon={<PageIcon className="w-4 h-4" />}
               >
-                <PageIcon className="w-3 h-3 mr-1" />
                 Pages
               </Button>
             </div>
             <div className="flex items-center justify-between">
               <div className="flex gap-2">
                 <Button
+                  onClick={() => navigate(`/sites/${site.id}/settings`)}
                   variant="outline"
                   size="sm"
-                  onClick={() => navigate(`/sites/${site.id}/settings`)}
-                  title="Site Settings"
+                  startIcon={<PlugInIcon className="w-4 h-4" />}
                 >
-                  <PlugInIcon className="w-4 h-4 mr-1" />
-                  <span className="text-xs">Settings</span>
+                  Settings
                 </Button>
               </div>
               <Switch
@@ -649,11 +645,9 @@ export default function SiteList() {
         title="Sites Management" 
         badge={{ icon: <GridIcon />, color: 'blue' }}
         hideSiteSector={true}
+        navigation={<ModuleNavigationTabs tabs={sitesTabs} />}
       />
       
-      {/* In-page navigation tabs */}
-      <ModuleNavigationTabs tabs={sitesTabs} />
-      
       {/* Info Alert */}
       <div className="mb-6">
         <Alert
@@ -667,39 +661,29 @@ export default function SiteList() {
       <div className="flex items-center justify-between mb-6">
         <div className="flex-1"></div>
         <div className="flex items-center gap-3">
-          <Button onClick={() => navigate('/sites/builder')} variant="outline">
-            <PlusIcon className="w-4 h-4 mr-2" />
+          <Button onClick={() => navigate('/sites/builder')} variant="outline" startIcon={<PlusIcon className="w-4 h-4" />}>
             Create with Builder
           </Button>
-          <Button onClick={handleCreateSite} variant="primary">
-            <PlusIcon className="w-4 h-4 mr-2" />
+          <Button onClick={handleCreateSite} variant="primary" startIcon={<PlusIcon className="w-4 h-4" />}>
             Add Site
           </Button>
           <div className="flex items-center gap-2">
-            <button
+            <Button
               onClick={() => setViewType('table')}
-              className={`inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
-                viewType === 'table'
-                  ? 'bg-white text-gray-900 dark:bg-gray-800 dark:text-white shadow-sm border border-gray-200 dark:border-gray-700'
-                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-              }`}
-              title="Table View"
+              variant={viewType === 'table' ? 'secondary' : 'ghost'}
+              size="sm"
+              startIcon={<TableIcon className="w-4 h-4" />}
             >
-              <TableIcon className="w-4 h-4" />
               <span className="hidden sm:inline">Table</span>
-            </button>
-            <button
+            </Button>
+            <Button
               onClick={() => setViewType('grid')}
-              className={`inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
-                viewType === 'grid'
-                  ? 'bg-white text-gray-900 dark:bg-gray-800 dark:text-white shadow-sm border border-gray-200 dark:border-gray-700'
-                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-              }`}
-              title="Grid View"
+              variant={viewType === 'grid' ? 'secondary' : 'ghost'}
+              size="sm"
+              startIcon={<GridIcon className="w-4 h-4" />}
             >
-              <GridIcon className="w-4 h-4" />
               <span className="hidden sm:inline">Grid</span>
-            </button>
+            </Button>
           </div>
         </div>
       </div>

frontend/src/pages/Sites/Manage.tsx

@@ -127,8 +127,7 @@ export default function SiteManagement() {
             Manage your sites, pages, and content
           </p>
         </div>
-        <Button onClick={handleCreateSite} variant="primary">
-          <PlusIcon className="w-4 h-4 mr-2" />
+        <Button onClick={handleCreateSite} variant="primary" startIcon={<PlusIcon className="w-4 h-4" />}>
           Create New Site
         </Button>
       </div>
@@ -182,8 +181,8 @@ export default function SiteManagement() {
                       size="sm"
                       onClick={() => handleIntegration(site.id)}
                       className="w-full"
+                      startIcon={<PlugIcon className="w-4 h-4" />}
                     >
-                      <PlugIcon className="w-4 h-4 mr-2" />
                       {site.has_wordpress_integration ? 'Manage Integration' : 'Connect WordPress'}
                     </Button>
                   </div>

frontend/src/pages/Sites/PageManager.tsx

@@ -286,8 +286,7 @@ export default function PageManager() {
         hideSiteSector
       />
       <div className="mb-6 flex justify-end">
-        <Button onClick={handleAddPage} variant="primary">
-          <PlusIcon className="w-4 h-4 mr-2" />
+        <Button onClick={handleAddPage} variant="primary" startIcon={<PlusIcon className="w-4 h-4" />}>
           Add Page
         </Button>
       </div>

frontend/src/pages/Sites/PostEditor.tsx

@@ -247,8 +247,8 @@ export default function PostEditor() {
           <Button
             variant="outline"
             onClick={() => navigate(`/sites/${siteId}/content`)}
+            startIcon={<XIcon className="w-4 h-4" />}
           >
-            <XIcon className="w-4 h-4 mr-2" />
             Cancel
           </Button>
           <Button
@@ -256,8 +256,8 @@ export default function PostEditor() {
             onClick={handleSave}
             disabled={saving || (content.status === 'publish' && validationResult && !validationResult.is_valid)}
             title={content.status === 'publish' && validationResult && !validationResult.is_valid ? 'Please fix validation errors before publishing' : undefined}
+            startIcon={<SaveIcon className="w-4 h-4" />}
           >
-            <SaveIcon className="w-4 h-4 mr-2" />
             {saving ? 'Saving...' : content.status === 'publish' ? 'Publish' : 'Save Post'}
           </Button>
         </div>

frontend/src/pages/Sites/Preview.tsx

@@ -179,16 +179,13 @@ export default function SitePreview() {
             </p>
           </div>
           <div className="flex gap-2">
-            <Button variant="outline" onClick={handleRefresh}>
-              <RefreshCwIcon className="w-4 h-4 mr-2" />
+            <Button variant="outline" onClick={handleRefresh} startIcon={<RefreshCwIcon className="w-4 h-4" />}>
               Refresh
             </Button>
-            <Button variant="outline" onClick={handleOpenInNewTab}>
-              <ExternalLinkIcon className="w-4 h-4 mr-2" />
+            <Button variant="outline" onClick={handleOpenInNewTab} startIcon={<ExternalLinkIcon className="w-4 h-4" />}>
               Open in New Tab
             </Button>
-            <Button variant="outline" onClick={() => setIsFullscreen(true)}>
-              <Maximize2Icon className="w-4 h-4 mr-2" />
+            <Button variant="outline" onClick={() => setIsFullscreen(true)} startIcon={<Maximize2Icon className="w-4 h-4" />}>
               Fullscreen
             </Button>
           </div>
@@ -197,8 +194,7 @@ export default function SitePreview() {
 
       {isFullscreen && (
         <div className="absolute top-4 right-4 z-10">
-          <Button variant="outline" onClick={() => setIsFullscreen(false)}>
-            <Minimize2Icon className="w-4 h-4 mr-2" />
+          <Button variant="outline" onClick={() => setIsFullscreen(false)} startIcon={<Minimize2Icon className="w-4 h-4" />}>
             Exit Fullscreen
           </Button>
         </div>

frontend/src/pages/Sites/SyncDashboard.tsx

@@ -400,8 +400,8 @@ export default function SyncDashboard() {
                   size="sm"
                   onClick={() => handleSync('both')}
                   disabled={syncing}
+                  startIcon={<BoltIcon className="w-4 h-4" />}
                 >
-                  <BoltIcon className="w-4 h-4 mr-2" />
                   Retry Sync to Resolve
                 </Button>
               </div>