Merge branch 'bugfix/fix-stepper-height' into q/1.0

scality · Dec 14, 2023 · 819abbd · 819abbd
2 parents 13228d9 + 887f688
commit 819abbd
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/src/lib/components/steppers/Stepper.component.tsx b/src/lib/components/steppers/Stepper.component.tsx
@@ -46,8 +46,7 @@ export const Stepper: Stepper = ({ steps }) => {
 
   return (
     <StepperContext.Provider value={{ next, prev }}>
-      <Box display={'flex'} gap={32} padding={32} flex={1}>
-
+      <Box display="flex" gap={32} flex={1} height="100%">
         <Steppers
           activeStep={stepProps.step}
           steps={steps.map((step) => {

diff --git a/src/lib/components/steppers/Steppers.component.tsx b/src/lib/components/steppers/Steppers.component.tsx
@@ -19,10 +19,14 @@ type Props = {
   steps: Array<StepProps>;
   activeStep: number;
 };
-const SteppersContainer = styled.div``;
+const SteppersContainer = styled.div`
+  padding-top: 4rem;
+  padding-left: 2rem;
+`;
 const StepContainer = styled.div`
   display: flex;
   min-height: 50px;
+  min-width: 20rem;
 `;
 const Panel = styled.div`
   display: flex;
@@ -59,15 +63,18 @@ const Circle = styled.div`
       `;
     } else {
       return css`
-        background-color: ${defaultTheme.gray};
+        background-color: ${getThemePropSelector('buttonSecondary')};
         color: ${defaultTheme.white};
       `;
     }
   }};
 `;
 const StepHeader = styled.span`
   padding: 8px;
-  color: ${getThemePropSelector('textPrimary')};
+  color: ${(props) =>
+    props.active
+      ? getThemePropSelector('textPrimary')
+      : getThemePropSelector('textSecondary')};
 `;
 const StepContent = styled.div`
   padding: ${defaultTheme.padding.small};
@@ -76,7 +83,7 @@ const BottomBar = styled.hr`
   flex-grow: 1;
   margin: 0;
   border: none;
-  margin: 2px 14px;
+  margin: 4px 14px;
 
   ${(props) => {
     if (props.completed) {
@@ -103,6 +110,7 @@ function Step(props: StepProps) {
     inProgress,
   } = props;
   const circleContent = completed ? <Icon name="Check" /> : index + 1;
+
   return (
     <StepContainer>
       <Panel>
@@ -116,7 +124,9 @@ function Step(props: StepProps) {
         {!isLast && <BottomBar completed={completed} />}
       </Panel>
       <Panel>
-        <StepHeader completed={completed}>{title}</StepHeader>
+        <StepHeader completed={completed} active={active}>
+          {title}
+        </StepHeader>
         {active && <StepContent>{content}</StepContent>}
       </Panel>
     </StepContainer>