Merge pull request #596 from dragon-slayer875/master

Update Stepper and Modal button styles
layer5io · May 1, 2024 · a441fe1 · a441fe1
2 parents 0988d06 + 7525019
commit a441fe1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/src/custom/Modal/index.tsx b/src/custom/Modal/index.tsx
@@ -100,7 +100,7 @@ export const useModal = ({ headerIcon }: { headerIcon: React.ReactNode }): UseMo
 
 export const ModalBody = styled(Paper)(({ theme }) => ({
   padding: '1rem',
-  backgroundColor: theme.palette.background.default
+  backgroundColor: theme.palette.background.secondary
 }));
 
 const StyledFooter = styled('div', {
@@ -172,7 +172,11 @@ export const ModalFooter: React.FC<ModalFooterProps> = ({ helpText, children, va
 // ModalButtonPrimary
 export const ModalButtonPrimary: React.FC = styled(ContainedButton)(({ theme }) => ({
   backgroundColor: theme.palette.background.brand?.default,
-  color: theme.palette.text.constant?.white
+  color: theme.palette.text.constant?.white,
+  '&.MuiButton-contained.Mui-disabled': {
+    color: theme.palette.text.disabled,
+    backgroundColor: theme.palette.primary.disabled
+  }
 }));
 
 // ModalButtonSecondary
@@ -184,6 +188,11 @@ export const ModalButtonSecondary = styled(OutlinedButton)(({ theme }) => ({
       background: 'transparent',
       color: theme.palette.text.constant?.white
     }
+  },
+  '&.MuiButton-outlined.Mui-disabled': {
+    color: theme.palette.text.disabled,
+    border: 'none',
+    backgroundColor: theme.palette.secondary.disabled
   }
 }));
 

diff --git a/src/custom/Stepper/index.tsx b/src/custom/Stepper/index.tsx
@@ -39,26 +39,26 @@ interface UseStepperI {
   activeStepComponent: React.ComponentType;
 }
 
-const ColorlibConnector = styled(StepConnector)(() => ({
+const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
   [`&.${stepConnectorClasses.alternativeLabel}`]: {
     top: 22
   },
   [`&.${stepConnectorClasses.active}`]: {
     [`& .${stepConnectorClasses.line}`]: {
-      background: '#00B39F',
+      background: theme.palette.background.brand?.default,
       transition: 'all 1s ease-in'
     }
   },
   [`&.${stepConnectorClasses.completed}`]: {
     [`& .${stepConnectorClasses.line}`]: {
-      background: '#00B39F',
+      background: theme.palette.background.brand?.default,
       transition: 'all 1s ease-in'
     }
   },
   [`& .${stepConnectorClasses.line}`]: {
     height: 3,
     border: 0,
-    background: '#00B39F',
+    background: theme.palette.background.tertiary,
     borderRadius: 1,
     transition: 'all 0.5s ease-out '
   }
@@ -67,33 +67,35 @@ const ColorlibConnector = styled(StepConnector)(() => ({
 const ColorlibStepIconRoot = styled('div')<{
   ownerState: { completed?: boolean; active?: boolean };
 }>(({ theme, ownerState }) => ({
-  backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
+  background: theme.palette.background.tertiary,
   zIndex: 1,
-  color: '#fff',
   width: 50,
   height: 50,
   display: 'flex',
   borderRadius: '50%',
   justifyContent: 'center',
   alignItems: 'center',
   ...(ownerState.active && {
-    background: theme.palette.background.default,
-    color: '#3C494E',
-    border: '.2rem solid #00B39F',
+    border: `.2rem solid ${theme.palette.background.brand?.default}`,
     transition: 'all 0.5s ease-in'
   }),
   ...(ownerState.completed && {
-    border: '.2rem solid #00B39F',
-    background: '#00B39F',
+    background: theme.palette.background.secondary,
+    border: `.2rem solid ${theme.palette.background.brand?.default}`,
     transition: 'all 0.5s ease-in'
   })
 }));
 
 const StepContentWrapper = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.default,
   padding: theme.spacing(2)
 }));
 
+const StyledStepLabel = styled(StepLabel)(({ theme }) => ({
+  '& .MuiStepLabel-labelContainer': {
+    color: theme.palette.text.tertiary
+  }
+}));
+
 function ColorlibStepIcon(props: ColorlibStepIconPropsI) {
   const { active, completed, className, icons } = props;
 
@@ -117,11 +119,11 @@ const CustomizedStepper: React.FC<CustomizedStepperPropsI> = ({
         <Stepper alternativeLabel activeStep={activeStep} connector={<ColorlibConnector />}>
           {stepLabels.map((label) => (
             <Step key={label}>
-              <StepLabel
+              <StyledStepLabel
                 StepIconComponent={(props) => <ColorlibStepIcon {...props} icons={icons} />}
               >
                 {label}
-              </StepLabel>
+              </StyledStepLabel>
             </Step>
           ))}
         </Stepper>