ui frotneedn fixes

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>