Merge pull request #637 from aabidsofi19/stepper

feat: enhance stepper
layer5io · Jun 4, 2024 · 63e0b80 · 63e0b80
2 parents b87651b + 22cb308
commit 63e0b80
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 32 deletions.
diff --git a/src/custom/Stepper/index.tsx b/src/custom/Stepper/index.tsx
@@ -1,8 +1,9 @@
-import { Box, IconProps, Stack, Step, StepConnector, StepLabel, Stepper } from '@mui/material';
+import { Box, Stack, Step, StepConnector, StepLabel, Stepper, useTheme } from '@mui/material';
 import { stepConnectorClasses } from '@mui/material/StepConnector';
 import { StepIconProps } from '@mui/material/StepIcon';
 import { styled } from '@mui/system';
 import React, { useMemo, useState } from 'react';
+import { IconProps } from '../../icons/types';
 
 interface ColorlibStepIconPropsI extends StepIconProps {
   icons: React.ComponentType<IconProps>[];
@@ -23,6 +24,7 @@ interface CustomizedStepperPropsI {
   stepLabels: string[];
   children: React.ReactNode;
   icons: React.ComponentType<IconProps>[];
+  ContentWrapper?: React.ComponentType;
 }
 
 interface UseStepperI {
@@ -100,9 +102,10 @@ function ColorlibStepIcon(props: ColorlibStepIconPropsI) {
   const { active, completed, className, icons } = props;
 
   const Icon = icons[Number(props.icon) - 1];
+  const theme = useTheme();
   return (
     <ColorlibStepIconRoot ownerState={{ completed, active }} className={className}>
-      {Icon ? <Icon /> : null}
+      {Icon ? <Icon fill={theme.palette.icon.secondary} /> : null}
     </ColorlibStepIconRoot>
   );
 }
@@ -111,11 +114,18 @@ const CustomizedStepper: React.FC<CustomizedStepperPropsI> = ({
   stepLabels,
   activeStep,
   children,
-  icons
+  icons,
+  ContentWrapper = StepContentWrapper
 }) => {
+  const theme = useTheme();
+
   return (
-    <Stack spacing={2}>
-      <Stack direction="row" justifyContent="center">
+    <Stack>
+      <Stack
+        direction="row"
+        justifyContent="center"
+        style={{ paddingBlock: '1rem', backgroundColor: theme.palette.background.blur?.heavy }}
+      >
         <Stepper alternativeLabel activeStep={activeStep} connector={<ColorlibConnector />}>
           {stepLabels.map((label) => (
             <Step key={label}>
@@ -128,7 +138,7 @@ const CustomizedStepper: React.FC<CustomizedStepperPropsI> = ({
           ))}
         </Stepper>
       </Stack>
-      <StepContentWrapper>{children}</StepContentWrapper>
+      <ContentWrapper>{children}</ContentWrapper>
     </Stack>
   );
 };

diff --git a/src/icons/Add/AddIcon.tsx b/src/icons/Add/AddIcon.tsx
@@ -16,8 +16,7 @@ export const AddIcon = ({
       data-testid="add-icon-svg"
       {...props}
     >
-      <path d="M0 0h24v24H0z" fill={fill} />
-      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill={fill} />
     </svg>
   );
 };

diff --git a/src/theme/index.tsx b/src/theme/index.tsx
@@ -1,3 +1,5 @@
+import { styled, useTheme } from '@mui/material';
+
 export { darkModePalette, lightModePalette } from './palette';
 export { typography } from './typography';
 
@@ -6,3 +8,5 @@ export {
   SistentThemeProviderWithoutBaseLine
 } from './ThemeProvider';
 export * from './colors';
+
+export { styled, useTheme };
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -16,27 +16,3 @@ export const createCustomTheme = (mode: PaletteMode) => {
     breakpoints: {}
   });
 };
-
-/*
-  const commonPalette = {
-    palette: {
-      paletteType,
-      ...(paletteType === 'light' ? lightModePalette : darkModePalette)
-    }
-  };
-
-
-  const palette =
-    paletteType === 'dark'
-      ? {
-          mode: 'dark',
-          ...commonPalette,
-          text: {
-            main: '#FFFFFF'
-          }
-        }
-      : {
-          mode: 'light',
-          ...commonPalette
-        };
-        */