refactor(FE): Refine input component styles and error UI

src/components/input/FileInput.tsx

@@ -41,7 +41,7 @@ const FileInput = ({
   return (
     <div
       className={cn(
-        'w-full flex flex-col gap-2 text-start',
+        'w-full flex flex-col gap-0 text-start rounded-lg',
         className?.wrapper
       )}
     >
@@ -49,7 +49,7 @@ const FileInput = ({
         <label
           htmlFor={name}
           className={cn(
-            'w-full text-sm font-normal leading-5',
+            'w-full py-2 text-xs font-semibold leading-5',
             {
               'text-error': isError,
             },
@@ -77,15 +77,19 @@ const FileInput = ({
         onChange={onChange}
         onBlur={onBlur}
         disabled={disabled}
-        className={cn('grow file-input w-full h-12 rounded', className?.input)}
+        className={cn(
+          'grow file-input w-full h-fit px-3 py-1.5 text-sm font-normal leading-6 rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
+          className?.input
+        )}
         readOnly={readOnly}
       />
 
-      {bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      {!isError && bottomLabel && (
+        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && errorMessage && (
+        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
       )}
-
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };