fix(components): update styles for inactive fields

sws2apps · Dec 25, 2024 · c000673 · c000673
1 parent 0aa443f
commit c000673
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/src/components/autocomplete/index.tsx b/src/components/autocomplete/index.tsx
@@ -104,7 +104,11 @@ const Autocomplete = <T,>(props: AutocompletePropsType<T>) => {
       PaperComponent={(paperProps) => (
         <CustomPaper {...paperProps} optionsHeader={optionsHeader} />
       )}
-      ListboxComponent={CustomListBoxComponent}
+      slotProps={{
+        listbox: {
+          component: CustomListBoxComponent,
+        },
+      }}
       noOptionsText={
         <Box sx={{ backgroundColor: 'var(--white)' }}>
           <Typography className="body-regular">{t('tr_noOptions')}</Typography>
@@ -119,8 +123,7 @@ const Autocomplete = <T,>(props: AutocompletePropsType<T>) => {
         <TextField
           {...params}
           variant={variant || 'outlined'}
-          label={props.value ? label : ''}
-          placeholder={props.value ? '' : label}
+          label={label}
           slotProps={{ input: params.InputProps }}
           startIcon={startIcon}
           endIcon={endIcon}

diff --git a/src/components/textfield/index.tsx b/src/components/textfield/index.tsx
@@ -25,6 +25,7 @@ const TextField = (props: TextFieldTypeProps) => {
     type = 'text',
     ...defaultProps
   } = props;
+
   const [showAccessCode, setShowAccessCode] = useState(false);
   const [inputType, setInputType] = useState<HTMLInputTypeAttribute>(type);
 
@@ -78,6 +79,7 @@ const TextField = (props: TextFieldTypeProps) => {
             props.value || props.inputProps?.value
               ? 'var(--black)'
               : 'var(--accent-400)',
+          cursor: props.disabled && 'not-allowed',
         },
         '.MuiInput-root:before': {
           borderBottom: '1px solid var(--accent-300) !important',
@@ -118,9 +120,17 @@ const TextField = (props: TextFieldTypeProps) => {
               border: '1px solid var(--red-main)',
             },
           },
+
+          '&.Mui-disabled fieldset': {
+            border: '1px solid var(--accent-200)',
+          },
         },
         '.MuiInputLabel-root': {
-          color: success ? 'var(--green-main)' : 'var(--accent-350)',
+          color: !props.disabled
+            ? success
+              ? 'var(--green-main)'
+              : 'var(--accent-350)'
+            : 'var(--accent-200)',
           '&.Mui-focused': {
             color: success ? 'var(--green-main)' : 'var(--accent-350)',
           },
@@ -143,9 +153,10 @@ const TextField = (props: TextFieldTypeProps) => {
         },
 
         '& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': {
-          color: endIcon?.props.color || 'var(--black)',
+          color: !props.disabled
+            ? endIcon?.props.color || 'var(--black)'
+            : 'var(--accent-200)',
         },
-
         ...props.sx,
       }}
       slotProps={{