refactor: streamline, refine and polish

components/color/ColorPicker.tsx

@@ -2,6 +2,7 @@
 
 import { HexColorPicker } from 'react-colorful';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils/cn';
 import { hexToRgb } from '@/lib/color/utils/color';
 
@@ -29,20 +30,20 @@ export function ColorPicker({ color, onChange, className }: ColorPickerProps) {
   const textColor = getContrastColor(color);
 
   return (
-    <div className={cn('flex flex-col items-center justify-center space-y-4', className)}>
-      <div className="w-full max-w-[200px] space-y-4">
+    <div className={cn('flex flex-col items-center justify-center space-y-3', className)}>
+      <div className="w-full max-w-[200px] space-y-3">
         <HexColorPicker color={color} onChange={onChange} className="!w-full" />
-        <div className="space-y-2">
-          <label htmlFor="color-input" className="text-sm font-medium">
-            Color Value
-          </label>
+        <div className="space-y-1.5">
+          <Label htmlFor="color-input" className="text-xs">
+            Hex Value
+          </Label>
           <Input
             id="color-input"
             type="text"
             value={color}
             onChange={handleInputChange}
-            placeholder="#ff0099 or rgb(255, 0, 153)"
-            className="font-mono transition-colors duration-200"
+            placeholder="#ff0099"
+            className="font-mono text-xs transition-colors duration-200"
             style={{
               backgroundColor: color,
               color: textColor,