chore: Change color of radio buttons if disabled

src/components/common/form/RadioButton.tsx

@@ -70,20 +70,29 @@ type RadioButtonProps = {
   error?: boolean
 }
 
-function RadioButton({ checked, label, muiRadioButtonProps, value, error }: RadioButtonProps) {
+function RadioButton({
+  checked,
+  label,
+  muiRadioButtonProps,
+  value,
+  disabled,
+  error,
+}: RadioButtonProps) {
   return (
     <StyledRadioButton error={error}>
       <FormControlLabel
         value={value}
-        className={`${classes.radioWrapper} ${checked ? classes.checked : null}`}
-        sx={checked ? {} : undefined}
+        disabled={disabled}
+        sx={disabled ? { backgroundColor: '#e0e0e0', opacity: 0.7 } : {}}
+        className={`${classes.radioWrapper} ${checked && !disabled ? classes.checked : null}`}
         label={
           <Typography className={classes.label} sx={{ wordBreak: 'break-word' }}>
             {label}
           </Typography>
         }
         control={
           <Radio
+            disabled={disabled}
             icon={<div className={`${classes.circle}`} />}
             checkedIcon={
               <Check color="primary" className={checked ? classes.checkIcon : undefined} />