componenets standardization 1

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>