From 2ac9665f11a0eb89cae513a75f12103621d02e4b Mon Sep 17 00:00:00 2001
From: Felicio Mununga <felicio@users.noreply.github.com>
Date: Tue, 26 Sep 2023 17:44:18 +0200
Subject: [PATCH] fix Step spacing (#485)

* fix Step spacing

* ch
---
 .changeset/curvy-toys-clean.md                | 5 +++++
 packages/components/src/step/step.stories.tsx | 6 +++---
 packages/components/src/step/step.tsx         | 8 +++++---
 3 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/curvy-toys-clean.md

diff --git a/.changeset/curvy-toys-clean.md b/.changeset/curvy-toys-clean.md
new file mode 100644
index 00000000..f15a8f09
--- /dev/null
+++ b/.changeset/curvy-toys-clean.md
@@ -0,0 +1,5 @@
+---
+'@status-im/components': patch
+---
+
+fix Step spacing
diff --git a/packages/components/src/step/step.stories.tsx b/packages/components/src/step/step.stories.tsx
index 63c8e429..1aa1f45b 100644
--- a/packages/components/src/step/step.stories.tsx
+++ b/packages/components/src/step/step.stories.tsx
@@ -56,17 +56,17 @@ export const AllVariants: Story = {
   args: {},
   render: () => (
     <Stack space flexDirection="row">
-      <Stack space>
+      <Stack space alignItems="center">
         <Step type="neutral" value={1} />
         <Step type="neutral" value={10} />
         <Step type="neutral" value={999} />
       </Stack>
-      <Stack space>
+      <Stack space alignItems="center">
         <Step type="complete" value={1} />
         <Step type="complete" value={10} />
         <Step type="complete" value={999} />
       </Stack>
-      <Stack space>
+      <Stack space alignItems="center">
         <Step type="active" value={1} />
         <Step type="active" value={10} />
         <Step type="active" value={999} />
diff --git a/packages/components/src/step/step.tsx b/packages/components/src/step/step.tsx
index c777a26c..54da3c8a 100644
--- a/packages/components/src/step/step.tsx
+++ b/packages/components/src/step/step.tsx
@@ -30,11 +30,14 @@ export { Step }
 export type { Props as StepProps }
 
 const Base = styled(Stack, {
-  padding: 2,
+  paddingVertical: 1,
+  minWidth: 20,
+  maxWidth: 28,
   display: 'inline-flex',
   justifyContent: 'center',
   alignItems: 'center',
   flexBasis: 'fit-content',
+  width: 'fit-content',
 })
 
 const Content = styled(Stack, {
@@ -42,8 +45,7 @@ const Content = styled(Stack, {
   paddingHorizontal: 3,
   paddingVertical: 0,
   borderRadius: '$6',
-  minHeight: 18,
-  maxHeight: 18,
+  height: 18,
   minWidth: 18,
   maxWidth: 28,
   justifyContent: 'center',