componenets standardization 1

frontend/src/components/onboarding/WorkflowGuide.tsx

@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import { Card } from '../ui/card';
 import Button from '../ui/button/Button';
 import Badge from '../ui/badge/Badge';
+import InputField from '../form/input/InputField';
 import { 
   CloseIcon,
   ArrowRightIcon,
@@ -297,12 +298,10 @@ export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
                     <label className="block text-base font-semibold text-gray-900 dark:text-white mb-2">
                       Site Name
                     </label>
-                    <input
-                      type="text"
+                    <InputField
                       value={siteName}
                       onChange={(e) => setSiteName(e.target.value)}
                       placeholder="Enter site name"
-                      className="w-full px-4 py-2.5 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-base focus:border-brand-500 focus:ring-2 focus:ring-brand-200 dark:focus:ring-brand-800"
                     />
                   </div>
 
@@ -311,12 +310,10 @@ export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
                     <label className="block text-base font-semibold text-gray-900 dark:text-white mb-2">
                       Website Address
                     </label>
-                    <input
-                      type="text"
+                    <InputField
                       value={websiteAddress}
                       onChange={(e) => setWebsiteAddress(e.target.value)}
                       placeholder="https://example.com"
-                      className="w-full px-4 py-2.5 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-base focus:border-brand-500 focus:ring-2 focus:ring-brand-200 dark:focus:ring-brand-800"
                     />
                   </div>
 

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

@@ -93,18 +93,17 @@ export default function Step1Welcome({ onNext, onSkip }: Step1WelcomeProps) {
       <div className="flex items-center justify-between">
         <Button
           variant="ghost"
+          tone="neutral"
           onClick={onSkip}
-          className="text-gray-500"
         >
           Skip for now
         </Button>
         <Button
           variant="primary"
           onClick={onNext}
-          className="gap-2"
+          endIcon={<ArrowRightIcon className="w-4 h-4" />}
         >
           Let's Get Started
-          <ArrowRightIcon className="w-4 h-4" />
         </Button>
       </div>
     </div>

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

@@ -278,20 +278,19 @@ export default function Step2AddSite({
       <div className="flex items-center justify-between">
         <Button
           variant="ghost"
+          tone="neutral"
           onClick={onBack}
-          className="gap-2"
+          startIcon={<ArrowLeftIcon className="w-4 h-4" />}
         >
-          <ArrowLeftIcon className="w-4 h-4" />
           Back
         </Button>
         <Button
           variant="primary"
           onClick={handleCreateSite}
           disabled={isCreating || !data.siteName.trim() || !selectedIndustry || data.selectedSectors.length === 0}
-          className="gap-2"
+          endIcon={!isCreating ? <ArrowRightIcon className="w-4 h-4" /> : undefined}
         >
           {isCreating ? 'Creating...' : 'Create Site'}
-          <ArrowRightIcon className="w-4 h-4" />
         </Button>
       </div>
     </div>

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

@@ -245,24 +245,13 @@ export default function Step3ConnectIntegration({
             size="sm"
             onClick={handleTestConnection}
             disabled={isTesting}
-            className="gap-1"
+            startIcon={
+              isTesting ? <TimeIcon className="w-4 h-4 animate-spin" /> :
+              testResult === 'success' ? <CheckCircleIcon className="w-4 h-4" /> :
+              <TimeIcon className="w-4 h-4" />
+            }
           >
-            {isTesting ? (
-              <>
-                <TimeIcon className="w-4 h-4 animate-spin" />
-                Testing...
-              </>
-            ) : testResult === 'success' ? (
-              <>
-                <CheckCircleIcon className="w-4 h-4" />
-                Connected
-              </>
-            ) : (
-              <>
-                <TimeIcon className="w-4 h-4" />
-                Test Connection
-              </>
-            )}
+            {isTesting ? 'Testing...' : testResult === 'success' ? 'Connected' : 'Test Connection'}
           </Button>
         </div>
       </Card>
@@ -278,15 +267,16 @@ export default function Step3ConnectIntegration({
       <div className="flex items-center justify-between">
         <Button
           variant="ghost"
+          tone="neutral"
           onClick={onBack}
-          className="gap-2"
+          startIcon={<ArrowLeftIcon className="w-4 h-4" />}
         >
-          <ArrowLeftIcon className="w-4 h-4" />
           Back
         </Button>
         <div className="flex gap-2">
           <Button
             variant="ghost"
+            tone="neutral"
             onClick={onSkip}
           >
             Skip for now
@@ -294,10 +284,9 @@ export default function Step3ConnectIntegration({
           <Button
             variant="primary"
             onClick={onNext}
-            className="gap-2"
+            endIcon={<ArrowRightIcon className="w-4 h-4" />}
           >
             Continue
-            <ArrowRightIcon className="w-4 h-4" />
           </Button>
         </div>
       </div>

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

@@ -4,6 +4,8 @@
  */
 import React, { useState } from 'react';
 import Button from '../../ui/button/Button';
+import IconButton from '../../ui/button/IconButton';
+import InputField from '../../form/input/InputField';
 import { Card } from '../../ui/card';
 import Badge from '../../ui/badge/Badge';
 import Alert from '../../ui/alert/Alert';
@@ -158,14 +160,11 @@ export default function Step4AddKeywords({
         <div className="flex gap-2">
           <div className="relative flex-1">
             <ListIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-            <input
-              type="text"
+            <InputField
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              onPaste={handlePaste}
               placeholder="Enter a keyword..."
-              className="w-full pl-10 pr-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-transparent"
+              className="pl-10"
             />
           </div>
           <Button
@@ -199,12 +198,14 @@ export default function Step4AddKeywords({
                 className="gap-1 pr-1"
               >
                 {keyword}
-                <button
+                <IconButton
+                  icon={<CloseIcon className="w-3 h-3" />}
                   onClick={() => handleRemoveKeyword(keyword)}
-                  className="ml-1 p-0.5 hover:bg-gray-300 dark:hover:bg-gray-600 rounded"
-                >
-                  <CloseIcon className="w-3 h-3" />
-                </button>
+                  variant="ghost"
+                  size="xs"
+                  className="ml-1"
+                  aria-label="Remove keyword"
+                />
               </Badge>
             ))}
           </div>
@@ -214,12 +215,14 @@ export default function Step4AddKeywords({
       <div className="flex items-center justify-between text-sm text-gray-500 mb-4">
         <span>{keywords.length} keyword{keywords.length !== 1 ? 's' : ''} added</span>
         {keywords.length > 0 && (
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
             onClick={() => setKeywords([])}
             className="text-error-500 hover:text-error-600"
           >
             Clear all
-          </button>
+          </Button>
         )}
       </div>
 
@@ -251,15 +254,16 @@ export default function Step4AddKeywords({
       <div className="flex items-center justify-between">
         <Button
           variant="ghost"
+          tone="neutral"
           onClick={onBack}
-          className="gap-2"
+          startIcon={<ArrowLeftIcon className="w-4 h-4" />}
         >
-          <ArrowLeftIcon className="w-4 h-4" />
           Back
         </Button>
         <div className="flex gap-2">
           <Button
             variant="ghost"
+            tone="neutral"
             onClick={onSkip}
           >
             Skip for now
@@ -268,10 +272,9 @@ export default function Step4AddKeywords({
             variant="primary"
             onClick={handleSubmitKeywords}
             disabled={isAdding || keywords.length === 0}
-            className="gap-2"
+            endIcon={!isAdding ? <ArrowRightIcon className="w-4 h-4" /> : undefined}
           >
             {isAdding ? 'Adding...' : `Add ${keywords.length} Keyword${keywords.length !== 1 ? 's' : ''}`}
-            <ArrowRightIcon className="w-4 h-4" />
           </Button>
         </div>
       </div>

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

@@ -157,10 +157,10 @@ export default function Step5Complete({
         size="lg"
         onClick={onComplete}
         disabled={isLoading}
-        className="gap-2 w-full"
+        fullWidth
+        endIcon={!isLoading ? <ArrowRightIcon className="w-4 h-4" /> : undefined}
       >
         {isLoading ? 'Loading...' : 'Go to Dashboard'}
-        <ArrowRightIcon className="w-4 h-4" />
       </Button>
     </div>
   );