COmpoeentes standardization 2

frontend/src/components/onboarding/OnboardingWizard.tsx

@@ -7,6 +7,7 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Card } from '../ui/card';
 import Button from '../ui/button/Button';
+import IconButton from '../ui/button/IconButton';
 import { 
   ArrowRightIcon,
   ArrowLeftIcon,
@@ -209,14 +210,13 @@ export default function OnboardingWizard({ onComplete, onSkip }: OnboardingWizar
                 </p>
               </div>
             </div>
-            <Button
+            <IconButton
               variant="ghost"
               size="sm"
               onClick={handleSkipAll}
               className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-            >
-              <CloseIcon className="w-5 h-5" />
-            </Button>
+              icon={<CloseIcon className="w-5 h-5" />}
+            />
           </div>
           
           {/* Progress Bar */}

frontend/src/components/onboarding/steps/Step3ConnectIntegration.tsx

@@ -14,7 +14,7 @@ import {
   CopyIcon,
   CheckCircleIcon,
   TimeIcon,
-  ArrowUpIcon,
+  DownloadIcon,
 } from '../../../icons';
 import { integrationApi } from '../../../services/integration.api';
 import { useToast } from '../../ui/toast/ToastContainer';
@@ -115,8 +115,12 @@ export default function Step3ConnectIntegration({
       title: 'Download the Plugin',
       description: 'Get the IGNY8 Bridge plugin from our dashboard',
       action: (
-        <Button variant="outline" size="sm" className="gap-1">
-          <ArrowUpIcon className="w-3 h-3" />
+        <Button 
+          variant="outline" 
+          tone="brand"
+          size="sm" 
+          startIcon={<DownloadIcon className="w-3 h-3" />}
+        >
           Download Plugin
         </Button>
       ),
@@ -174,9 +178,9 @@ export default function Step3ConnectIntegration({
               variant="outline"
               size="sm"
               onClick={handleCopyApiKey}
-              className="gap-1 flex-shrink-0"
+              className="flex-shrink-0"
+              startIcon={<CopyIcon className="w-4 h-4" />}
             >
-              <CopyIcon className="w-4 h-4" />
               Copy
             </Button>
           </div>

frontend/src/components/onboarding/steps/Step4AddKeywords.tsx

@@ -167,13 +167,12 @@ export default function Step4AddKeywords({
               className="pl-10"
             />
           </div>
-          <Button
+          <IconButton
             variant="outline"
             onClick={handleAddKeyword}
             disabled={!inputValue.trim()}
-          >
-            <PlusIcon className="w-4 h-4" />
-          </Button>
+            icon={<PlusIcon className="w-4 h-4" />}
+          />
         </div>
         <p className="text-xs text-gray-500 mt-1">
           Tip: Paste a comma-separated list or one keyword per line