COmpoeentes standardization 2

frontend/src/components/sites/LayoutPreview.tsx

@@ -7,6 +7,7 @@ import React, { useState } from 'react';
 import { EyeIcon, XIcon, Maximize2Icon } from '../../icons';
 import { Card } from '../../ui/card';
 import Button from '../../ui/button/Button';
+import IconButton from '../../ui/button/IconButton';
 
 export interface LayoutPreviewProps {
   layoutId: string;
@@ -145,15 +146,12 @@ export default function LayoutPreview({ layoutId, layoutName, onClose, onSelect
               {isFullscreen ? 'Exit' : 'Fullscreen'}
             </Button>
             {onSelect && (
-              <Button variant="primary" size="sm" onClick={onSelect}>
-                <EyeIcon className="w-4 h-4 mr-2" />
+              <Button variant="primary" size="sm" onClick={onSelect} startIcon={<EyeIcon className="w-4 h-4" />}>
                 Select Layout
               </Button>
             )}
             {onClose && (
-              <Button variant="ghost" size="sm" onClick={onClose}>
-                <XIcon className="w-4 h-4" />
-              </Button>
+              <IconButton variant="ghost" size="sm" onClick={onClose} icon={<XIcon className="w-4 h-4" />} />
             )}
           </div>
         </div>

frontend/src/components/sites/SiteTypeBadge.tsx

@@ -9,9 +9,10 @@ import Badge from '../ui/badge/Badge';
 interface SiteTypeBadgeProps {
   hostingType: string;
   className?: string;
+  size?: 'sm' | 'md' | 'lg';
 }
 
-export default function SiteTypeBadge({ hostingType, className = '' }: SiteTypeBadgeProps) {
+export default function SiteTypeBadge({ hostingType, className = '', size = 'sm' }: SiteTypeBadgeProps) {
   const getTypeInfo = () => {
     switch (hostingType) {
       case 'igny8_sites':
@@ -41,11 +42,11 @@ export default function SiteTypeBadge({ hostingType, className = '' }: SiteTypeB
     <Badge
       variant="soft"
       color={typeInfo.color}
+      size={size}
       startIcon={typeInfo.icon}
       className={className}
     >
       {typeInfo.label}
     </Badge>
   );
-}
-
+}

frontend/src/components/sites/StyleEditor.tsx

@@ -90,14 +90,12 @@ export default function StyleEditor({ styleSettings, onChange, onSave, onReset }
         </div>
         <div className="flex gap-2">
           {onReset && (
-            <Button variant="outline" onClick={onReset}>
-              <RefreshCwIcon className="w-4 h-4 mr-2" />
+            <Button variant="outline" onClick={onReset} startIcon={<RefreshCwIcon className="w-4 h-4" />}>
               Reset
             </Button>
           )}
           {onSave && (
-            <Button variant="primary" onClick={onSave}>
-              <SaveIcon className="w-4 h-4 mr-2" />
+            <Button variant="primary" onClick={onSave} startIcon={<SaveIcon className="w-4 h-4" />}>
               Save Styles
             </Button>
           )}
@@ -112,8 +110,8 @@ export default function StyleEditor({ styleSettings, onChange, onSave, onReset }
             tone="brand"
             size="sm"
             onClick={() => setActiveTab('css')}
+            startIcon={<CodeIcon className="w-4 h-4" />}
           >
-            <CodeIcon className="w-4 h-4 mr-2" />
             Custom CSS
           </Button>
           <Button
@@ -121,8 +119,8 @@ export default function StyleEditor({ styleSettings, onChange, onSave, onReset }
             tone="brand"
             size="sm"
             onClick={() => setActiveTab('colors')}
+            startIcon={<PaletteIcon className="w-4 h-4" />}
           >
-            <PaletteIcon className="w-4 h-4 mr-2" />
             Colors
           </Button>
           <Button
@@ -130,8 +128,8 @@ export default function StyleEditor({ styleSettings, onChange, onSave, onReset }
             tone="brand"
             size="sm"
             onClick={() => setActiveTab('typography')}
+            startIcon={<TypeIcon className="w-4 h-4" />}
           >
-            <TypeIcon className="w-4 h-4 mr-2" />
             Typography
           </Button>
           <Button

frontend/src/components/sites/TemplateCustomizer.tsx

@@ -74,8 +74,8 @@ export default function TemplateCustomizer({
             tone="brand"
             size="sm"
             onClick={() => setActiveTab('layout')}
+            startIcon={<LayoutIcon className="w-4 h-4" />}
           >
-            <LayoutIcon className="w-4 h-4 mr-2" />
             Layout
           </Button>
           <Button
@@ -83,8 +83,8 @@ export default function TemplateCustomizer({
             tone="brand"
             size="sm"
             onClick={() => setActiveTab('colors')}
+            startIcon={<PaletteIcon className="w-4 h-4" />}
           >
-            <PaletteIcon className="w-4 h-4 mr-2" />
             Colors
           </Button>
           <Button
@@ -92,8 +92,8 @@ export default function TemplateCustomizer({
             tone="brand"
             size="sm"
             onClick={() => setActiveTab('typography')}
+            startIcon={<TypeIcon className="w-4 h-4" />}
           >
-            <TypeIcon className="w-4 h-4 mr-2" />
             Typography
           </Button>
           <Button
@@ -101,8 +101,8 @@ export default function TemplateCustomizer({
             tone="brand"
             size="sm"
             onClick={() => setActiveTab('spacing')}
+            startIcon={<SettingsIcon className="w-4 h-4" />}
           >
-            <SettingsIcon className="w-4 h-4 mr-2" />
             Spacing
           </Button>
         </div>

frontend/src/components/sites/WordPressIntegrationCard.tsx

@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import { GlobeIcon, CheckCircleIcon, XCircleIcon, SettingsIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon } from '../../icons';
 import { Card } from '../ui/card';
 import Button from '../ui/button/Button';
+import IconButton from '../ui/button/IconButton';
 import Badge from '../ui/badge/Badge';
 
 interface WordPressIntegration {
@@ -175,8 +176,8 @@ export default function WordPressIntegrationCard({
             variant="outline"
             size="sm"
             className="flex-1"
+            startIcon={<SettingsIcon className="w-4 h-4" />}
           >
-            <SettingsIcon className="w-4 h-4 mr-2" />
             Manage
           </Button>
           {siteId && (
@@ -190,14 +191,13 @@ export default function WordPressIntegrationCard({
             </Button>
           )}
           {onSync && (
-            <Button
+            <IconButton
               onClick={onSync}
               variant="outline"
               size="sm"
               disabled={loading}
-            >
-              <RefreshCwIcon className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
-            </Button>
+              icon={<RefreshCwIcon className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />}
+            />
           )}
         </div>
       </div>

frontend/src/components/sites/WordPressIntegrationForm.tsx

@@ -286,16 +286,14 @@ export default function WordPressIntegrationForm({
                             type={apiKeyVisible ? 'text' : 'password'}
                             value={apiKeyVisible ? apiKey : maskApiKey(apiKey)}
                           />
-                          <Button
+                          <IconButton
                             onClick={handleCopyApiKey}
                             variant="outline"
                             tone="neutral"
                             size="sm"
                             className="absolute top-1/2 right-0 -translate-y-1/2 rounded-l-none"
-                          >
-                            <CopyIcon className="w-4 h-4" />
-                            Copy
-                          </Button>
+                            icon={<CopyIcon className="w-4 h-4" />}
+                          />
                         </div>
                         <div className="group relative inline-block">
                           <IconButton
@@ -303,9 +301,8 @@ export default function WordPressIntegrationForm({
                             disabled={generatingKey}
                             variant="outline"
                             title="Regenerate"
-                          >
-                            <RefreshCwIcon className={`w-5 h-5 ${generatingKey ? 'animate-spin' : ''}`} />
-                          </IconButton>
+                            icon={<RefreshCwIcon className={`w-5 h-5 ${generatingKey ? 'animate-spin' : ''}`} />}
+                          />
                           <div className="invisible absolute bottom-full left-1/2 z-50 mb-2.5 -translate-x-1/2 opacity-0 transition-opacity duration-300 group-hover:visible group-hover:opacity-100">
                             <div className="relative">
                               <div className="rounded-lg bg-white px-3 py-2 text-xs font-medium whitespace-nowrap text-gray-700 shadow-xs dark:bg-gray-800 dark:text-white">
@@ -348,18 +345,16 @@ export default function WordPressIntegrationForm({
                         disabled={generatingKey}
                         variant="ghost"
                         title="Regenerate API key"
-                      >
-                        <RefreshCwIcon className={`w-5 h-5 ${generatingKey ? 'animate-spin' : ''}`} />
-                      </IconButton>
+                        icon={<RefreshCwIcon className={`w-5 h-5 ${generatingKey ? 'animate-spin' : ''}`} />}
+                      />
                       <IconButton
                         onClick={handleRevokeApiKey}
                         disabled={generatingKey}
                         variant="ghost"
                         tone="danger"
                         title="Revoke API key"
-                      >
-                        <TrashBinIcon className="w-5 h-5" />
-                      </IconButton>
+                        icon={<TrashBinIcon className="w-5 h-5" />}
+                      />
                     </div>
                   </td>
                 </tr>
@@ -389,8 +384,8 @@ export default function WordPressIntegrationForm({
             <Button
               onClick={handleDownloadPlugin}
               variant="solid"
+              startIcon={<DownloadIcon className="w-4 h-4" />}
             >
-              <DownloadIcon className="w-4 h-4 mr-2" />
               Download Plugin
             </Button>
           </div>