(fix:input) remove ambiguous label prop

frontend/src/components/Input.tsx

@@ -8,13 +8,13 @@ const Input = ({
   value,
   isAutoFocused = false,
   placeholder,
-  label,
   required = false,
   maxLength,
-  className,
+  className = '',
   colorVariant = 'silver',
   borderVariant = 'thick',
   children,
+  labelBgClassName = 'bg-white dark:bg-raisin-black',
   onChange,
   onPaste,
   onKeyDown,
@@ -32,15 +32,15 @@ const Input = ({
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
-    <div className="relative">
+    <div className={`relative ${className}`}>
       <input
         ref={inputRef}
-        className={`peer h-[42px] w-full rounded-full px-3 py-1 outline-none dark:bg-transparent dark:text-white placeholder-transparent ${className} ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
+        className={`peer h-[42px] w-full rounded-full px-3 py-1 bg-transparent outline-none dark:text-white placeholder-transparent ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
         type={type}
         id={id}
         name={name}
         autoFocus={isAutoFocused}
-        placeholder={placeholder || label || ''}
+        placeholder={placeholder || ''}
         maxLength={maxLength}
         value={value}
         onChange={onChange}
@@ -50,17 +50,16 @@ const Input = ({
       >
         {children}
       </input>
-      {(label || placeholder) && (
+      {placeholder && (
         <label
           htmlFor={id}
-          className={`absolute left-3 -top-2.5 bg-white px-2 text-xs transition-all
+          className={`absolute left-3 -top-2.5 px-2 text-xs transition-all 
-            peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 
+            peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 peer-placeholder-shown:text-base 
-            peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-4000
+            peer-placeholder-shown:text-gray-4000 peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs 
-            peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs peer-focus:text-gray-4000
+            peer-focus:text-gray-4000 dark:text-silver dark:peer-placeholder-shown:text-gray-400 
-            dark:bg-[#26272E] dark:text-silver dark:peer-placeholder-shown:text-gray-400
+            cursor-none pointer-events-none ${labelBgClassName}`}
-            cursor-none pointer-events-none`}
         >
-          {label || placeholder}
+          {placeholder}
           {required && (
             <span className="text-[#D30000] dark:text-[#D42626] ml-0.5">*</span>
           )}