[Client] TCCPISSUE: Fix form input bug in User Profile #145: Refactor…

… FormField component: Add isAccount and disabled props
ballyalley-o · Apr 25, 2024 · 8633f84 · 8633f84
1 parent 4e506ee
commit 8633f84
Showing 1 changed file with 45 additions and 17 deletions.
diff --git a/src/component/form/form-field/form-field.tsx b/src/component/form/form-field/form-field.tsx
@@ -20,6 +20,8 @@ interface ExtendedFormFieldProps extends FormFieldProps {
   errors?: any
   helperText?: string
   defaultValue?: string
+  isAccount?: boolean
+  disabled?: boolean
   setValue?: (value: string) => void
 }
 
@@ -37,6 +39,8 @@ const FormField = forwardRef(
       helperText,
       isGithub,
       errors,
+      isAccount = false,
+      disabled = false,
       required = false
     }: ExtendedFormFieldProps,
     ref
@@ -56,10 +60,10 @@ const FormField = forwardRef(
 
     return (
       <TextField
-        variant='filled'
+        variant={isAccount ? 'outlined' : 'filled'}
         color='primary'
         autoComplete={autoComplete}
-        disabled={submitting || sent}
+        disabled={submitting || sent || disabled}
         label={label}
         placeholder={placeholder}
         type={showPassword ? type : isPassword ? KEY.PASSWORD : type}
@@ -95,26 +99,50 @@ const FormField = forwardRef(
         fullWidth
         {...register(name)}
         sx={{
-          color: 'common.white',
-          '& .MuiFilledInput-root': {
-            color: 'common.black',
-            backgroundColor: 'common.white',
-            '& .MuiInputLabel-root': {
+          ...(!isAccount && {
+            color: 'common.white',
+            '& .MuiFilledInput-root': {
+              color: 'common.black',
+              backgroundColor: 'common.white',
+              '& .MuiInputLabel-root': {
+                color: 'common.white'
+              },
+              '&.Mui-focused .MuiInputBase-input': {
+                color: 'common.black'
+              },
+              '&.Mui-focused': {
+                backgroundColor: 'secondary.main'
+              },
+              '&:hover': {
+                backgroundColor: 'secondary.main'
+              }
+            },
+            '&:active': {
               color: 'common.white'
+            }
+          }),
+          // if isAccount is true, then apply the following styles
+          ...(isAccount && {
+            '& .MuiOutlinedInput-notchedOutline': {
+              border: 'none',
+              fontWeight: 'bold'
+            },
+            '&.Mui-focused': {
+              backgroundColor: 'transparent'
             },
-            '&.Mui-focused .MuiInputBase-input': {
+            // edit label color
+            '& .MuiInputLabel-root': {
               color: 'common.black'
             },
-            '&.Mui-focused': {
-              backgroundColor: 'secondary.main'
+            // disabled text color
+            '& .MuiInputBase-input ': {
+              color: 'grey.800',
+              opacity: 1,
+              fontWeight: 'bold'
             },
-            '&:hover': {
-              backgroundColor: 'secondary.main'
-            }
-          },
-          '&:active': {
-            color: 'common.white'
-          },
+            backgroundColor: 'transparent',
+            fontWeight: 'bold'
+          }),
           padding: 1,
           marginY: 1
         }}