refactor(FE): Improve disabled and read-only states for input components

src/components/input/TextInput.tsx

@@ -182,10 +182,12 @@ const TextInput = ({
       ) : (
         <div
           className={cn(
-            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
+            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 flex items-center border-base-content/10',
             {
               'border-error': isError,
               'border-success!': isValid,
+              'bg-white': !disabled,
+              'bg-base-content/5': disabled,
             },
             className?.inputWrapper
           )}
@@ -201,7 +203,14 @@ const TextInput = ({
             onChange={onChange}
             onBlur={onBlur}
             disabled={disabled}
-            className={cn('grow', className?.input)}
+            className={cn(
+              'grow bg-transparent outline-none',
+              {
+                'cursor-not-allowed': disabled,
+                'text-gray-500': disabled,
+              },
+              className?.input
+            )}
             readOnly={readOnly}
           />