From 54078682a4ab8a1802022464985e49084c9a30d3 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Wed, 13 Dec 2023 12:10:40 +0100
Subject: [PATCH 1/3] stepper: fix the height

---
 src/lib/components/steppers/Stepper.component.tsx  | 3 +--
 src/lib/components/steppers/Steppers.component.tsx | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/steppers/Stepper.component.tsx b/src/lib/components/steppers/Stepper.component.tsx
index bfa18c415e..df3610bfa7 100644
--- 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} padding={16} 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
index a537e688d7..a1914528f7 100644
--- a/src/lib/components/steppers/Steppers.component.tsx
+++ b/src/lib/components/steppers/Steppers.component.tsx
@@ -23,6 +23,7 @@ const SteppersContainer = styled.div``;
 const StepContainer = styled.div`
   display: flex;
   min-height: 50px;
+  min-width: 20rem;
 `;
 const Panel = styled.div`
   display: flex;

From 973fcd702143bbbf1688c0d5c9021344f85f4453 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20Dombya?=
 <135591453+hervedombya@users.noreply.github.com>
Date: Wed, 13 Dec 2023 10:18:40 +0100
Subject: [PATCH 2/3] Minor fixes on Steppers component styles

---
 src/lib/components/steppers/Steppers.component.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/steppers/Steppers.component.tsx b/src/lib/components/steppers/Steppers.component.tsx
index a1914528f7..11ec6760d6 100644
--- a/src/lib/components/steppers/Steppers.component.tsx
+++ b/src/lib/components/steppers/Steppers.component.tsx
@@ -60,7 +60,7 @@ const Circle = styled.div`
       `;
     } else {
       return css`
-        background-color: ${defaultTheme.gray};
+        background-color: ${getThemePropSelector('buttonSecondary')};
         color: ${defaultTheme.white};
       `;
     }
@@ -68,7 +68,10 @@ const Circle = styled.div`
 `;
 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};
@@ -77,7 +80,7 @@ const BottomBar = styled.hr`
   flex-grow: 1;
   margin: 0;
   border: none;
-  margin: 2px 14px;
+  margin: 4px 14px;
 
   ${(props) => {
     if (props.completed) {
@@ -104,6 +107,7 @@ function Step(props: StepProps) {
     inProgress,
   } = props;
   const circleContent = completed ? <Icon name="Check" /> : index + 1;
+
   return (
     <StepContainer>
       <Panel>
@@ -117,7 +121,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>

From 887f6888103638df86894d32894f306b0b115c67 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Wed, 13 Dec 2023 18:43:43 +0100
Subject: [PATCH 3/3] Add padding

---
 src/lib/components/steppers/Stepper.component.tsx  | 2 +-
 src/lib/components/steppers/Steppers.component.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/steppers/Stepper.component.tsx b/src/lib/components/steppers/Stepper.component.tsx
index df3610bfa7..32b0d84bf4 100644
--- a/src/lib/components/steppers/Stepper.component.tsx
+++ b/src/lib/components/steppers/Stepper.component.tsx
@@ -46,7 +46,7 @@ export const Stepper: Stepper = ({ steps }) => {
 
   return (
     <StepperContext.Provider value={{ next, prev }}>
-      <Box display="flex" gap={32} padding={16} flex={1} height="100%">
+      <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
index 11ec6760d6..e4d4613cca 100644
--- a/src/lib/components/steppers/Steppers.component.tsx
+++ b/src/lib/components/steppers/Steppers.component.tsx
@@ -19,7 +19,10 @@ 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;