Stepper redesign

grai-io · Nov 2, 2023 · b9d16e0 · b9d16e0
1 parent 55f2a60
commit b9d16e0
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 93 deletions.
diff --git a/grai-frontend/src/components/wizards/WizardAppBar.tsx b/grai-frontend/src/components/wizards/WizardAppBar.tsx
@@ -1,31 +1,20 @@
 import React from "react"
-import { Box, Divider, Toolbar, Typography } from "@mui/material"
+import { Box, Divider } from "@mui/material"
 import { WizardSteps } from "./WizardLayout"
 import WizardStepper from "./WizardStepper"
 
 type WizardAppBarProps = {
-  title?: string
   steps: WizardSteps
   activeStep: number
 }
 
-const WizardAppBar: React.FC<WizardAppBarProps> = ({
-  title,
-  steps,
-  activeStep,
-}) => (
-  <Box>
-    <Toolbar>
-      <Typography variant="h6" component="div" sx={{ flex: 1 }}>
-        {title}
-      </Typography>
-
-      <WizardStepper steps={steps} activeStep={activeStep} sx={{ flex: 2 }} />
-
-      <Box sx={{ flex: 1 }} />
-    </Toolbar>
+const WizardAppBar: React.FC<WizardAppBarProps> = ({ steps, activeStep }) => (
+  <>
+    <Box sx={{ p: "24px", display: "flex", justifyContent: "center" }}>
+      <WizardStepper steps={steps} activeStep={activeStep} />
+    </Box>
     <Divider />
-  </Box>
+  </>
 )
 
 export default WizardAppBar
diff --git a/grai-frontend/src/components/wizards/WizardBottomBar.tsx b/grai-frontend/src/components/wizards/WizardBottomBar.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react"
 import { ArrowBack } from "@mui/icons-material"
-import { Toolbar, Container, Box, Button } from "@mui/material"
+import { Box, Button } from "@mui/material"
 import { ElementOptions } from "./WizardLayout"
 
 type WizardBottomBarProps = {

diff --git a/grai-frontend/src/components/wizards/WizardLayout.tsx b/grai-frontend/src/components/wizards/WizardLayout.tsx
@@ -17,16 +17,11 @@ export type WizardStep = {
 export type WizardSteps = WizardStep[]
 
 type WizardLayoutProps = {
-  title?: string
   steps: WizardSteps
   className?: string
 }
 
-const WizardLayout: React.FC<WizardLayoutProps> = ({
-  title,
-  steps,
-  className,
-}) => {
+const WizardLayout: React.FC<WizardLayoutProps> = ({ steps, className }) => {
   const [activeStep, setActiveStep] = useState(0)
 
   const forwardStep = () => setActiveStep(activeStep + 1)
@@ -46,7 +41,7 @@ const WizardLayout: React.FC<WizardLayoutProps> = ({
 
   return (
     <Box className={className}>
-      <WizardAppBar title={title} steps={steps} activeStep={activeStep} />
+      <WizardAppBar steps={steps} activeStep={activeStep} />
       <Toolbar />
       <Box sx={{ px: 5 }}>{stepElement}</Box>
     </Box>

diff --git a/grai-frontend/src/components/wizards/WizardStepper.tsx b/grai-frontend/src/components/wizards/WizardStepper.tsx
@@ -1,81 +1,35 @@
 import React from "react"
-import { CheckCircle } from "@mui/icons-material"
+import { CheckCircle, ChevronRight } from "@mui/icons-material"
 import {
   Stepper,
   Step,
   StepLabel,
-  StepConnector,
-  stepConnectorClasses,
   StepIconProps,
-  styled,
   SxProps,
   Theme,
+  Box,
 } from "@mui/material"
 import { WizardSteps } from "./WizardLayout"
 
-const QontoConnector = styled(StepConnector)(({ theme }) => ({
-  [`&.${stepConnectorClasses.alternativeLabel}`]: {
-    top: 10,
-    left: "calc(-50% + 16px)",
-    right: "calc(50% + 16px)",
-  },
-  [`&.${stepConnectorClasses.active}`]: {
-    [`& .${stepConnectorClasses.line}`]: {
-      borderColor: theme.palette.secondary.main,
-    },
-  },
-  [`&.${stepConnectorClasses.completed}`]: {
-    [`& .${stepConnectorClasses.line}`]: {
-      borderColor: theme.palette.secondary.main,
-    },
-  },
-  [`& .${stepConnectorClasses.line}`]: {
-    borderColor:
-      theme.palette.mode === "dark" ? theme.palette.grey[800] : "#eaeaf0",
-    borderTopWidth: 1,
-    borderRadius: 1,
-    marginLeft: 10,
-    marginRight: 10,
-  },
-}))
+function StepIcon(props: StepIconProps) {
+  const { active, completed } = props
 
-const QontoStepIconRoot = styled("div")<{ ownerState: { active?: boolean } }>(
-  ({ theme, ownerState }) => ({
-    color: theme.palette.mode === "dark" ? theme.palette.grey[700] : "#eaeaf0",
-    display: "flex",
-    height: 22,
-    alignItems: "center",
-    ...(ownerState.active && {
-      color: theme.palette.secondary.main,
-    }),
-    "& .QontoStepIcon-completedIcon": {
-      color: theme.palette.secondary.main,
-      zIndex: 1,
-      fontSize: 18,
-    },
-    "& .QontoStepIcon-circle": {
-      width: 14,
-      height: 14,
-      borderRadius: "50%",
-      backgroundColor: ownerState.active ? "currentColor" : "white",
-      borderColor: theme.palette.secondary.main,
-      borderWidth: 1,
-      borderStyle: "solid",
-    },
-  })
-)
+  if (completed) return <CheckCircle sx={{ color: "#8338EC" }} />
 
-function QontoStepIcon(props: StepIconProps) {
-  const { active, completed, className } = props
+  const borderColor = active ? "#8338EC" : "#EBEBEB"
 
   return (
-    <QontoStepIconRoot ownerState={{ active }} className={className}>
-      {completed ? (
-        <CheckCircle className="QontoStepIcon-completedIcon" />
-      ) : (
-        <div className="QontoStepIcon-circle" />
-      )}
-    </QontoStepIconRoot>
+    <Box
+      sx={{
+        width: "20px",
+        height: "20px",
+        borderRadius: "24px",
+        borderColor,
+        borderWidth: 2,
+        borderStyle: "solid",
+        m: "2px",
+      }}
+    />
   )
 }
 
@@ -93,10 +47,34 @@ const WizardStepper: React.FC<WizardStepperProps> = ({
   const stepTitles = steps.map(step => step.title)
 
   return (
-    <Stepper activeStep={activeStep} connector={<QontoConnector />} sx={sx}>
-      {stepTitles.map(step => (
-        <Step key={step}>
-          <StepLabel StepIconComponent={QontoStepIcon}>{step}</StepLabel>
+    <Stepper
+      activeStep={activeStep}
+      connector={<ChevronRight sx={{ color: "#A7ABB3" }} />}
+      sx={{
+        ...sx,
+        // "& .MuiStep-root": {
+        //   border: "1px solid #EBEBEB",
+        // },
+        // "& .MuiStep-root.Mui-active": {
+        //   border: "1px solid #8338EC",
+        // },
+        // "& .MuiStep-root.Mui-completed": {
+        //   border: "1px solid #8338EC",
+        // },
+      }}
+    >
+      {stepTitles.map((step, index) => (
+        <Step
+          key={step}
+          sx={{
+            borderRadius: "73px",
+            border:
+              activeStep >= index ? "1px solid #8338EC" : "1px solid #EBEBEB",
+            p: "8px",
+            pr: "16px",
+          }}
+        >
+          <StepLabel StepIconComponent={StepIcon}>{step}</StepLabel>
         </Step>
       ))}
     </Stepper>