From 92217ce259b70524d9fcb8fa9a01f7dc507d23f8 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Tue, 9 Apr 2024 16:09:41 +0200
Subject: [PATCH] remove padding from SteapHeader and use lineheight instead to
 vertical align text and icon in Circle remove padding right from StepContent
 to keep Button align with StepHeader

---
 .../components/steppers/Steppers.component.tsx   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/steppers/Steppers.component.tsx b/src/lib/components/steppers/Steppers.component.tsx
index 270aec0fa6..87aa344a35 100644
--- a/src/lib/components/steppers/Steppers.component.tsx
+++ b/src/lib/components/steppers/Steppers.component.tsx
@@ -39,6 +39,7 @@ const Circle = styled.div<{
   display: flex;
   justify-content: center;
   align-items: center;
+  line-height: 30px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
@@ -74,14 +75,15 @@ const Circle = styled.div<{
   }};
 `;
 const StepHeader = styled.span<{ active?: boolean }>`
-  padding: 8px;
+  margin-left: ${spacing.r8};
+  line-height: 30px;
   color: ${(props) =>
     props.active
       ? getThemePropSelector('textPrimary')
       : getThemePropSelector('textSecondary')};
 `;
 const StepContent = styled.div`
-  padding: ${spacing.r8};
+  padding: ${spacing.r8} 0 ${spacing.r8} ${spacing.r8};
 `;
 const BottomBar = styled.hr<{ completed?: boolean }>`
   flex-grow: 1;
@@ -128,7 +130,15 @@ function Step(props: StepProps) {
         {!isLast && <BottomBar completed={completed} />}
       </Panel>
       <Panel>
-        <StepHeader active={active}>{title}</StepHeader>
+        <div
+          style={{
+            height: '30px',
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <StepHeader active={active}>{title}</StepHeader>
+        </div>
         {active && <StepContent>{content}</StepContent>}
       </Panel>
     </StepContainer>