From f1f0c571b9897fa7ac0d140016f24a018e7b9291 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 08:46:03 +0200
Subject: [PATCH 001/131] fixed formStepper size

---
 src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 3911c5c4..45d569a1 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -36,9 +36,10 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
       style={{
         fontSize: '14px',
         zIndex: 1,
-        width: '100%',
+        width: '1200px',
         padding: 0,
         marginBottom: '3rem',
+        overflow: 'hidden',
       }}
     >
       {steps.map((step, index) => (

From 067aefffde3e671a557e19ccdf65453d262bd875 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 09:34:22 +0200
Subject: [PATCH 002/131] Create OverviewWrapper.tsx

---
 .../Overview/OverviewWrapper.tsx              | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx

diff --git a/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx b/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx
new file mode 100644
index 00000000..03add1e6
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx
@@ -0,0 +1,41 @@
+import { ReactNode } from 'react'
+import { useTheme } from 'tamagui'
+
+import './validatorLayout.css'
+
+type OverviewWrapperProps = {
+  rightImageSrc?: string
+  children: ReactNode
+  imgHeight?: string
+}
+
+const OverviewWrapper = ({
+  rightImageSrc,
+
+  children,
+  imgHeight,
+}: OverviewWrapperProps) => {
+  const theme = useTheme()
+
+  return (
+    <div className="layout" style={{ backgroundColor: theme.background.val }}>
+      <section className="layout-left">
+        <div className="container">
+          <div className="container-inner">{children}</div>
+        </div>
+      </section>
+      <section className="layout-right">
+        <div className="image-container">
+          <img
+            src={rightImageSrc}
+            alt="background"
+            className="background-img"
+            style={{ height: imgHeight }}
+          />
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default OverviewWrapper

From 47f9f5e5874a8f04ace1244dc88018414f889aef Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 09:34:37 +0200
Subject: [PATCH 003/131] Update ValidatorBoxWrapper.tsx

---
 .../ValidatorBoxWrapper/ValidatorBoxWrapper.tsx                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx
index c52289c2..a1423101 100644
--- a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx
@@ -1,6 +1,6 @@
 import { Shadow } from '@status-im/components'
 import { ReactNode } from 'react'
-
+ 
 type ValidatorBoxWrapperProps = {
   children: ReactNode
 }

From 63c4ba12e0b828897adbe31909bded275337339b Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 09:34:45 +0200
Subject: [PATCH 004/131] Create validatorLayout.css

---
 .../Overview/validatorLayout.css              | 142 ++++++++++++++++++
 1 file changed, 142 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/Overview/validatorLayout.css

diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
new file mode 100644
index 00000000..4a5d91e0
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
@@ -0,0 +1,142 @@
+.layout {
+  background-color: #fff;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+.layout::after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
+}
+.layout-left {
+  flex: 0 0 55%;
+  max-width: 55%;
+  z-index: 2;
+}
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: end;
+  height: 100%;
+}
+.container-inner {
+  max-width: 70%;
+  flex: 1 0 70%;
+  display: flex;
+  flex-direction: column;
+}
+.content {
+  flex-grow: 1;
+}
+
+/* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
+.layout-right {
+  flex: 0 0 45%;
+  max-width: 45%;
+  z-index: 0;
+}
+
+.image-container {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  color: #fff;
+}
+.image-container::before {
+  display: block;
+  content: '';
+  padding-bottom: 100%;
+}
+.image-container::after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -1%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0));
+}
+.image-container .background-img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 140%;
+  width: auto;
+}
+.image-container .nimbus-logomark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.image-container .nimbus-logomark svg {
+  height: 73px;
+}
+
+@media (max-width: 1000px) {
+  .layout {
+    height: auto;
+  }
+
+  .layout-left {
+    flex: 0 0 100%;
+    max-width: 80%;
+    order: 1;
+  }
+
+  .container {
+    justify-content: start;
+    padding: 20px;
+  }
+
+   
+
+  .layout-right {
+    flex: 0 0 100%;
+    max-width: 100%;
+    order: 0;
+    margin-top: -5%;
+    margin-bottom: -72%;
+  }
+
+  .image-container {
+    margin: 0;
+    height: auto;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .image-container .nimbus-logomark {
+    display: none;
+  }
+
+  .content,
+  .breadcrumbBar,
+  .other-elements {
+    margin: 0;
+    padding: 0;
+  }
+
+  .breadcrumbBar,
+  .some-other-element {
+    margin: 0;
+    padding: 0;
+  }
+
+  .image-container::after {
+    width: 100%;
+    right: 0;
+    left: 0;
+    background: linear-gradient(to top, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0));
+  }
+}

From 9853b7b218901a2345946ad1c5d4ee8a9501e402 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 09:34:48 +0200
Subject: [PATCH 005/131] Update Overview.tsx

---
 .../ValidatorOnboarding/Overview/Overview.tsx | 76 +++++++++----------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 898fd087..d9e432cd 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -3,49 +3,49 @@ import { Text } from '@status-im/components'
 
 import OverviewCard from './OverviewCard'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
+import OverviewWrapper from './OverviewWrapper'
 
 const Overview = () => {
   return (
     <>
-      <YStack
-        className="layout-left"
-        space={'$5'}
-        style={{ padding: '26px 0 32px 32px' }}
-        minHeight={'65vh'}
-        justifyContent={'space-between'}
+      <OverviewWrapper
+        imgHeight="250%"
+        rightImageSrc="./background-images/sync-status-background.png"
       >
-        <YStack space={'$5'}>
-          <Text size={27} weight={'semibold'}>
-            Overview
-          </Text>
-          <Text size={19}>
-            Becoming a validator is a big responsibility with important preparation steps. Only
-            start the deposit process when you're ready.
-          </Text>
-          <Text size={15} color="#939BA1">
-            By running a validator, you'll be responsible for securing the network and receive
-            continuous payouts for actions that help the network reach consensus.
-          </Text>
-          <Text size={15} color="#939BA1">
-            Since the successful transition to proof-of-stake via The Merge, Ethereum is fully
-            secured by proof-of-stake validators. By running a validator, you'll be helping to
-            secure the Ethereum network.
-          </Text>
-          <LinkWithArrow
-            text="Learn More"
-            to={'/'}
-            arrowRight={true}
-            style={{ marginBottom: '1%', fontSize: '13px' }}
-          />
+        <YStack>
+          <YStack space={'$5'}>
+            <Text size={27} weight={'semibold'}>
+              Overview
+            </Text>
+            <Text size={19}>
+              Becoming a validator is a big responsibility with important preparation steps. Only
+              start the deposit process when you're ready.
+            </Text>
+            <Text size={15} color="#939BA1">
+              By running a validator, you'll be responsible for securing the network and receive
+              continuous payouts for actions that help the network reach consensus.
+            </Text>
+            <Text size={15} color="#939BA1">
+              Since the successful transition to proof-of-stake via The Merge, Ethereum is fully
+              secured by proof-of-stake validators. By running a validator, you'll be helping to
+              secure the Ethereum network.
+            </Text>
+            <LinkWithArrow
+              text="Learn More"
+              to={'/'}
+              arrowRight={true}
+              style={{ marginBottom: '1%', fontSize: '13px' }}
+            />
+          </YStack>
+          <XStack space={'$3'}>
+            <OverviewCard text={'Current APR'} value={'4.40%'} />
+            <OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
+            <OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />
+            <OverviewCard text={'Validator Queue'} value={'92603'} />
+          </XStack>
         </YStack>
-        <XStack space={'$3'}>
-          <OverviewCard text={'Current APR'} value={'4.40%'} />
-          <OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
-          <OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />
-          <OverviewCard text={'Validator Queue'} value={'92603'} />
-        </XStack>
-      </YStack>
-      <section className="layout-right">
+      </OverviewWrapper>
+      {/* <section className="layout-right">
         <div className="image-container">
           <img
             src="./background-images/sync-status-background.png"
@@ -53,7 +53,7 @@ const Overview = () => {
             className="background-img"
           />
         </div>
-      </section>
+      </section> */}
     </>
   )
 }

From 1ea5286b01d41d654056627eb80fd2028c785337 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 09:49:52 +0200
Subject: [PATCH 006/131] Update OverviewCard.tsx

---
 .../ValidatorOnboarding/Overview/OverviewCard.tsx    | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx b/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx
index 4fee7b96..7e0957fb 100644
--- a/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx
@@ -5,18 +5,10 @@ type OverviewCardProps = {
   text: string
   value: string
 }
-
+import './overviewLayout.css'
 const OverviewCard = ({ text, value }: OverviewCardProps) => {
   return (
-    <YStack
-      style={{
-        borderRadius: '16px',
-        border: '1px solid rgba(0, 0, 0, 0.15)',
-        width: '44%',
-        padding: '12px 16px',
-        backgroundColor: '#FFF',
-      }}
-    >
+    <YStack className="overview-card">
       <Text size={15} weight={'semibold'}>
         {text}
       </Text>

From fddf2ecdce585f5afd2cc49755d58be491fdfab6 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 09:49:54 +0200
Subject: [PATCH 007/131] Update Overview.tsx

---
 src/pages/ValidatorOnboarding/Overview/Overview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index d9e432cd..f96caa19 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -4,7 +4,7 @@ import { Text } from '@status-im/components'
 import OverviewCard from './OverviewCard'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
 import OverviewWrapper from './OverviewWrapper'
-
+import './overviewLayout.css'
 const Overview = () => {
   return (
     <>
@@ -37,7 +37,7 @@ const Overview = () => {
               style={{ marginBottom: '1%', fontSize: '13px' }}
             />
           </YStack>
-          <XStack space={'$3'}>
+          <XStack space={'$3'}  className='overview-cards'>
             <OverviewCard text={'Current APR'} value={'4.40%'} />
             <OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
             <OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />

From 8ddc1822f0895f26967588545a2e2817a4655885 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 09:49:57 +0200
Subject: [PATCH 008/131] Create overviewLayout.css

---
 .../Overview/overviewLayout.css               | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/Overview/overviewLayout.css

diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
new file mode 100644
index 00000000..a44886bc
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
@@ -0,0 +1,28 @@
+.overview-cards {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+.overview-card {
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  width: 44%;
+  padding: 12px 16px;
+  background-color: #FFF;
+  min-width: 150px;
+}
+
+/* Media query for smaller screens */
+@media screen and (max-width: 1000px) {
+  /* Adjust 600px based on your requirements */
+  .overview-cards {
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .overview-card {
+    width: 150%;
+    margin-bottom: 16px;
+  }
+}

From 8a2c95b91817442ec3afb9004713f4e18d139748 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 09:49:59 +0200
Subject: [PATCH 009/131] Update validatorLayout.css

---
 src/pages/ValidatorOnboarding/Overview/validatorLayout.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
index 4a5d91e0..949f8ed1 100644
--- a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
@@ -1,6 +1,6 @@
 .layout {
   background-color: #fff;
-  height: 100%;
+  
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -13,7 +13,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
+ 
   background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
 }
 .layout-left {
@@ -25,7 +25,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: end;
-  height: 100%;
+  
 }
 .container-inner {
   max-width: 70%;

From 63fcd0d5cecd24536c44ce71ba4b55291d51c154 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 09:55:23 +0200
Subject: [PATCH 010/131] Update overviewLayout.css

---
 src/pages/ValidatorOnboarding/Overview/overviewLayout.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
index a44886bc..3e445853 100644
--- a/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
@@ -22,7 +22,7 @@
     flex-wrap: wrap;
   }
   .overview-card {
-    width: 150%;
+    width: 160%;
     margin-bottom: 16px;
   }
 }

From cc1fdfe62d921425f2cfa917e4c7cb5868f4eff8 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 10:10:06 +0200
Subject: [PATCH 011/131] fix style of image

---
 src/pages/ValidatorOnboarding/Overview/overviewLayout.css  | 6 +++---
 src/pages/ValidatorOnboarding/Overview/validatorLayout.css | 7 +++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
index 3e445853..d350993e 100644
--- a/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
@@ -9,13 +9,13 @@
   border: 1px solid rgba(0, 0, 0, 0.15);
   width: 44%;
   padding: 12px 16px;
-  background-color: #FFF;
+  background-color: #fff;
   min-width: 150px;
 }
 
-/* Media query for smaller screens */
+ 
+
 @media screen and (max-width: 1000px) {
-  /* Adjust 600px based on your requirements */
   .overview-cards {
     flex-direction: column;
     align-items: center;
diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
index 949f8ed1..eb91bcc6 100644
--- a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
@@ -13,8 +13,7 @@
   top: 0;
   left: 0;
   width: 100%;
- 
-  background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
+  background: linear-gradient(to left, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
 }
 .layout-left {
   flex: 0 0 55%;
@@ -63,7 +62,7 @@
   left: -1%;
   width: 50%;
   height: 100%;
-  background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0));
+  background: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0));
 }
 .image-container .background-img {
   position: absolute;
@@ -137,6 +136,6 @@
     width: 100%;
     right: 0;
     left: 0;
-    background: linear-gradient(to top, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0));
+    background: linear-gradient(to top, rgba(255, 255, 255, 1) 78%, rgba(255, 255, 255, 0));
   }
 }

From 6fc6d4e4424bc4fcdda36f835edbb07126528879 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 10:13:39 +0200
Subject: [PATCH 012/131] Update validatorLayout.css

---
 src/pages/ValidatorOnboarding/Overview/validatorLayout.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
index eb91bcc6..ce4a5145 100644
--- a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
@@ -1,6 +1,6 @@
 .layout {
   background-color: #fff;
-  
+
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -24,7 +24,6 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: end;
-  
 }
 .container-inner {
   max-width: 70%;
@@ -98,8 +97,6 @@
     padding: 20px;
   }
 
-   
-
   .layout-right {
     flex: 0 0 100%;
     max-width: 100%;

From 423e0b73eba6f0b1d4cad66ec995ddeca4bb71af Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 14:34:44 +0200
Subject: [PATCH 013/131] fix start of content

---
 src/pages/ValidatorOnboarding/Advisories/Advisories.tsx    | 1 +
 src/pages/ValidatorOnboarding/Overview/validatorLayout.css | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
index 5f172a7f..8226c601 100644
--- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
+++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
@@ -73,6 +73,7 @@ const Advisories = () => {
           </XStack>
         ))}
       </YStack>
+
       <AdvisoriesContent title={selectedTitle} content={advisoryTopics[selectedTitle]} />
     </XStack>
   )
diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
index ce4a5145..6171dc8f 100644
--- a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
@@ -23,7 +23,8 @@
 .container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: end;
+  justify-content: start;
+  margin-left: 50px;
 }
 .container-inner {
   max-width: 70%;

From c1a42250cbaafff783ce88b1b629f5ab92adedad Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 14:40:02 +0200
Subject: [PATCH 014/131] remove unused css

---
 src/pages/ValidatorOnboarding/Overview/Overview.tsx        | 6 +++---
 src/pages/ValidatorOnboarding/Overview/validatorLayout.css | 7 +------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index f96caa19..cf5f34db 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -12,8 +12,8 @@ const Overview = () => {
         imgHeight="250%"
         rightImageSrc="./background-images/sync-status-background.png"
       >
-        <YStack>
-          <YStack space={'$5'}>
+        <YStack >
+          <YStack space={'$5'} width="150%">
             <Text size={27} weight={'semibold'}>
               Overview
             </Text>
@@ -37,7 +37,7 @@ const Overview = () => {
               style={{ marginBottom: '1%', fontSize: '13px' }}
             />
           </YStack>
-          <XStack space={'$3'}  className='overview-cards'>
+          <XStack space={'$3'} className="overview-cards">
             <OverviewCard text={'Current APR'} value={'4.40%'} />
             <OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
             <OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />
diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
index 6171dc8f..3acf6a85 100644
--- a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
@@ -1,10 +1,5 @@
 .layout {
-  background-color: #fff;
-
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  overflow: hidden;
+     
 }
 .layout::after {
   display: block;

From 47ae03c9cb0fd6ea11411acbeeb58b39ff265f9f Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 14:51:40 +0200
Subject: [PATCH 015/131] update advisories

---
 .../ValidatorOnboarding/Advisories/Advisories.tsx | 11 +++--------
 .../Advisories/advisoriesLayout.css               | 15 +++++++++++++++
 .../Overview/validatorLayout.css                  |  4 +---
 3 files changed, 19 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css

diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
index 8226c601..a9e0a90a 100644
--- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
+++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
@@ -6,11 +6,10 @@ import AdvisoriesContent from './AdvisoriesContent'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../../redux/store'
 import { setSubStepAdvisories } from '../../../redux/ValidatorOnboarding/Advisories/slice'
-
+import './advisoriesLayout.css'
 type AdvisoryTopicsType = {
   [key: string]: string[]
 }
-
 const Advisories = () => {
   const dispatch = useDispatch()
   const { subStepAdvisories } = useSelector((state: RootState) => state.advisories)
@@ -38,12 +37,8 @@ const Advisories = () => {
   }
 
   return (
-    <XStack
-      style={{ padding: '30px 33px', justifyContent: 'space-between' }}
-      minHeight={'65vh'}
-      width={'100%'}
-    >
-      <YStack space={'$2'}>
+    <XStack className="advisories-container">
+      <YStack space={'$2'} marginBottom={'30px'}>
         <Stack marginBottom="$6">
           <Text size={27} weight={'semibold'}>
             Advisories
diff --git a/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css b/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css
new file mode 100644
index 00000000..5864302d
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css
@@ -0,0 +1,15 @@
+.advisories-container {
+  padding: 30px;
+  justify-content: space-between;
+  min-height: 65vh;
+  width: 100%;
+  display: grid;
+}
+
+ 
+@media screen and (max-width: 1000px) {
+    .advisories-container {
+        flex-wrap: wrap;
+        margin: 30;
+    }
+  }
\ No newline at end of file
diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
index 3acf6a85..56e39652 100644
--- a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
@@ -1,6 +1,4 @@
-.layout {
-     
-}
+ 
 .layout::after {
   display: block;
   content: '';

From d1a1ee38c0f02eb5fe9add4b231c5e19f3ca8417 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 14:52:23 +0200
Subject: [PATCH 016/131] Update advisoriesLayout.css

---
 .../Advisories/advisoriesLayout.css                   | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css b/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css
index 5864302d..92bc241f 100644
--- a/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css
+++ b/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css
@@ -6,10 +6,9 @@
   display: grid;
 }
 
- 
 @media screen and (max-width: 1000px) {
-    .advisories-container {
-        flex-wrap: wrap;
-        margin: 30;
-    }
-  }
\ No newline at end of file
+  .advisories-container {
+    flex-wrap: wrap;
+    margin: 30;
+  }
+}

From deabb787679f6835782e2e42cd4e29d58988c083 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 5 Jan 2024 14:52:41 +0200
Subject: [PATCH 017/131] format

---
 src/pages/ValidatorOnboarding/Overview/Overview.tsx             | 2 +-
 src/pages/ValidatorOnboarding/Overview/overviewLayout.css       | 2 --
 src/pages/ValidatorOnboarding/Overview/validatorLayout.css      | 1 -
 .../ValidatorBoxWrapper/ValidatorBoxWrapper.tsx                 | 2 +-
 4 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index cf5f34db..578c738d 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -12,7 +12,7 @@ const Overview = () => {
         imgHeight="250%"
         rightImageSrc="./background-images/sync-status-background.png"
       >
-        <YStack >
+        <YStack>
           <YStack space={'$5'} width="150%">
             <Text size={27} weight={'semibold'}>
               Overview
diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
index d350993e..ea8c7877 100644
--- a/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
@@ -13,8 +13,6 @@
   min-width: 150px;
 }
 
- 
-
 @media screen and (max-width: 1000px) {
   .overview-cards {
     flex-direction: column;
diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
index 56e39652..77ea111b 100644
--- a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
@@ -1,4 +1,3 @@
- 
 .layout::after {
   display: block;
   content: '';
diff --git a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx
index a1423101..c52289c2 100644
--- a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx
@@ -1,6 +1,6 @@
 import { Shadow } from '@status-im/components'
 import { ReactNode } from 'react'
- 
+
 type ValidatorBoxWrapperProps = {
   children: ReactNode
 }

From f7f275c2022e4b062d351c2d8a0555274b4efe71 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 9 Jan 2024 13:10:54 +0200
Subject: [PATCH 018/131] Show only three steps when in mobile view

---
 .../FormStepper/FormStepper.tsx               | 44 +++++++++++++------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 45d569a1..dcd0f941 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -19,14 +19,29 @@ type FormStepperProps = {
 }
 
 const FormStepper = ({ activeStep }: FormStepperProps) => {
+  const isStepVisible = (index: number) => {
+    if (activeStep === 0) {
+      // Show the first three steps if the active step is the first one
+      return index <= 2;
+    } else if (activeStep === steps.length - 1) {
+      // Show the last three steps if the active step is the last one
+      return index >= steps.length - 3;
+    } else {
+      // Otherwise, show the previous, current, and next steps
+      return index === activeStep || index === activeStep - 1 || index === activeStep + 1;
+    }
+  }
+  
+   
   const dispatch = useDispatch()
-
+  
   const changeStepOnClickHandler = (index: number) => {
     if (activeStep > index) {
       dispatch(setActiveStep(index))
     }
   }
-
+  
+  const visibleSteps = steps.filter((_, index) => isStepVisible(index));
   return (
     <Stepper
       activeStep={activeStep}
@@ -42,17 +57,20 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
         overflow: 'hidden',
       }}
     >
-      {steps.map((step, index) => (
-        <Step
-          key={index}
-          label={step.label}
-          className="custom-step"
-          onClick={() => changeStepOnClickHandler(index)}
-          completed={activeStep > index - 1}
-          data-subtitle={step.subtitle}
-          data-step={step.label}
-        />
-      ))}
+      {visibleSteps.map((step) => {
+        const originalIndex = steps.indexOf(step);
+        return (
+          <Step
+            key={originalIndex}
+            label={step.label}
+            className="custom-step"
+            onClick={() => changeStepOnClickHandler(originalIndex)}
+            completed={activeStep > originalIndex - 1}
+            data-subtitle={step.subtitle}
+            data-step={step.label}
+          />
+        );
+      })}
     </Stepper>
   )
 }

From 17af464ccdf0fc8d99900a3754dbf69900913b16 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 9 Jan 2024 13:18:07 +0200
Subject: [PATCH 019/131] use only in phone view

---
 .../FormStepper/FormStepper.tsx               | 33 +++++++++----------
 .../ValidatorOnboarding/Overview/Overview.tsx |  3 ++
 .../ValidatorOnboarding.tsx                   | 12 ++++++-
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index dcd0f941..91661398 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -16,32 +16,29 @@ const steps = [
 
 type FormStepperProps = {
   activeStep: number
+  windowWidth: number
 }
 
-const FormStepper = ({ activeStep }: FormStepperProps) => {
+const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
   const isStepVisible = (index: number) => {
-    if (activeStep === 0) {
-      // Show the first three steps if the active step is the first one
-      return index <= 2;
-    } else if (activeStep === steps.length - 1) {
-      // Show the last three steps if the active step is the last one
-      return index >= steps.length - 3;
+    if (windowWidth < 650) {
+      const start = Math.max(0, activeStep - 1)
+      const end = Math.min(steps.length - 1, activeStep + 1)
+      return index >= start && index <= end
     } else {
-      // Otherwise, show the previous, current, and next steps
-      return index === activeStep || index === activeStep - 1 || index === activeStep + 1;
+      return true
     }
   }
-  
-   
+
   const dispatch = useDispatch()
-  
+
   const changeStepOnClickHandler = (index: number) => {
     if (activeStep > index) {
       dispatch(setActiveStep(index))
     }
   }
-  
-  const visibleSteps = steps.filter((_, index) => isStepVisible(index));
+
+  const visibleSteps = steps.filter((_, index) => isStepVisible(index))
   return (
     <Stepper
       activeStep={activeStep}
@@ -51,14 +48,14 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
       style={{
         fontSize: '14px',
         zIndex: 1,
-        width: '1200px',
+        width: '100%',
         padding: 0,
         marginBottom: '3rem',
         overflow: 'hidden',
       }}
     >
-      {visibleSteps.map((step) => {
-        const originalIndex = steps.indexOf(step);
+      {visibleSteps.map(step => {
+        const originalIndex = steps.indexOf(step)
         return (
           <Step
             key={originalIndex}
@@ -69,7 +66,7 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
             data-subtitle={step.subtitle}
             data-step={step.label}
           />
-        );
+        )
       })}
     </Stepper>
   )
diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 578c738d..78220680 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -5,7 +5,10 @@ import OverviewCard from './OverviewCard'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
 import OverviewWrapper from './OverviewWrapper'
 import './overviewLayout.css'
+ 
 const Overview = () => {
+  
+
   return (
     <>
       <OverviewWrapper
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 9fb0e4b6..6aa3ea17 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -22,8 +22,18 @@ import './layoutGradient.css'
 import Deposit from './Deposit/Deposit'
 
 import './layoutGradient.css'
+import { useEffect, useState } from 'react'
 
 const ValidatorOnboarding = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth)
+    }
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
   const { activeStep, subStepValidatorSetup } = useSelector(
     (state: RootState) => state.validatorOnboarding,
   )
@@ -44,7 +54,7 @@ const ValidatorOnboarding = () => {
           titleSize={19}
           subtitle="Earn Rewards for securing the Ethereum Network"
         />
-        <FormStepper activeStep={activeStep} />
+        <FormStepper activeStep={activeStep} windowWidth={windowWidth} />
         <ValidatorBoxWrapper>
           {activeStep === 0 && <Overview />}
           {activeStep === 1 && <Advisories />}

From e3ce07001d4280f6d1a410a6dfcfb1a95b6e2cb1 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 9 Jan 2024 13:21:10 +0200
Subject: [PATCH 020/131] format

---
 src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 2 +-
 src/pages/ValidatorOnboarding/Overview/Overview.tsx       | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 91661398..3498eed6 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -21,7 +21,7 @@ type FormStepperProps = {
 
 const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
   const isStepVisible = (index: number) => {
-    if (windowWidth < 650) {
+    if (windowWidth < 740) {
       const start = Math.max(0, activeStep - 1)
       const end = Math.min(steps.length - 1, activeStep + 1)
       return index >= start && index <= end
diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 78220680..643eb6a4 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -5,10 +5,8 @@ import OverviewCard from './OverviewCard'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
 import OverviewWrapper from './OverviewWrapper'
 import './overviewLayout.css'
- 
-const Overview = () => {
-  
 
+const Overview = () => {
   return (
     <>
       <OverviewWrapper

From 14dc82ebb97f16c409e306b9613a88ba41e0fce7 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 9 Jan 2024 14:48:01 +0200
Subject: [PATCH 021/131] fix ExecCLientCards to be responsive

---
 src/components/General/Icon.tsx                     | 13 +++++++------
 .../ValidatorOnboarding/FormStepper/FormStepper.tsx |  3 ++-
 src/pages/ValidatorOnboarding/Overview/Overview.tsx |  2 +-
 .../ValidatorSetup/ExecClientCard.tsx               |  3 ++-
 .../ValidatorSetup/ExecClientCards.tsx              | 11 +++++++++--
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/General/Icon.tsx b/src/components/General/Icon.tsx
index 9a427140..e3fb33d1 100644
--- a/src/components/General/Icon.tsx
+++ b/src/components/General/Icon.tsx
@@ -1,19 +1,20 @@
-import { Image } from '@status-im/components'
+import { Image } from 'tamagui'
 
 export type IconProps = {
   src: string
-  width?: number
-  height?: number
+  width?: string
+  height?: string
 }
 
-const Icon = ({ src, width = 16, height = 16 }: IconProps) => {
+const Icon = ({ src, width = '16px', height = '16px' }: IconProps) => {
   return (
     <Image
       src={src}
       source={{ uri: src }}
-      width={width}
-      height={height}
+      width={'70%'}
+      height={100}
       style={{ backgroundColor: 'transparent' }}
+      minWidth={'110px'}
     />
   )
 }
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 3498eed6..6459a182 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -49,6 +49,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
         fontSize: '14px',
         zIndex: 1,
         width: '100%',
+        height: 'fit-content',
         padding: 0,
         marginBottom: '3rem',
         overflow: 'hidden',
@@ -59,7 +60,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
         return (
           <Step
             key={originalIndex}
-            label={step.label}
+            label={`${originalIndex + 1}. ${step.label}`}
             className="custom-step"
             onClick={() => changeStepOnClickHandler(originalIndex)}
             completed={activeStep > originalIndex - 1}
diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 643eb6a4..63fb2258 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -15,7 +15,7 @@ const Overview = () => {
       >
         <YStack>
           <YStack space={'$5'} width="150%">
-            <Text size={27} weight={'semibold'}>
+            <Text size={27} weight={'semibold'} marginTop={'2rem'}>
               Overview
             </Text>
             <Text size={19}>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
index 481e509d..5c3a34fb 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
@@ -30,6 +30,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
         padding: '12px 16px',
         width: '19%',
         cursor: 'pointer',
+        minWidth: '150px',
       }}
       space={'$8'}
       onClick={() => {
@@ -58,7 +59,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
           </XStack>
         )}
       </Stack>
-      <Icon src={icon} width={100} height={100} />
+      <Icon src={icon} width={'100%'} height={'full'} />
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
index 0149f834..04741a92 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
@@ -10,11 +10,18 @@ const ExecClientCards = () => {
       <Stack style={{ marginTop: '15px', marginLeft: 0, marginBottom: '15px' }}>
         <Text size={27}>Select Execution client</Text>
       </Stack>
-      <XStack justifyContent={'space-between'}>
+      <Stack
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+          gap: '8px',
+          justifyContent: 'space-between',
+        }}
+      >
         {Object.entries(DOCUMENTATIONS).map(([name, { icon }], index) => (
           <ExecClientCard key={index} name={name} icon={icon} />
         ))}
-      </XStack>
+      </Stack>
     </YStack>
   )
 }

From b664c3a4a2113253cc4e0283a3269374e5086a9a Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 9 Jan 2024 17:01:48 +0200
Subject: [PATCH 022/131] clear code

---
 src/components/General/Icon.tsx                             | 6 +++---
 src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx   | 2 +-
 .../ValidatorSetup/ValidatorSetup/ExecClientCard.tsx        | 4 ++--
 .../ValidatorSetup/ValidatorSetup/ExecClientCards.tsx       | 3 +--
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/General/Icon.tsx b/src/components/General/Icon.tsx
index e3fb33d1..828f774a 100644
--- a/src/components/General/Icon.tsx
+++ b/src/components/General/Icon.tsx
@@ -11,10 +11,10 @@ const Icon = ({ src, width = '16px', height = '16px' }: IconProps) => {
     <Image
       src={src}
       source={{ uri: src }}
-      width={'70%'}
-      height={100}
+      width={'50%'}
+      height={90}
       style={{ backgroundColor: 'transparent' }}
-      minWidth={'110px'}
+      minWidth={'90px'}
     />
   )
 }
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 6459a182..65fd7508 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -60,7 +60,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
         return (
           <Step
             key={originalIndex}
-            label={`${originalIndex + 1}. ${step.label}`}
+            label={`${step.label}`}
             className="custom-step"
             onClick={() => changeStepOnClickHandler(originalIndex)}
             completed={activeStep > originalIndex - 1}
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
index 5c3a34fb..4e96b12d 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
@@ -28,8 +28,8 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
           : '1px solid #DCE0E5',
         borderRadius: '16px',
         padding: '12px 16px',
-        width: '19%',
         cursor: 'pointer',
+        width: '100%',
         minWidth: '150px',
       }}
       space={'$8'}
@@ -50,7 +50,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
               alignItems: 'center',
               padding: '3px 6px',
               borderRadius: '67px',
-              width: 'fit-content',
+              
             }}
           >
             <Text size={11} color="#fff">
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
index 04741a92..99566925 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
@@ -13,9 +13,8 @@ const ExecClientCards = () => {
       <Stack
         style={{
           display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
           gap: '8px',
-          justifyContent: 'space-between',
         }}
       >
         {Object.entries(DOCUMENTATIONS).map(([name, { icon }], index) => (

From f6cf36fc81c720dc9e02890b9dd57b4acc623681 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 9 Jan 2024 22:19:17 +0200
Subject: [PATCH 023/131] feat: replace xstack with styled div for rec
 mechanism

---
 .../KeyGeneration/RecoveryMechanism/RecoveryMechanism.tsx | 7 ++++---
 .../ValidatorOnboarding/KeyGeneration/index.module.css    | 8 ++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/index.module.css

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism/RecoveryMechanism.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism/RecoveryMechanism.tsx
index 0a577a04..16129a35 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism/RecoveryMechanism.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism/RecoveryMechanism.tsx
@@ -1,8 +1,9 @@
 import { Text } from '@status-im/components'
-import { XStack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 
 import RecoveryMechanismCard from './RecoveryMechanismCard'
 import { BOTH_KEY_AND_RECOVERY, KEYSTORE_FILES, RECOVERY_PHRASE } from '../../../../constants'
+import styles from '../index.module.css'
 
 type RecoveryMechanismProps = {
   recoveryMechanism: string
@@ -20,7 +21,7 @@ const RecoveryMechanism = ({ recoveryMechanism }: RecoveryMechanismProps) => {
       <Text size={19} weight={'semibold'}>
         Select Recovery Mechanism
       </Text>
-      <XStack space={'$4'} style={{ justifyContent: 'space-between', marginTop: '40px' }}>
+      <div className={styles['recovery-mechanism-container']}>
         {Object.entries(cards).map(([value, icon]) => (
           <RecoveryMechanismCard
             key={value}
@@ -29,7 +30,7 @@ const RecoveryMechanism = ({ recoveryMechanism }: RecoveryMechanismProps) => {
             icon={icon}
           />
         ))}
-      </XStack>
+      </div>
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
new file mode 100644
index 00000000..e305bf86
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
@@ -0,0 +1,8 @@
+.recovery-mechanism-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content: space-between;
+  margin-top: 40px;
+}
+

From e6feecebfd97f485380e7ee9f7bef8fd79d7ed95 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 10 Jan 2024 08:46:44 +0200
Subject: [PATCH 024/131] feat: add style and media query for rec mechanism

---
 .../ValidatorOnboarding/KeyGeneration/index.module.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
index e305bf86..133700a8 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
@@ -6,3 +6,13 @@
   margin-top: 40px;
 }
 
+.recovery-mechanism-container > div {
+  flex: 1;
+  width: 30%;
+}
+
+@media (max-width: 630px) {
+  .recovery-mechanism-container > div {
+    min-width: 40%;
+  }
+}

From 81c09af41609a5ee2366204224c181c3385b8f5a Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 10 Jan 2024 09:33:48 +0200
Subject: [PATCH 025/131] feat: add style for key generation header

---
 .../ValidatorOnboarding/KeyGeneration/index.module.css    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
index 133700a8..fb928a4d 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
@@ -11,6 +11,14 @@
   width: 30%;
 }
 
+.header {
+  width: 100%;
+  justify-content: space-between;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
 @media (max-width: 630px) {
   .recovery-mechanism-container > div {
     min-width: 40%;

From 293d330b2403161233aec80d891c3d17ae9ef3ab Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 10 Jan 2024 09:34:04 +0200
Subject: [PATCH 026/131] feat: add styled divs to header

---
 .../KeyGenerationHeader/KeyGenerationHeader.tsx       | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationHeader.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationHeader.tsx
index 86d73792..04896354 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationHeader.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationHeader.tsx
@@ -1,13 +1,12 @@
-import { XStack } from 'tamagui'
-
 import SyncStatusCard from '../../../../components/General/SyncStatusCard'
 import KeyGenerationTitle from '../KeyGenerationTitle'
+import styles from '../index.module.css'
 
 const KeyGenerationHeader = () => {
   return (
-    <XStack style={{ width: '100%', justifyContent: 'space-between' }}>
+    <div className={styles['header']}>
       <KeyGenerationTitle />
-      <XStack space={'$2'}>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
         <SyncStatusCard
           synced={123.524}
           total={172.503}
@@ -20,8 +19,8 @@ const KeyGenerationHeader = () => {
           title="Consensus Sync Status"
           color="#ff6161"
         />
-      </XStack>
-    </XStack>
+      </div>
+    </div>
   )
 }
 

From 405d9d4f90c5067d09e7e56fff6689b8250ca12c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 10 Jan 2024 09:43:04 +0200
Subject: [PATCH 027/131] feat: add margin bottom to header with media query

---
 .../ValidatorOnboarding/KeyGeneration/index.module.css      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
index fb928a4d..dd1bb365 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
@@ -24,3 +24,9 @@
     min-width: 40%;
   }
 }
+
+@media (max-width: 740px) {
+  .header {
+    margin-bottom: 16px;
+  }
+}

From 761ed1f370256e21d40bdd2b8d8e07fef2f1f08c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 10 Jan 2024 18:35:20 +0200
Subject: [PATCH 028/131] feat: create responsive stack and use media hook

---
 .../KeyGeneration/KeystoreFiles/KeystoreFiles.tsx    | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
index c23be369..a6c4f098 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
@@ -1,4 +1,4 @@
-import { Stack, XStack, YStack } from 'tamagui'
+import { Stack, XStack, YStack, useMedia } from 'tamagui'
 import { Button, InformationBox, Input, Text } from '@status-im/components'
 import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
@@ -12,6 +12,9 @@ const KeystoreFiles = () => {
   const [confirmEncryptedPasswordError, setConfirmEncryptedPasswordError] = useState(false)
   const [displayEncryptedPassword, setDisplayEncryptedPassword] = useState('')
   const [displayConfirmEncryptedPassword, setDisplayConfirmEncryptedPassword] = useState('')
+  const media = useMedia()
+
+  const StackComponent = media.sm ? YStack : XStack
 
   const generateKeystoreFilesHandler = () => {
     if (
@@ -55,7 +58,10 @@ const KeystoreFiles = () => {
 
   return (
     <YStack space={'$4'}>
-      <XStack space={'$2'} style={{ justifyContent: 'space-between', width: '100%' }}>
+      <StackComponent
+        space={'$2'}
+        style={{ justifyContent: 'space-between', width: '100%' }}
+      >
         <YStack space={'$4'} style={{ width: '66%' }}>
           <YStack space={'$4'}>
             <Text size={15} color={'#647084'}>
@@ -97,7 +103,7 @@ const KeystoreFiles = () => {
           </YStack>
         </YStack>
         <KeystoreBackupsCard />
-      </XStack>
+      </StackComponent>
       <Stack style={{ width: 'fit-content' }}>
         <Button onPress={generateKeystoreFilesHandler}>Generate Key files</Button>
       </Stack>

From fc9be4404d741917bd24dff89136a2591db9ad0b Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 10 Jan 2024 18:56:15 +0200
Subject: [PATCH 029/131] feat: make keystore backups card responsive

---
 .../KeystoreFiles/KeystoreBackupsCard.tsx             |  1 -
 .../KeyGeneration/KeystoreFiles/KeystoreFiles.tsx     | 11 +++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx
index 26dabfe8..dd598939 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx
@@ -17,7 +17,6 @@ const KeystoreBackupsCard = () => {
         border: '1px solid #DCE0E5',
         borderRadius: '16px',
         padding: '12px 16px',
-        width: '32%',
         marginTop: '3.4%',
         cursor: 'pointer',
       }}
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
index a6c4f098..247a442d 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
@@ -58,11 +58,8 @@ const KeystoreFiles = () => {
 
   return (
     <YStack space={'$4'}>
-      <StackComponent
-        space={'$2'}
-        style={{ justifyContent: 'space-between', width: '100%' }}
-      >
-        <YStack space={'$4'} style={{ width: '66%' }}>
+      <StackComponent space={'$2'} style={{ justifyContent: 'space-between', width: '100%' }}>
+        <YStack space={'$4'} style={{ width: media.sm ? '100%' : '66%' }}>
           <YStack space={'$4'}>
             <Text size={15} color={'#647084'}>
               Encryption Password
@@ -102,7 +99,9 @@ const KeystoreFiles = () => {
             />
           </YStack>
         </YStack>
-        <KeystoreBackupsCard />
+        <div style={{ width: media.sm ? '100%' : '32%', paddingTop: media.sm ? 0 : '1.2%' }}>
+          <KeystoreBackupsCard />
+        </div>
       </StackComponent>
       <Stack style={{ width: 'fit-content' }}>
         <Button onPress={generateKeystoreFilesHandler}>Generate Key files</Button>

From 7ad5a4986d3ff719b6c7849c8743dfc179bdca57 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 10 Jan 2024 19:00:30 +0200
Subject: [PATCH 030/131] fix: sizes of keystore backups card

---
 .../KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx       | 4 +---
 .../KeyGeneration/KeystoreFiles/KeystoreFiles.tsx             | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx
index dd598939..1150f9d2 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx
@@ -16,8 +16,7 @@ const KeystoreBackupsCard = () => {
       style={{
         border: '1px solid #DCE0E5',
         borderRadius: '16px',
-        padding: '12px 16px',
-        marginTop: '3.4%',
+        padding: '9px 16px',
         cursor: 'pointer',
       }}
       onClick={downloadKeyFilesHandler}
@@ -30,7 +29,6 @@ const KeystoreBackupsCard = () => {
           justifyContent: 'space-between',
           width: '100%',
           alignItems: 'center',
-          marginTop: '8px',
         }}
       >
         <Text size={13} color="#647084">
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
index 247a442d..52c93196 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
@@ -99,7 +99,7 @@ const KeystoreFiles = () => {
             />
           </YStack>
         </YStack>
-        <div style={{ width: media.sm ? '100%' : '32%', paddingTop: media.sm ? 0 : '1.2%' }}>
+        <div style={{ width: media.sm ? '100%' : '32%', paddingTop: media.sm ? 0 : '3.8%' }}>
           <KeystoreBackupsCard />
         </div>
       </StackComponent>

From 5fe3bb1b5404c278916e67f6ac1049d7b5f10579 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 11 Jan 2024 11:08:59 +0200
Subject: [PATCH 031/131] fix: padding of keystore backups card

---
 .../KeyGeneration/KeystoreFiles/KeystoreFiles.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
index 52c93196..c2ee51cc 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
@@ -99,7 +99,7 @@ const KeystoreFiles = () => {
             />
           </YStack>
         </YStack>
-        <div style={{ width: media.sm ? '100%' : '32%', paddingTop: media.sm ? 0 : '3.8%' }}>
+        <div style={{ width: media.sm ? '100%' : '32%', paddingTop: '3.8%' }}>
           <KeystoreBackupsCard />
         </div>
       </StackComponent>

From e219707d2ef99a6c0ef2e197e0a27c8b99f18b8d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 11 Jan 2024 11:09:30 +0200
Subject: [PATCH 032/131] feat: create responsive stack component

---
 src/components/General/ResponsiveStack.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/components/General/ResponsiveStack.tsx

diff --git a/src/components/General/ResponsiveStack.tsx b/src/components/General/ResponsiveStack.tsx
new file mode 100644
index 00000000..3e79c6ad
--- /dev/null
+++ b/src/components/General/ResponsiveStack.tsx
@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react'
+import { XStack, YStack } from 'tamagui'
+
+type ResponsiveStackProps = {
+  isVerticalAligned?: boolean
+  children: ReactNode
+  space?: string
+  style?: CSSProperties
+}
+
+const ResponsiveStack = ({ isVerticalAligned, children, space, style }: ResponsiveStackProps) => {
+  if (isVerticalAligned) {
+    return <YStack space={space} style={style}>{children}</YStack>
+  }
+
+  return <XStack space={space} style={style}>{children}</XStack>
+}
+
+export default ResponsiveStack

From d1f73631b4c458a89156c5277eb754cb19b43f32 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 11 Jan 2024 11:09:48 +0200
Subject: [PATCH 033/131] fix: remove old stack and use new responsive one

---
 .../KeyGeneration/KeystoreFiles/KeystoreFiles.tsx   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
index c2ee51cc..f1c1950c 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
@@ -1,9 +1,10 @@
-import { Stack, XStack, YStack, useMedia } from 'tamagui'
+import { Stack, YStack, useMedia } from 'tamagui'
 import { Button, InformationBox, Input, Text } from '@status-im/components'
 import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
 
 import KeystoreBackupsCard from './KeystoreBackupsCard'
+import ResponsiveStack from '../../../../components/General/ResponsiveStack'
 
 const KeystoreFiles = () => {
   const [encryptedPassword, setEncryptedPassword] = useState('')
@@ -14,8 +15,6 @@ const KeystoreFiles = () => {
   const [displayConfirmEncryptedPassword, setDisplayConfirmEncryptedPassword] = useState('')
   const media = useMedia()
 
-  const StackComponent = media.sm ? YStack : XStack
-
   const generateKeystoreFilesHandler = () => {
     if (
       encryptedPassword !== confirmEncryptedPassword ||
@@ -58,7 +57,11 @@ const KeystoreFiles = () => {
 
   return (
     <YStack space={'$4'}>
-      <StackComponent space={'$2'} style={{ justifyContent: 'space-between', width: '100%' }}>
+      <ResponsiveStack
+        isVerticalAligned={!!media.sm}
+        space={'$2'}
+        style={{ justifyContent: 'space-between', width: '100%' }}
+      >
         <YStack space={'$4'} style={{ width: media.sm ? '100%' : '66%' }}>
           <YStack space={'$4'}>
             <Text size={15} color={'#647084'}>
@@ -102,7 +105,7 @@ const KeystoreFiles = () => {
         <div style={{ width: media.sm ? '100%' : '32%', paddingTop: '3.8%' }}>
           <KeystoreBackupsCard />
         </div>
-      </StackComponent>
+      </ResponsiveStack>
       <Stack style={{ width: 'fit-content' }}>
         <Button onPress={generateKeystoreFilesHandler}>Generate Key files</Button>
       </Stack>

From 3585ea680419aa1525bfe83823f8d2db081fa224 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 12 Jan 2024 09:55:17 +0200
Subject: [PATCH 034/131] feat: move style for recovery phrase into css module

---
 .../KeyGeneration/RecoveryPhrase.tsx                  | 11 ++++-------
 .../KeyGeneration/index.module.css                    |  8 ++++++++
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 8fe3a5f3..a84e4131 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -8,6 +8,7 @@ import wordlist from 'web-bip39/wordlists/english'
 
 import { RootState } from '../../../redux/store'
 import { setGeneratedMnemonic } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
+import styles from './index.module.css'
 
 type RecoveryPhraseProps = {
   isKeystoreFiles: boolean
@@ -54,15 +55,11 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
         }}
         onClick={copyRecoveryPhraseHandler}
       >
-        <Stack
+        <div
           style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(6, 1fr)',
-            gap: '5px 3px',
-            width: '100%',
             filter: `blur(${isReveal ? '0px' : '4px'})`,
-            padding: '28px 0px 0px 18px',
           }}
+          className={styles['recovery-phrase']}
         >
           {generatedMnemonic.map((word, index) => (
             <XStack style={{ width: '100%' }}>
@@ -76,7 +73,7 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
               </Text>
             </XStack>
           ))}
-        </Stack>
+        </div>
         {isCopied ? <CheckIcon size={20} /> : <CopyIcon size={20} />}
       </YStack>
       <Stack style={{ width: 'fit-content', marginBottom: '12px' }}>
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
index dd1bb365..d8da2861 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
@@ -19,6 +19,14 @@
   gap: 8px;
 }
 
+.recovery-phrase {
+  display: grid;
+  gap: 5px 3px;
+  width: 100%;
+  padding: 28px 0px 0px 18px;
+  grid-template-columns: repeat(6, 1fr);
+}
+
 @media (max-width: 630px) {
   .recovery-mechanism-container > div {
     min-width: 40%;

From 978b66ddd81641a361ac9d9db35ad236006f69ec Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 12 Jan 2024 09:55:39 +0200
Subject: [PATCH 035/131] fix: padding and width of recovery phrase

---
 src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index a84e4131..31f9274f 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -52,6 +52,7 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
           cursor: 'pointer',
           paddingBottom: '8px',
           paddingRight: '18px',
+          paddingLeft: '18px',
         }}
         onClick={copyRecoveryPhraseHandler}
       >
@@ -63,7 +64,7 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
         >
           {generatedMnemonic.map((word, index) => (
             <XStack style={{ width: '100%' }}>
-              <Stack style={{ width: '25%' }}>
+              <Stack>
                 <Text key={index} size={19} weight={'semibold'} color="#0d162566">
                   {index + 1}.
                 </Text>

From 550a3bb3396e18b73e11722d829ff52cdf9ced32 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 12 Jan 2024 09:56:24 +0200
Subject: [PATCH 036/131] fix: add space between word number point and word

---
 src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 31f9274f..686c2929 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -66,7 +66,7 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
             <XStack style={{ width: '100%' }}>
               <Stack>
                 <Text key={index} size={19} weight={'semibold'} color="#0d162566">
-                  {index + 1}.
+                  {index + 1}.&nbsp;
                 </Text>
               </Stack>
               <Text key={index} size={19} weight={'semibold'}>

From 5ca47a8cedf1e15013bdb25babc5f25e32ad004a Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 12 Jan 2024 10:21:56 +0200
Subject: [PATCH 037/131] feat: reset is copied rec phrase when mnemonic is
 changed

---
 .../ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx      | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 686c2929..49706374 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -24,6 +24,10 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
     getMnemonic()
   }, [])
 
+  useEffect(() => {
+    setIsCopied(false)
+  }, [generatedMnemonic])
+
   const getMnemonic = async () => {
     const mnemonic = await generateMnemonic(wordlist, 256)
     dispatch(setGeneratedMnemonic(mnemonic.split(' ')))

From 4a7d2222aafa95a5ea317d5658211e7f2634bc3a Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 12 Jan 2024 10:22:21 +0200
Subject: [PATCH 038/131] feat: reset is copied after 3 seconds copy

---
 .../KeyGeneration/RecoveryPhrase.tsx                  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 49706374..c5ee6107 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -17,6 +17,7 @@ type RecoveryPhraseProps = {
 const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
   const [isReveal, setIsReveal] = useState(false)
   const [isCopied, setIsCopied] = useState(false)
+  const [isTimeoutActive, setIsTimeoutActive] = useState(false)
   const { generatedMnemonic } = useSelector((state: RootState) => state.keyGeneration)
   const dispatch = useDispatch()
 
@@ -41,7 +42,15 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
     const text = generatedMnemonic.join(' ')
     navigator.clipboard.writeText(text)
 
-    setIsCopied(true)
+    if (!isTimeoutActive) {
+      setIsCopied(true)
+      setIsTimeoutActive(true)
+
+      setTimeout(() => {
+        setIsCopied(false)
+        setIsTimeoutActive(false)
+      }, 3000)
+    }
   }
 
   return (

From e0f17e526133c22accbc6b7ce0d178622b886e3c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 12 Jan 2024 10:36:12 +0200
Subject: [PATCH 039/131] feat: add media queries for responsive recovery
 phrase

---
 .../KeyGeneration/index.module.css            | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
index d8da2861..dde489e8 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
@@ -38,3 +38,27 @@
     margin-bottom: 16px;
   }
 }
+
+@media (min-width: 701px) and (max-width: 950px) {
+  .recovery-phrase {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (max-width: 700px) {
+  .recovery-phrase {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 351px) and (max-width: 520px) {
+  .recovery-phrase {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 350px) {
+  .recovery-phrase {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
\ No newline at end of file

From 97c0b76acd7bacdf62c209007df8287124e9a9c3 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 12 Jan 2024 19:39:28 +0200
Subject: [PATCH 040/131] feat: move confirm recovery phrase into css module

---
 .../ConfirmRecoveryPhrase.tsx                   | 17 +++++------------
 .../KeyGeneration/index.module.css              |  8 ++++++++
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx
index 2597f468..abc10fe7 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx
@@ -1,10 +1,11 @@
-import { Stack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 import { Text } from '@status-im/components'
+import { useSelector } from 'react-redux'
 
 import AutocompleteInput from './AutocompleteInput'
 import KeyGenerationTitle from '../KeyGenerationTitle'
-import { useSelector } from 'react-redux'
 import { RootState } from '../../../../redux/store'
+import styles from '../index.module.css'
 
 const ConfirmRecoveryPhrase = () => {
   const { validWords } = useSelector((state: RootState) => state.keyGeneration)
@@ -13,19 +14,11 @@ const ConfirmRecoveryPhrase = () => {
     <YStack space={'$3'} style={{ width: '100%', marginTop: '20px' }}>
       <KeyGenerationTitle />
       <Text size={19}>Confirm Recovery Phrase</Text>
-      <Stack
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(4, 1fr)',
-          gap: '20px 40px',
-          width: '72%',
-          marginBottom: '10px',
-        }}
-      >
+      <div className={styles['confirm-recovery-phrase']}>
         {validWords.map((_, index) => (
           <AutocompleteInput key={index} index={index} />
         ))}
-      </Stack>
+      </div>
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
index dde489e8..3019ce80 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
@@ -27,6 +27,14 @@
   grid-template-columns: repeat(6, 1fr);
 }
 
+.confirm-recovery-phrase {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px 40px;
+  width: 72%;
+  margin-bottom: 10px;
+}
+
 @media (max-width: 630px) {
   .recovery-mechanism-container > div {
     min-width: 40%;

From 1d255f76cd0f486f01e9d2c5b4865d1274a6c228 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sat, 13 Jan 2024 15:24:33 +0200
Subject: [PATCH 041/131] feat: add media queries for responsive recovery
 phrase inputs

---
 .../KeyGeneration/index.module.css            | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
index 3019ce80..92927a64 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
@@ -69,4 +69,31 @@
   .recovery-phrase {
     grid-template-columns: repeat(1, 1fr);
   }
-}
\ No newline at end of file
+}
+
+@media (max-width: 900px) {
+  .confirm-recovery-phrase {
+    width: 100%;
+  }
+}
+
+@media (max-width: 750px) {
+  .confirm-recovery-phrase {
+    grid-template-columns: repeat(3, 1fr);
+    width: 100%;
+  }
+}
+
+@media (max-width: 550px) {
+  .confirm-recovery-phrase {
+    grid-template-columns: repeat(2, 1fr);
+    width: 100%;
+  }
+}
+
+@media (max-width: 350px) {
+  .confirm-recovery-phrase {
+    grid-template-columns: repeat(1, 1fr);
+    width: 100%;
+  }
+}

From a10d8286453ed0cbe4f84e34192ded4f38178ead Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 15 Jan 2024 22:04:25 +0200
Subject: [PATCH 042/131] feat: use responsive stack and media hook for deposit
 price

---
 src/components/General/ValidatorsMenuWithPrice.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/General/ValidatorsMenuWithPrice.tsx b/src/components/General/ValidatorsMenuWithPrice.tsx
index 3fe9eb59..ce4e58ce 100644
--- a/src/components/General/ValidatorsMenuWithPrice.tsx
+++ b/src/components/General/ValidatorsMenuWithPrice.tsx
@@ -1,10 +1,11 @@
 import { useState } from 'react'
 import { Input, Text } from '@status-im/components'
 import { AddIcon } from '@status-im/icons'
-import { Stack, XStack, YStack } from 'tamagui'
+import { Stack, XStack, YStack, useMedia } from 'tamagui'
 
 import { CURRENCIES, ETH_PER_VALIDATOR } from '../../constants'
 import CurrencyDropdown from './CurrencyDropdown'
+import ResponsiveStack from './ResponsiveStack'
 
 type ValidatorsMenuWithPriceProps = {
   validatorCount: number
@@ -20,6 +21,7 @@ const ValidatorsMenuWithPrice = ({
   label,
 }: ValidatorsMenuWithPriceProps) => {
   const [currency, setCurrency] = useState(Object.keys(CURRENCIES)[0] as CurrencyType)
+  const media = useMedia()
 
   const changeCurrency = (currency: CurrencyType) => {
     if (CURRENCIES[currency]) {
@@ -31,7 +33,11 @@ const ValidatorsMenuWithPrice = ({
   const totalPrice = totalETH * CURRENCIES[currency as keyof typeof CURRENCIES]
 
   return (
-    <XStack justifyContent={'space-between'} width={'80%'}>
+    <ResponsiveStack
+      isVerticalAligned={media.sm}
+      style={{ justifyContent: 'space-between', width: media.md ? '100%' : '80%' }}
+      space={'$3'}
+    >
       <Stack space={'$2'}>
         <Text size={15} weight="regular" color={'#647084'}>
           {label}
@@ -68,7 +74,7 @@ const ValidatorsMenuWithPrice = ({
           {totalPrice.toFixed(2)} {currency}
         </Text>
       </YStack>
-    </XStack>
+    </ResponsiveStack>
   )
 }
 

From b5a2a63b5196238d34a2da67a429fbe707599d05 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 16 Jan 2024 13:06:15 +0200
Subject: [PATCH 043/131] fix validator setup title resp

---
 .../ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx
index 66f54f1f..456cd5fe 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx
@@ -12,7 +12,7 @@ const ValidatorSetup = () => {
       minHeight={'65vh'}
       justifyContent={'space-between'}
     >
-      <XStack justifyContent={'space-between'} alignItems={'center'}>
+      <XStack justifyContent={'space-between'} alignItems={'center'} flexWrap="wrap">
         <Text size={27} weight={'semibold'}>
           Validator Setup
         </Text>

From 2c1820c58b1258077902eb6bfe0641182d3d24d8 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 16 Jan 2024 13:15:37 +0200
Subject: [PATCH 044/131] Update ValidatorSetup.tsx

---
 .../ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx
index 456cd5fe..c22e532a 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx
@@ -12,10 +12,11 @@ const ValidatorSetup = () => {
       minHeight={'65vh'}
       justifyContent={'space-between'}
     >
-      <XStack justifyContent={'space-between'} alignItems={'center'} flexWrap="wrap">
+      <XStack justifyContent={'space-between'} alignItems={'center'} flexWrap="wrap" space={'$8'}>
         <Text size={27} weight={'semibold'}>
           Validator Setup
         </Text>
+
         <PairedDeviceCard />
       </XStack>
       <YStack>

From d440900d0533d30132a43755401880f567bcf5ad Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 16 Jan 2024 13:57:59 +0200
Subject: [PATCH 045/131] make responsive

---
 src/components/General/Icon.tsx               | 17 +++----------
 .../Overview/validatorLayout.css              |  1 +
 .../ConsensusClient/ConsensusSelection.tsx    |  9 ++++---
 .../ValidatorInstalling/InstallLayout.css     | 25 +++++++++++++++++++
 .../ValidatorInstalling/OSCard.tsx            | 23 +++++------------
 .../ValidatorInstalling/OSCards.tsx           | 19 ++++----------
 .../ValidatorInstalling/ValidatorInstall.tsx  | 14 ++++++-----
 .../ValidatorSetup/ExecClientCard.tsx         |  2 +-
 8 files changed, 55 insertions(+), 55 deletions(-)
 create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css

diff --git a/src/components/General/Icon.tsx b/src/components/General/Icon.tsx
index 828f774a..f6fccd09 100644
--- a/src/components/General/Icon.tsx
+++ b/src/components/General/Icon.tsx
@@ -2,21 +2,12 @@ import { Image } from 'tamagui'
 
 export type IconProps = {
   src: string
-  width?: string
-  height?: string
+  width?: number
+  height?: number
 }
 
-const Icon = ({ src, width = '16px', height = '16px' }: IconProps) => {
-  return (
-    <Image
-      src={src}
-      source={{ uri: src }}
-      width={'50%'}
-      height={90}
-      style={{ backgroundColor: 'transparent' }}
-      minWidth={'90px'}
-    />
-  )
+const Icon = ({ src, height = 100, width = 100 }: IconProps) => {
+  return <Image src={src} source={{ uri: src }} height={height} width={width} />
 }
 
 export default Icon
diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
index 77ea111b..56e39652 100644
--- a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
@@ -1,3 +1,4 @@
+ 
 .layout::after {
   display: block;
   content: '';
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
index 4e7752d7..8f0cd62d 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
@@ -33,12 +33,13 @@ const ConsensusSelection = () => {
 
   return (
     <YStack style={{ width: '100%', padding: '32px' }} minHeight={'65vh'}>
-      <XStack justifyContent={'space-between'} alignItems={'center'} mb={'30px'}>
+      <XStack justifyContent={'space-between'} alignItems={'center'} mb={'30px'} flexWrap="wrap">
         <Text size={27} weight={'semibold'}>
           Validator Setup
         </Text>
-        <XStack space={'$2'}>
+        <XStack space={'$2'} flexWrap="wrap">
           <PairedDeviceCard />
+
           <ConsensusGaugeCard
             color="blue"
             synced={134879}
@@ -67,9 +68,9 @@ const ConsensusSelection = () => {
         Install Consensus client
       </TextTam>
 
-      <XStack space={'$8'}>
+      <XStack space={'$8'} flexWrap="wrap">
         <ConsensusClientCard name={clients[0].name} icon={clients[0].icon} />
-        <YStack width={'67%'} space={'$4'}>
+        <YStack width={'67%'} maxWidth="550px" space={'$4'}>
           <Text size={19}>The resource efficient Ethereum Clients.</Text>
           <Text size={15}>
             {selectedClient} is a client implementation for both execution and consensus layers that
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css
new file mode 100644
index 00000000..a8e15471
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css
@@ -0,0 +1,25 @@
+.osCardsContainer {
+  /* Container styles */
+}
+
+.osCard {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 16px;
+  padding: 12px 16px;
+  min-width: 200px;
+  cursor: 'pointer';
+  width: 32%; /* Adjust for normal screens */
+}
+
+.osCard.selected {
+  background-color: #2a4af50d;
+  border: 1px solid #2a4af566;
+}
+
+/* Media query for smaller screens */
+@media (max-width: 800px) {
+  .osCard {
+    width: 100%; /* Full width on small screens */
+    margin: 8px 0;
+  }
+}
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
index ac73df7f..72087ac2 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
@@ -1,6 +1,5 @@
-import { Stack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 import { Text } from '@status-im/components'
-
 import Icon from '../../../../components/General/Icon'
 
 type OSCardProps = {
@@ -13,23 +12,13 @@ type OSCardProps = {
 const OSCard = ({ name, icon, onClick, isSelected }: OSCardProps) => {
   return (
     <YStack
-      style={{
-        backgroundColor: isSelected ? '#2A4AF50D' : 'none',
-        border: isSelected ? '1px solid #2A4AF566' : '1px solid rgba(0, 0, 0, 0.15);',
-        borderRadius: '16px',
-        padding: '12px 16px',
-        width: '32%',
-        cursor: 'pointer',
-      }}
-      space={'$8'}
+      className={`osCard ${isSelected ? 'selected' : ''}`}
       onPress={onClick}
     >
-      <Stack>
-        <Text size={19} weight={'semibold'}>
-          {name}
-        </Text>
-      </Stack>
-      <Icon src={icon} width={42} height={52} />
+      <Text size={19} weight={'semibold'}>
+        {name}
+      </Text>
+      <Icon src={icon} width={90} height={110} />
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
index dd09c888..d7738b78 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
@@ -1,21 +1,12 @@
 import { XStack } from 'tamagui'
-
 import OSCard from './OSCard'
 import { LINUX, MAC, WINDOWS } from '../../../../constants'
 
+import './InstallLayout.css'
 const cards = [
-  {
-    name: MAC,
-    icon: '/icons/apple-logo.svg',
-  },
-  {
-    name: LINUX,
-    icon: '/icons/linux-logo.svg',
-  },
-  {
-    name: WINDOWS,
-    icon: '/icons/windows-logo.svg',
-  },
+  { name: MAC, icon: '/icons/apple-logo.svg' },
+  { name: LINUX, icon: '/icons/linux-logo.svg' },
+  { name: WINDOWS, icon: '/icons/windows-logo.svg' },
 ]
 
 type OSCardsProps = {
@@ -25,7 +16,7 @@ type OSCardsProps = {
 
 const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
-    <XStack justifyContent={'space-between'} my={'15px'}>
+    <XStack className="osCardsContainer" justifyContent={'space-between'} my={'15px'} flexWrap="wrap">
       {cards.map(card => (
         <OSCard
           key={card.name}
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
index 74b27ad4..f01a19d6 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
@@ -1,4 +1,4 @@
-import { YStack } from 'tamagui'
+import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import { useSelector } from 'react-redux'
 import { useState } from 'react'
@@ -8,7 +8,7 @@ import { DOCUMENTATIONS } from './documentations'
 import { MAC } from '../../../../constants'
 import OSCards from './OSCards'
 import Markdown from '../../../../components/General/Markdown/Markdown'
-
+import './InstallLayout.css'
 const ValidatorSetupInstall = () => {
   const [selectedOS, setSelectedOS] = useState(MAC)
   const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
@@ -18,7 +18,7 @@ const ValidatorSetupInstall = () => {
   }
 
   return (
-    <YStack style={{ width: '100%', padding: '26px 32px' }}>
+    <YStack style={{ padding: '26px 32px', width:'fit-content' }}>
       <Text size={27} weight={'semibold'}>
         Validator Setup
       </Text>
@@ -35,9 +35,11 @@ const ValidatorSetupInstall = () => {
         <Text size={19} weight={'semibold'}>
           Installing {selectedClient}
         </Text>
-        <Markdown children={DOCUMENTATIONS[selectedClient].general} />
-        <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
-        <Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />
+        <Stack flexWrap="wrap">
+          <Markdown children={DOCUMENTATIONS[selectedClient].general} />
+          <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
+          <Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />
+        </Stack>
       </YStack>
     </YStack>
   )
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
index 4e96b12d..ba147c27 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
@@ -59,7 +59,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
           </XStack>
         )}
       </Stack>
-      <Icon src={icon} width={'100%'} height={'full'} />
+      <Icon src={icon} width={100} height={100} />
     </YStack>
   )
 }

From de3c51d6933845bb9c252dca2d428b10c6e10e4f Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 16 Jan 2024 14:34:24 +0200
Subject: [PATCH 046/131] fix: add key for recovery phrase word list

---
 src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index c5ee6107..59c8b928 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -76,7 +76,7 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
           className={styles['recovery-phrase']}
         >
           {generatedMnemonic.map((word, index) => (
-            <XStack style={{ width: '100%' }}>
+            <XStack style={{ width: '100%' }} key={word}>
               <Stack>
                 <Text key={index} size={19} weight={'semibold'} color="#0d162566">
                   {index + 1}.&nbsp;

From 0272fb1bfd5f257f80c0304c83f5c21cac2c6582 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 16 Jan 2024 23:54:10 +0200
Subject: [PATCH 047/131] feat: move eth and currency dropdown on one row

---
 .../General/ValidatorsMenuWithPrice.tsx       | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/components/General/ValidatorsMenuWithPrice.tsx b/src/components/General/ValidatorsMenuWithPrice.tsx
index ce4e58ce..88bbdb15 100644
--- a/src/components/General/ValidatorsMenuWithPrice.tsx
+++ b/src/components/General/ValidatorsMenuWithPrice.tsx
@@ -55,25 +55,27 @@ const ValidatorsMenuWithPrice = ({
           onChangeText={changeValidatorCountHandler}
         />
       </Stack>
-      <YStack space={'$2'}>
-        <Text size={15} weight={'semibold'}>
-          ETH
-        </Text>
-        <Text size={27} weight={'semibold'}>
-          {totalETH}
-        </Text>
-      </YStack>
-      <YStack space={'$2'}>
-        <XStack style={{ justifyContent: 'space-between', width: '115%' }}>
+      <XStack style={{ justifyContent: 'space-between' }}>
+        <YStack space={'$2'}>
           <Text size={15} weight={'semibold'}>
-            {currency}
+            ETH
           </Text>
-          <CurrencyDropdown changeCurrency={changeCurrency} />
-        </XStack>
-        <Text size={27} weight={'semibold'}>
-          {totalPrice.toFixed(2)} {currency}
-        </Text>
-      </YStack>
+          <Text size={27} weight={'semibold'}>
+            {totalETH}
+          </Text>
+        </YStack>
+        <YStack space={'$2'}>
+          <XStack style={{ justifyContent: 'space-between', width: '115%' }}>
+            <Text size={15} weight={'semibold'}>
+              {currency}
+            </Text>
+            <CurrencyDropdown changeCurrency={changeCurrency} />
+          </XStack>
+          <Text size={27} weight={'semibold'}>
+            {totalPrice.toFixed(2)} {currency}
+          </Text>
+        </YStack>
+      </XStack>
     </ResponsiveStack>
   )
 }

From a66b08f21ab2529d7c497c5fdce17fc18297924e Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 17 Jan 2024 08:52:36 +0200
Subject: [PATCH 048/131] feat: add copy button for validator address

---
 src/components/General/ValidatorProfile.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/General/ValidatorProfile.tsx b/src/components/General/ValidatorProfile.tsx
index 5352fc07..c046fc2d 100644
--- a/src/components/General/ValidatorProfile.tsx
+++ b/src/components/General/ValidatorProfile.tsx
@@ -2,6 +2,7 @@ import { Avatar, Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
 
 import { getFormattedValidatorAddress } from '../../utilities'
+import { CopyIcon } from '@status-im/icons'
 
 type ValidatorProfileProps = {
   number: number
@@ -22,9 +23,12 @@ const ValidatorProfile = ({ number, address }: ValidatorProfileProps) => {
         <Text size={15} weight={'semibold'}>
           Validator {number}
         </Text>
-        <Text size={13} color="#647084">
-          {getFormattedValidatorAddress(address)}
-        </Text>
+        <XStack space={'$1'} style={{ alignItems: 'center' }}>
+          <Text size={13} color="#647084">
+            {getFormattedValidatorAddress(address)}
+          </Text>
+          <CopyIcon size={16} color="#647084" style={{ cursor: 'pointer' }} />
+        </XStack>
       </YStack>
     </XStack>
   )

From c5eb85b0180f505c2d6e6ccdb6eb0b793687ebb1 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 17 Jan 2024 08:58:29 +0200
Subject: [PATCH 049/131] feat: add copy address handler

---
 src/components/General/ValidatorProfile.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/General/ValidatorProfile.tsx b/src/components/General/ValidatorProfile.tsx
index c046fc2d..3d0f2282 100644
--- a/src/components/General/ValidatorProfile.tsx
+++ b/src/components/General/ValidatorProfile.tsx
@@ -10,6 +10,10 @@ type ValidatorProfileProps = {
 }
 
 const ValidatorProfile = ({ number, address }: ValidatorProfileProps) => {
+  const onCopyAddress = () => {
+    navigator.clipboard.writeText(address)
+  }
+
   return (
     <XStack space={'$2'}>
       <Avatar
@@ -27,7 +31,12 @@ const ValidatorProfile = ({ number, address }: ValidatorProfileProps) => {
           <Text size={13} color="#647084">
             {getFormattedValidatorAddress(address)}
           </Text>
-          <CopyIcon size={16} color="#647084" style={{ cursor: 'pointer' }} />
+          <CopyIcon
+            size={16}
+            color="#647084"
+            style={{ cursor: 'pointer' }}
+            onClick={onCopyAddress}
+          />
         </XStack>
       </YStack>
     </XStack>

From 4dbf4d3e8a51b550446d7282b5764b56c9a965d4 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 17 Jan 2024 22:10:18 +0200
Subject: [PATCH 050/131] feat: create reuse component for validator name and
 address

---
 .../General/ValidatorNameAddress.tsx          | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/General/ValidatorNameAddress.tsx

diff --git a/src/components/General/ValidatorNameAddress.tsx b/src/components/General/ValidatorNameAddress.tsx
new file mode 100644
index 00000000..70287f08
--- /dev/null
+++ b/src/components/General/ValidatorNameAddress.tsx
@@ -0,0 +1,32 @@
+import { Text } from '@status-im/components'
+import { XStack, YStack } from 'tamagui'
+
+import { getFormattedValidatorAddress } from '../../utilities'
+import { CopyIcon } from '@status-im/icons'
+
+type ValidatorNameAddressProps = {
+  number: number
+  address: string
+}
+
+const ValidatorNameAddress = ({ number, address }: ValidatorNameAddressProps) => {
+  const onCopyAddress = () => {
+    navigator.clipboard.writeText(address)
+  }
+
+  return (
+    <YStack>
+      <Text size={15} weight={'semibold'}>
+        Validator {number}
+      </Text>
+      <XStack space={'$1'} style={{ alignItems: 'center' }}>
+        <Text size={13} color="#647084">
+          {getFormattedValidatorAddress(address)}
+        </Text>
+        <CopyIcon size={16} color="#647084" style={{ cursor: 'pointer' }} onClick={onCopyAddress} />
+      </XStack>
+    </YStack>
+  )
+}
+
+export default ValidatorNameAddress

From 0fd00f3489950488c60299f143829065c28092e2 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 17 Jan 2024 22:10:31 +0200
Subject: [PATCH 051/131] feat: use new component into validator profile

---
 src/components/General/ValidatorProfile.tsx | 28 +++------------------
 1 file changed, 4 insertions(+), 24 deletions(-)

diff --git a/src/components/General/ValidatorProfile.tsx b/src/components/General/ValidatorProfile.tsx
index 3d0f2282..e6c7eb0f 100644
--- a/src/components/General/ValidatorProfile.tsx
+++ b/src/components/General/ValidatorProfile.tsx
@@ -1,8 +1,7 @@
-import { Avatar, Text } from '@status-im/components'
-import { XStack, YStack } from 'tamagui'
+import { Avatar } from '@status-im/components'
+import { XStack } from 'tamagui'
 
-import { getFormattedValidatorAddress } from '../../utilities'
-import { CopyIcon } from '@status-im/icons'
+import ValidatorNameAddress from './ValidatorNameAddress'
 
 type ValidatorProfileProps = {
   number: number
@@ -10,10 +9,6 @@ type ValidatorProfileProps = {
 }
 
 const ValidatorProfile = ({ number, address }: ValidatorProfileProps) => {
-  const onCopyAddress = () => {
-    navigator.clipboard.writeText(address)
-  }
-
   return (
     <XStack space={'$2'}>
       <Avatar
@@ -23,22 +18,7 @@ const ValidatorProfile = ({ number, address }: ValidatorProfileProps) => {
         name={number.toString()}
         indicator="online"
       />
-      <YStack>
-        <Text size={15} weight={'semibold'}>
-          Validator {number}
-        </Text>
-        <XStack space={'$1'} style={{ alignItems: 'center' }}>
-          <Text size={13} color="#647084">
-            {getFormattedValidatorAddress(address)}
-          </Text>
-          <CopyIcon
-            size={16}
-            color="#647084"
-            style={{ cursor: 'pointer' }}
-            onClick={onCopyAddress}
-          />
-        </XStack>
-      </YStack>
+      <ValidatorNameAddress number={number} address={address} />
     </XStack>
   )
 }

From c026ff3ae6affb833b2c3ec32d4bbd1c1b5980c4 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 17 Jan 2024 22:11:07 +0200
Subject: [PATCH 052/131] feat: create story for validator name address

---
 .../General/ValidatorNameAddress.stories.tsx  | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/components/General/ValidatorNameAddress.stories.tsx

diff --git a/src/components/General/ValidatorNameAddress.stories.tsx b/src/components/General/ValidatorNameAddress.stories.tsx
new file mode 100644
index 00000000..0e79a7f9
--- /dev/null
+++ b/src/components/General/ValidatorNameAddress.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ValidatorNameAddress from './ValidatorNameAddress'
+
+const meta = {
+  title: 'General/ValidatorNameAddress',
+  component: ValidatorNameAddress,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ValidatorNameAddress>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    number: 1,
+    address: 'zQ3asdf9d4Gs0',
+  },
+}

From ca7f8c7b78d2840344c0c96e3f7320ee2641a6bb Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 17 Jan 2024 22:13:00 +0200
Subject: [PATCH 053/131] feat: align validator name

---
 src/components/General/ValidatorNameAddress.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/General/ValidatorNameAddress.tsx b/src/components/General/ValidatorNameAddress.tsx
index 70287f08..beee374d 100644
--- a/src/components/General/ValidatorNameAddress.tsx
+++ b/src/components/General/ValidatorNameAddress.tsx
@@ -15,7 +15,7 @@ const ValidatorNameAddress = ({ number, address }: ValidatorNameAddressProps) =>
   }
 
   return (
-    <YStack>
+    <YStack alignItems={'start'}>
       <Text size={15} weight={'semibold'}>
         Validator {number}
       </Text>

From bbbf82173057288d5919dd1806750720ac3b38dd Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 11:41:04 +0200
Subject: [PATCH 054/131] feat: add icons to validator name and address

---
 .../General/ValidatorNameAddress.tsx          | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/General/ValidatorNameAddress.tsx b/src/components/General/ValidatorNameAddress.tsx
index beee374d..37f6a0a5 100644
--- a/src/components/General/ValidatorNameAddress.tsx
+++ b/src/components/General/ValidatorNameAddress.tsx
@@ -1,24 +1,35 @@
 import { Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
+import { CopyIcon, VerifiedIcon, ContactIcon } from '@status-im/icons'
 
 import { getFormattedValidatorAddress } from '../../utilities'
-import { CopyIcon } from '@status-im/icons'
 
 type ValidatorNameAddressProps = {
-  number: number
+  name: string
   address: string
+  isVerified?: boolean
+  isAvatarChipIncluded?: boolean
 }
 
-const ValidatorNameAddress = ({ number, address }: ValidatorNameAddressProps) => {
+const ValidatorNameAddress = ({
+  name,
+  address,
+  isVerified,
+  isAvatarChipIncluded,
+}: ValidatorNameAddressProps) => {
   const onCopyAddress = () => {
     navigator.clipboard.writeText(address)
   }
 
   return (
     <YStack alignItems={'start'}>
-      <Text size={15} weight={'semibold'}>
-        Validator {number}
-      </Text>
+      <XStack space={'$1'} alignItems="center">
+        <Text size={13} weight={'semibold'}>
+          Validator {name}
+        </Text>
+        {isVerified && <VerifiedIcon size={20} />}
+        {isAvatarChipIncluded && <ContactIcon size={20} />}
+      </XStack>
       <XStack space={'$1'} style={{ alignItems: 'center' }}>
         <Text size={13} color="#647084">
           {getFormattedValidatorAddress(address)}

From 2785e03c44e7bd451fa8dbb1a3f0b43696f8a3c3 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 11:41:43 +0200
Subject: [PATCH 055/131] fix: change validator number to name

---
 src/components/General/ValidatorProfile.tsx            |  8 ++++----
 src/constants.ts                                       |  8 ++++----
 .../ManagementTable/ManagementTable.tsx                | 10 +++++-----
 .../ManagementTable/ManagementTableRow.tsx             |  2 +-
 src/pages/ValidatorOnboarding/Deposit/Deposit.tsx      |  2 +-
 .../Deposit/ValidatorRequest/ValidatorRequest.tsx      |  6 +++---
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/General/ValidatorProfile.tsx b/src/components/General/ValidatorProfile.tsx
index e6c7eb0f..917d5e6e 100644
--- a/src/components/General/ValidatorProfile.tsx
+++ b/src/components/General/ValidatorProfile.tsx
@@ -4,21 +4,21 @@ import { XStack } from 'tamagui'
 import ValidatorNameAddress from './ValidatorNameAddress'
 
 type ValidatorProfileProps = {
-  number: number
+  name: string
   address: string
 }
 
-const ValidatorProfile = ({ number, address }: ValidatorProfileProps) => {
+const ValidatorProfile = ({ name, address }: ValidatorProfileProps) => {
   return (
     <XStack space={'$2'}>
       <Avatar
         type="user"
         size={32}
         src="/icons/validator-request.svg"
-        name={number.toString()}
+        name={name}
         indicator="online"
       />
-      <ValidatorNameAddress number={number} address={address} />
+      <ValidatorNameAddress name={name} address={address} />
     </XStack>
   )
 }
diff --git a/src/constants.ts b/src/constants.ts
index 42ed82d7..ac5240b3 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -73,7 +73,7 @@ export const VALIDATOR_TABS_MANAGEMENT = [
 
 export const VALIDATORS_DATA = [
   {
-    number: 1,
+    name: '1',
     address: 'zQ3asdf9d4Gs0',
     balance: 32.0786,
     income: 0.0786,
@@ -83,7 +83,7 @@ export const VALIDATORS_DATA = [
     status: 'Active',
   },
   {
-    number: 1,
+    name: '1',
     address: 'zQ3asdf9d4Gs0',
     balance: 32.0786,
     income: 0.0786,
@@ -93,7 +93,7 @@ export const VALIDATORS_DATA = [
     status: 'Active',
   },
   {
-    number: 1,
+    name: '1',
     address: 'zQ3asdf9d4Gs0',
     balance: 32.0786,
     income: 0.0786,
@@ -103,7 +103,7 @@ export const VALIDATORS_DATA = [
     status: 'Active',
   },
   {
-    number: 1,
+    name: '1',
     address: 'zQ3asdf9d4Gs0',
     balance: 32.0786,
     income: 0.0786,
diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
index ee7306e5..05a5d099 100644
--- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
+++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
@@ -15,7 +15,7 @@ type ManagementTableProps = {
 }
 
 export type Validator = {
-  number: number
+  name: string
   address: string
   balance: number
   income: number
@@ -35,12 +35,12 @@ const isValidStatus = (validatorStatus: string, tabStatus: string) => {
   return false
 }
 
-const isValidNumberOrAddress = (
-  validatorNumber: number,
+const isValidNameOrAddress = (
+  validatorName: string,
   validatorAddress: string,
   searchValue: string,
 ) => {
-  if (validatorNumber.toString().includes(searchValue) || validatorAddress.includes(searchValue)) {
+  if (validatorName.includes(searchValue) || validatorAddress.includes(searchValue)) {
     return true
   }
   return false
@@ -61,7 +61,7 @@ const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTabl
   const filteredValidators = useMemo(() => {
     return validators
       .filter(validator => isValidStatus(validator.status, tab))
-      .filter(validator => isValidNumberOrAddress(validator.number, validator.address, searchValue))
+      .filter(validator => isValidNameOrAddress(validator.name, validator.address, searchValue))
   }, [validators, tab, searchValue])
 
   const handleSelectAll = () => {
diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx
index 7a21bafe..6aefee3d 100644
--- a/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx
+++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx
@@ -32,7 +32,7 @@ const ManagementTableRow = ({ validator, isAllSelected }: ManagementTableRowProp
         />
       </td>
       <td>
-        <ValidatorProfile number={validator.number} address={validator.address} />
+        <ValidatorProfile name={validator.name} address={validator.address} />
       </td>
       <td>
         <Text size={15} color={'#647084'} weight={'semibold'}>
diff --git a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
index b6b5d785..81280e0b 100644
--- a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
+++ b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
@@ -52,7 +52,7 @@ const Deposit = () => {
       {Array.from({ length: validatorCount }).map((_, index) => (
         <ValidatorRequest
           key={index}
-          number={index + 1}
+          name={(index + 1).toString()}
           isTransactionConfirmation={isTransactionConfirmation}
         />
       ))}
diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx
index 757907c3..8cb84cbd 100644
--- a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx
+++ b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx
@@ -5,11 +5,11 @@ import TransactionStatus from './TransactionStatus'
 import ValidatorProfile from '../../../../components/General/ValidatorProfile'
 
 type ValidatorRequestProps = {
-  number: number
+  name: string
   isTransactionConfirmation?: boolean
 }
 
-const ValidatorRequest = ({ number, isTransactionConfirmation }: ValidatorRequestProps) => {
+const ValidatorRequest = ({ name, isTransactionConfirmation }: ValidatorRequestProps) => {
   let transactionStatus = 'Complete'
   const isTransactionCompleted = transactionStatus === 'Complete'
 
@@ -17,7 +17,7 @@ const ValidatorRequest = ({ number, isTransactionConfirmation }: ValidatorReques
     <YStack space={'$3'} style={{ width: '100%' }}>
       <XStack style={{ justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
         <XStack style={{ justifyContent: 'space-between', width: '44%', alignItems: 'center' }}>
-          <ValidatorProfile number={number} address={'zQ3asdf9d4Gs0'} />
+          <ValidatorProfile name={name} address={'zQ3asdf9d4Gs0'} />
           <Text size={13} color="#647084" weight={'semibold'}>
             Keys Generated
           </Text>

From f777542dc12fbfd95f6cc3c86d63b994f61141e7 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 11:42:39 +0200
Subject: [PATCH 056/131] feat: use new validator name address component to
 validator list item

---
 .../ValidatorsTabs/ValidatorListItem.tsx      | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
index e73c63ae..e83a2666 100644
--- a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
+++ b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
@@ -1,9 +1,8 @@
 import { useState } from 'react'
-import { XStack, YStack } from 'tamagui'
-import { Avatar, Checkbox, Text } from '@status-im/components'
-import { VerifiedIcon, ContactIcon } from '@status-im/icons'
+import { XStack } from 'tamagui'
+import { Avatar, Checkbox } from '@status-im/components'
 
-import { getFormattedValidatorAddress } from '../../../../utilities'
+import ValidatorNameAddress from '../../ValidatorNameAddress'
 
 type ValidatorListItemProps = {
   name: string
@@ -54,16 +53,12 @@ const ValidatorListItem = ({
             [11, 20],
           ]}
         />
-        <YStack pl="8px">
-          <XStack space={'$1'} alignItems="center">
-            <Text size={13} weight={'semibold'}>
-              Validator {name}
-            </Text>
-            {isVerified && <VerifiedIcon size={20} />}
-            {isAvatarChipIncluded && <ContactIcon size={20} />}
-          </XStack>
-          <Text size={13}>{getFormattedValidatorAddress(validatorAddress)}</Text>
-        </YStack>
+        <ValidatorNameAddress
+          name={name}
+          address={validatorAddress}
+          isVerified={isVerified}
+          isAvatarChipIncluded={isAvatarChipIncluded}
+        />
       </XStack>
       {isSelected && <Checkbox id={name} variant="outline" size={20} selected={isSelected} />}
     </XStack>

From 0dd85010cdd2865bf2ef838f2fb975ccb0ac50a9 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 17:21:21 +0200
Subject: [PATCH 057/131] feat: add more space for right side bar validator

---
 .../General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx   | 2 +-
 src/components/General/ValidatorNameAddress.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
index e83a2666..15c451db 100644
--- a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
+++ b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
@@ -40,7 +40,7 @@ const ValidatorListItem = ({
       }}
       width="92%"
     >
-      <XStack alignItems="center">
+      <XStack alignItems="center" space={'$2'}>
         <Avatar
           type="user"
           size={32}
diff --git a/src/components/General/ValidatorNameAddress.tsx b/src/components/General/ValidatorNameAddress.tsx
index 37f6a0a5..24b52dff 100644
--- a/src/components/General/ValidatorNameAddress.tsx
+++ b/src/components/General/ValidatorNameAddress.tsx
@@ -30,7 +30,7 @@ const ValidatorNameAddress = ({
         {isVerified && <VerifiedIcon size={20} />}
         {isAvatarChipIncluded && <ContactIcon size={20} />}
       </XStack>
-      <XStack space={'$1'} style={{ alignItems: 'center' }}>
+      <XStack space={'$1'} alignItems="center">
         <Text size={13} color="#647084">
           {getFormattedValidatorAddress(address)}
         </Text>

From 8dca2e7595d091ed36940ac928498e1fb4155fbd Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 17:25:58 +0200
Subject: [PATCH 058/131] feat: create and use copy function for utilities

---
 src/components/General/ValidatorNameAddress.tsx               | 4 ++--
 src/pages/PairDevice/GenerateId.tsx                           | 3 ++-
 .../ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx      | 4 ++--
 src/utilities.ts                                              | 4 ++++
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/General/ValidatorNameAddress.tsx b/src/components/General/ValidatorNameAddress.tsx
index 24b52dff..fc30c1f3 100644
--- a/src/components/General/ValidatorNameAddress.tsx
+++ b/src/components/General/ValidatorNameAddress.tsx
@@ -2,7 +2,7 @@ import { Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
 import { CopyIcon, VerifiedIcon, ContactIcon } from '@status-im/icons'
 
-import { getFormattedValidatorAddress } from '../../utilities'
+import { copyFunction, getFormattedValidatorAddress } from '../../utilities'
 
 type ValidatorNameAddressProps = {
   name: string
@@ -18,7 +18,7 @@ const ValidatorNameAddress = ({
   isAvatarChipIncluded,
 }: ValidatorNameAddressProps) => {
   const onCopyAddress = () => {
-    navigator.clipboard.writeText(address)
+    copyFunction(address)
   }
 
   return (
diff --git a/src/pages/PairDevice/GenerateId.tsx b/src/pages/PairDevice/GenerateId.tsx
index bdd0d04c..0b037249 100644
--- a/src/pages/PairDevice/GenerateId.tsx
+++ b/src/pages/PairDevice/GenerateId.tsx
@@ -7,6 +7,7 @@ import { Separator, YStack } from 'tamagui'
 import { v4 as uuidv4 } from 'uuid'
 
 import styles from './pairDevice.module.css'
+import { copyFunction } from '../../utilities'
 
 type GenerateIdProps = {
   isAwaitingPairing: boolean
@@ -24,7 +25,7 @@ const GenerateId = ({ isAwaitingPairing }: GenerateIdProps) => {
   }
 
   const copyGeneratedIdHandler = () => {
-    navigator.clipboard.writeText(generatedId)
+    copyFunction(generatedId)
   }
 
   return (
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 59c8b928..b2b5259c 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -9,6 +9,7 @@ import wordlist from 'web-bip39/wordlists/english'
 import { RootState } from '../../../redux/store'
 import { setGeneratedMnemonic } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
 import styles from './index.module.css'
+import { copyFunction } from '../../../utilities'
 
 type RecoveryPhraseProps = {
   isKeystoreFiles: boolean
@@ -39,8 +40,7 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
   }
 
   const copyRecoveryPhraseHandler = () => {
-    const text = generatedMnemonic.join(' ')
-    navigator.clipboard.writeText(text)
+    copyFunction(generatedMnemonic.join(' '))
 
     if (!isTimeoutActive) {
       setIsCopied(true)
diff --git a/src/utilities.ts b/src/utilities.ts
index 2db499a0..518321f0 100644
--- a/src/utilities.ts
+++ b/src/utilities.ts
@@ -68,3 +68,7 @@ export const getHeightPercentages = (amountOfElements: number) => {
 
   return `${percentages}%`
 }
+
+export const copyFunction = (text: string) => {
+  navigator.clipboard.writeText(text)
+}
\ No newline at end of file

From 6bece926d989388c6863b7f2c5aecbe6ef161fc3 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:01:50 +0200
Subject: [PATCH 059/131] feat: add copy button to wallet address

---
 .../General/RightSideBar/RightSidebar.tsx     | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/General/RightSideBar/RightSidebar.tsx b/src/components/General/RightSideBar/RightSidebar.tsx
index 10544a87..f682b24b 100644
--- a/src/components/General/RightSideBar/RightSidebar.tsx
+++ b/src/components/General/RightSideBar/RightSidebar.tsx
@@ -1,5 +1,6 @@
 import { Avatar, Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
+import { CopyIcon } from '@status-im/icons'
 
 import AddCard from '../AddCards/AddCard'
 import AlertsList from './AlertsList'
@@ -7,9 +8,13 @@ import LogsList from './LogsList'
 import DiamondCard from './DiamondCard'
 import ValidatorsCount from './ValidatorsCount'
 import ValidatorsTabs from './ValidatorsTabs/ValidatorsTabs'
-import { getFormattedWalletAddress } from '../../../utilities'
+import { copyFunction, getFormattedWalletAddress } from '../../../utilities'
 
 const RightSidebar = () => {
+  const onCopyWalletAddress = () => {
+    copyFunction('0xb9dc35')
+  }
+
   return (
     <YStack
       width={'320px'}
@@ -25,11 +30,19 @@ const RightSidebar = () => {
     >
       <XStack alignItems="center">
         <Avatar type="user" size={32} name="Ethereum Mainnet" />
-        <YStack pl="8px">
+        <YStack>
           <Text size={15} weight={'semibold'}>
             Ethereum Mainnet
           </Text>
-          <Text size={13}>{getFormattedWalletAddress('0xb9dc35')}</Text>
+          <XStack space={'$1'} alignItems="center">
+            <Text size={13}>{getFormattedWalletAddress('0xb9dc35')}</Text>
+            <CopyIcon
+              size={16}
+              color="#647084"
+              style={{ cursor: 'pointer' }}
+              onClick={onCopyWalletAddress}
+            />
+          </XStack>
         </YStack>
       </XStack>
       <XStack space={'$2'} alignItems="center" justifyContent="space-between">

From 2a21c9f736e1adf620119f483b39bae577c59f8f Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:02:41 +0200
Subject: [PATCH 060/131] fix: add space between avatar and address

---
 src/components/General/RightSideBar/RightSidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/General/RightSideBar/RightSidebar.tsx b/src/components/General/RightSideBar/RightSidebar.tsx
index f682b24b..7804bb5a 100644
--- a/src/components/General/RightSideBar/RightSidebar.tsx
+++ b/src/components/General/RightSideBar/RightSidebar.tsx
@@ -28,7 +28,7 @@ const RightSidebar = () => {
         overflowY: 'auto',
       }}
     >
-      <XStack alignItems="center">
+      <XStack alignItems="center" space={'$2'}>
         <Avatar type="user" size={32} name="Ethereum Mainnet" />
         <YStack>
           <Text size={15} weight={'semibold'}>

From 6be6caf89b63a3d3b6999cdaf3615a6f66873ad6 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:07:09 +0200
Subject: [PATCH 061/131] fix: stories with changed number to name

---
 src/components/General/ValidatorNameAddress.stories.tsx | 2 +-
 src/components/General/ValidatorProfile.stories.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/General/ValidatorNameAddress.stories.tsx b/src/components/General/ValidatorNameAddress.stories.tsx
index 0e79a7f9..fa3abbfd 100644
--- a/src/components/General/ValidatorNameAddress.stories.tsx
+++ b/src/components/General/ValidatorNameAddress.stories.tsx
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    number: 1,
+    name: '1',
     address: 'zQ3asdf9d4Gs0',
   },
 }
diff --git a/src/components/General/ValidatorProfile.stories.tsx b/src/components/General/ValidatorProfile.stories.tsx
index 04f5be39..ca03e7f6 100644
--- a/src/components/General/ValidatorProfile.stories.tsx
+++ b/src/components/General/ValidatorProfile.stories.tsx
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    number: 1,
+    name: '1',
     address: 'zQ3asdf9d4Gs0',
   },
 }

From c40c15b70fc5cf08eb48e556b40bdfbae43e3873 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:21:24 +0200
Subject: [PATCH 062/131] fix: show subtitles

---
 src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 65fd7508..be023844 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -20,6 +20,7 @@ type FormStepperProps = {
 }
 
 const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
+  const dispatch = useDispatch()
   const isStepVisible = (index: number) => {
     if (windowWidth < 740) {
       const start = Math.max(0, activeStep - 1)
@@ -30,8 +31,6 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
     }
   }
 
-  const dispatch = useDispatch()
-
   const changeStepOnClickHandler = (index: number) => {
     if (activeStep > index) {
       dispatch(setActiveStep(index))
@@ -39,6 +38,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
   }
 
   const visibleSteps = steps.filter((_, index) => isStepVisible(index))
+
   return (
     <Stepper
       activeStep={activeStep}
@@ -52,7 +52,6 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
         height: 'fit-content',
         padding: 0,
         marginBottom: '3rem',
-        overflow: 'hidden',
       }}
     >
       {visibleSteps.map(step => {

From 16efe2d895091631a8ebe9307229933eccc55bdc Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:24:36 +0200
Subject: [PATCH 063/131] fix: move steps to constants

---
 src/constants.ts                                |  9 +++++++++
 .../FormStepper/FormStepper.tsx                 | 17 ++++-------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/constants.ts b/src/constants.ts
index ac5240b3..1c6a6033 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -31,6 +31,15 @@ export const KEYSTORE_FILES = 'KeystoreFiles'
 export const RECOVERY_PHRASE = 'Recovery Phrase'
 export const BOTH_KEY_AND_RECOVERY = 'Both KeystoreFiles & Recovery Phrase'
 export const ETH_PER_VALIDATOR = 32
+export const FORM_STEPS = [
+  { label: 'Overview', subtitle: 'Get Started' },
+  { label: 'Advisories', subtitle: 'Understand your Duties' },
+  { label: 'Client Setup', subtitle: 'Execution & Consensus' },
+  { label: 'Validator Setup', subtitle: 'Validators & Withdrawal' },
+  { label: 'Key Generation', subtitle: 'Secure your Keypairs' },
+  { label: 'Deposit', subtitle: 'Stake your ETH' },
+  { label: 'Activation', subtitle: 'Complete Setup' },
+]
 
 export const MAC = 'MacOS'
 export const WINDOWS = 'Windows'
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index be023844..05737ce1 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -2,18 +2,9 @@ import { Stepper, Step } from 'react-form-stepper'
 import { useDispatch } from 'react-redux'
 
 import { setActiveStep } from '../../../redux/ValidatorOnboarding/slice'
+import { FORM_STEPS } from '../../../constants'
 import './FormStepper.css'
 
-const steps = [
-  { label: 'Overview', subtitle: 'Get Started' },
-  { label: 'Advisories', subtitle: 'Understand your Duties' },
-  { label: 'Client Setup', subtitle: 'Execution & Consensus' },
-  { label: 'Validator Setup', subtitle: 'Validators & Withdrawal' },
-  { label: 'Key Generation', subtitle: 'Secure your Keypairs' },
-  { label: 'Deposit', subtitle: 'Stake your ETH' },
-  { label: 'Activation', subtitle: 'Complete Setup' },
-]
-
 type FormStepperProps = {
   activeStep: number
   windowWidth: number
@@ -24,7 +15,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
   const isStepVisible = (index: number) => {
     if (windowWidth < 740) {
       const start = Math.max(0, activeStep - 1)
-      const end = Math.min(steps.length - 1, activeStep + 1)
+      const end = Math.min(FORM_STEPS.length - 1, activeStep + 1)
       return index >= start && index <= end
     } else {
       return true
@@ -37,7 +28,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
     }
   }
 
-  const visibleSteps = steps.filter((_, index) => isStepVisible(index))
+  const visibleSteps = FORM_STEPS.filter((_, index) => isStepVisible(index))
 
   return (
     <Stepper
@@ -55,7 +46,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
       }}
     >
       {visibleSteps.map(step => {
-        const originalIndex = steps.indexOf(step)
+        const originalIndex = FORM_STEPS.indexOf(step)
         return (
           <Step
             key={originalIndex}

From 66baf24d8c767622b383ffffcccfeafa63b75d7b Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:26:41 +0200
Subject: [PATCH 064/131] fix: remove commented old code

---
 .../ValidatorOnboarding/Overview/Overview.tsx | 83 ++++++++-----------
 1 file changed, 36 insertions(+), 47 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 63fb2258..724c5364 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -8,54 +8,43 @@ import './overviewLayout.css'
 
 const Overview = () => {
   return (
-    <>
-      <OverviewWrapper
-        imgHeight="250%"
-        rightImageSrc="./background-images/sync-status-background.png"
-      >
-        <YStack>
-          <YStack space={'$5'} width="150%">
-            <Text size={27} weight={'semibold'} marginTop={'2rem'}>
-              Overview
-            </Text>
-            <Text size={19}>
-              Becoming a validator is a big responsibility with important preparation steps. Only
-              start the deposit process when you're ready.
-            </Text>
-            <Text size={15} color="#939BA1">
-              By running a validator, you'll be responsible for securing the network and receive
-              continuous payouts for actions that help the network reach consensus.
-            </Text>
-            <Text size={15} color="#939BA1">
-              Since the successful transition to proof-of-stake via The Merge, Ethereum is fully
-              secured by proof-of-stake validators. By running a validator, you'll be helping to
-              secure the Ethereum network.
-            </Text>
-            <LinkWithArrow
-              text="Learn More"
-              to={'/'}
-              arrowRight={true}
-              style={{ marginBottom: '1%', fontSize: '13px' }}
-            />
-          </YStack>
-          <XStack space={'$3'} className="overview-cards">
-            <OverviewCard text={'Current APR'} value={'4.40%'} />
-            <OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
-            <OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />
-            <OverviewCard text={'Validator Queue'} value={'92603'} />
-          </XStack>
-        </YStack>
-      </OverviewWrapper>
-      {/* <section className="layout-right">
-        <div className="image-container">
-          <img
-            src="./background-images/sync-status-background.png"
-            alt="background"
-            className="background-img"
+    <OverviewWrapper
+      imgHeight="250%"
+      rightImageSrc="./background-images/sync-status-background.png"
+    >
+      <YStack>
+        <YStack space={'$5'} width="150%">
+          <Text size={27} weight={'semibold'} marginTop={'2rem'}>
+            Overview
+          </Text>
+          <Text size={19}>
+            Becoming a validator is a big responsibility with important preparation steps. Only
+            start the deposit process when you're ready.
+          </Text>
+          <Text size={15} color="#939BA1">
+            By running a validator, you'll be responsible for securing the network and receive
+            continuous payouts for actions that help the network reach consensus.
+          </Text>
+          <Text size={15} color="#939BA1">
+            Since the successful transition to proof-of-stake via The Merge, Ethereum is fully
+            secured by proof-of-stake validators. By running a validator, you'll be helping to
+            secure the Ethereum network.
+          </Text>
+          <LinkWithArrow
+            text="Learn More"
+            to={'/'}
+            arrowRight={true}
+            style={{ marginBottom: '1%', fontSize: '13px' }}
           />
-        </div>
-      </section> */}
-    </>
+        </YStack>
+        <XStack space={'$3'} className="overview-cards">
+          <OverviewCard text={'Current APR'} value={'4.40%'} />
+          <OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
+          <OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />
+          <OverviewCard text={'Validator Queue'} value={'92603'} />
+        </XStack>
+      </YStack>
+    </OverviewWrapper>
   )
 }
 

From 419d6a0a9119b53cda1a2624cdf49eb0bbb671ee Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:37:15 +0200
Subject: [PATCH 065/131] fix: remove numbers from stepper

---
 src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 05737ce1..148df621 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -77,7 +77,7 @@ const stepStyle = {
   completedTextColor: '#ffffff',
   inactiveTextColor: '#000000',
   size: '20px',
-  circleFontSize: '10px',
+  circleFontSize: '0px',
   labelFontSize: '14px',
   borderRadius: '50%',
   fontWeight: 700,

From 9e489074006b2f5e1b3f15e414cd39176c4fdb55 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:38:08 +0200
Subject: [PATCH 066/131] feat: increase size of step

---
 src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 148df621..56fab68b 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -76,7 +76,7 @@ const stepStyle = {
   activeTextColor: '#ffffff',
   completedTextColor: '#ffffff',
   inactiveTextColor: '#000000',
-  size: '20px',
+  size: '28px',
   circleFontSize: '0px',
   labelFontSize: '14px',
   borderRadius: '50%',

From 4346aa7bfeb5ea33303fc2ecf0fb93c77fa12956 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:44:36 +0200
Subject: [PATCH 067/131] fix: move margin

After it is not a valid prop for status text
---
 src/pages/ValidatorOnboarding/Overview/Overview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 724c5364..c4f648d8 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -13,8 +13,8 @@ const Overview = () => {
       rightImageSrc="./background-images/sync-status-background.png"
     >
       <YStack>
-        <YStack space={'$5'} width="150%">
-          <Text size={27} weight={'semibold'} marginTop={'2rem'}>
+        <YStack space={'$5'} width="150%" marginTop={'2rem'}>
+          <Text size={27} weight={'semibold'}>
             Overview
           </Text>
           <Text size={19}>

From 86f45d692fdd5d9c29119102d4463abcea211273 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:45:35 +0200
Subject: [PATCH 068/131] fix: validator request story name

---
 .../Deposit/ValidatorRequest/ValidatorRequest.stories.ts    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.stories.ts b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.stories.ts
index 6960605a..0aab50d2 100644
--- a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.stories.ts
+++ b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.stories.ts
@@ -16,21 +16,21 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    number: 1,
+    name: '1',
     isTransactionConfirmation: false,
   },
 }
 
 export const TransactionConfirmation: Story = {
   args: {
-    number: 1,
+    name: '1',
     isTransactionConfirmation: true,
   },
 }
 
 export const BigNumber: Story = {
   args: {
-    number: 123456789,
+    name: '123456789',
     isTransactionConfirmation: false,
   },
 }

From 9cba0d88d479395e3b211446d9e27908c5bcdf2b Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 18 Jan 2024 18:47:21 +0200
Subject: [PATCH 069/131] clear code

---
 .../ValidatorSetup/ConsensusClient/ConsensusSelection.tsx       | 2 +-
 .../ValidatorSetup/ValidatorSetup/ExecClientCards.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
index 8f0cd62d..e6bcae45 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
@@ -68,7 +68,7 @@ const ConsensusSelection = () => {
         Install Consensus client
       </TextTam>
 
-      <XStack space={'$8'} flexWrap="wrap">
+    <XStack space={'$8'} flexWrap="wrap">
         <ConsensusClientCard name={clients[0].name} icon={clients[0].icon} />
         <YStack width={'67%'} maxWidth="550px" space={'$4'}>
           <Text size={19}>The resource efficient Ethereum Clients.</Text>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
index 99566925..3fc27f18 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
@@ -1,4 +1,4 @@
-import { Stack, XStack, YStack } from 'tamagui'
+import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 
 import ExecClientCard from './ExecClientCard'

From 0bf43d144225ec55090cef794902ee3e742749b6 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 18 Jan 2024 18:50:07 +0200
Subject: [PATCH 070/131] format code

---
 src/components/General/ResponsiveStack.tsx           | 12 ++++++++++--
 .../ValidatorOnboarding/Overview/validatorLayout.css |  1 -
 .../ConsensusClient/ConsensusSelection.tsx           |  2 +-
 .../ValidatorSetup/ValidatorInstalling/OSCard.tsx    |  5 +----
 .../ValidatorSetup/ValidatorInstalling/OSCards.tsx   |  7 ++++++-
 .../ValidatorInstalling/ValidatorInstall.tsx         |  2 +-
 .../ValidatorSetup/ValidatorSetup/ExecClientCard.tsx |  1 -
 src/utilities.ts                                     |  2 +-
 8 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/General/ResponsiveStack.tsx b/src/components/General/ResponsiveStack.tsx
index 3e79c6ad..aaa4dda6 100644
--- a/src/components/General/ResponsiveStack.tsx
+++ b/src/components/General/ResponsiveStack.tsx
@@ -10,10 +10,18 @@ type ResponsiveStackProps = {
 
 const ResponsiveStack = ({ isVerticalAligned, children, space, style }: ResponsiveStackProps) => {
   if (isVerticalAligned) {
-    return <YStack space={space} style={style}>{children}</YStack>
+    return (
+      <YStack space={space} style={style}>
+        {children}
+      </YStack>
+    )
   }
 
-  return <XStack space={space} style={style}>{children}</XStack>
+  return (
+    <XStack space={space} style={style}>
+      {children}
+    </XStack>
+  )
 }
 
 export default ResponsiveStack
diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
index 56e39652..77ea111b 100644
--- a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
@@ -1,4 +1,3 @@
- 
 .layout::after {
   display: block;
   content: '';
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
index e6bcae45..8f0cd62d 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
@@ -68,7 +68,7 @@ const ConsensusSelection = () => {
         Install Consensus client
       </TextTam>
 
-    <XStack space={'$8'} flexWrap="wrap">
+      <XStack space={'$8'} flexWrap="wrap">
         <ConsensusClientCard name={clients[0].name} icon={clients[0].icon} />
         <YStack width={'67%'} maxWidth="550px" space={'$4'}>
           <Text size={19}>The resource efficient Ethereum Clients.</Text>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
index 72087ac2..3a48eac8 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
@@ -11,10 +11,7 @@ type OSCardProps = {
 
 const OSCard = ({ name, icon, onClick, isSelected }: OSCardProps) => {
   return (
-    <YStack
-      className={`osCard ${isSelected ? 'selected' : ''}`}
-      onPress={onClick}
-    >
+    <YStack className={`osCard ${isSelected ? 'selected' : ''}`} onPress={onClick}>
       <Text size={19} weight={'semibold'}>
         {name}
       </Text>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
index d7738b78..e83b8297 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
@@ -16,7 +16,12 @@ type OSCardsProps = {
 
 const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
-    <XStack className="osCardsContainer" justifyContent={'space-between'} my={'15px'} flexWrap="wrap">
+    <XStack
+      className="osCardsContainer"
+      justifyContent={'space-between'}
+      my={'15px'}
+      flexWrap="wrap"
+    >
       {cards.map(card => (
         <OSCard
           key={card.name}
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
index f01a19d6..7b0ad056 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
@@ -18,7 +18,7 @@ const ValidatorSetupInstall = () => {
   }
 
   return (
-    <YStack style={{ padding: '26px 32px', width:'fit-content' }}>
+    <YStack style={{ padding: '26px 32px', width: 'fit-content' }}>
       <Text size={27} weight={'semibold'}>
         Validator Setup
       </Text>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
index ba147c27..6a1e625f 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
@@ -50,7 +50,6 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
               alignItems: 'center',
               padding: '3px 6px',
               borderRadius: '67px',
-              
             }}
           >
             <Text size={11} color="#fff">
diff --git a/src/utilities.ts b/src/utilities.ts
index 518321f0..024f179b 100644
--- a/src/utilities.ts
+++ b/src/utilities.ts
@@ -71,4 +71,4 @@ export const getHeightPercentages = (amountOfElements: number) => {
 
 export const copyFunction = (text: string) => {
   navigator.clipboard.writeText(text)
-}
\ No newline at end of file
+}

From 47c79ad8b5e1466a138ae94faec4350618547596 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:51:11 +0200
Subject: [PATCH 071/131] fix: sub title step left position

---
 src/pages/ValidatorOnboarding/FormStepper/FormStepper.css | 2 +-
 src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx     | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
index 6b161034..fb5373fa 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
@@ -53,7 +53,7 @@ span[class*='Connector-'] {
   content: attr(data-subtitle);
   position: absolute;
   top: calc(100% + 4px);
-  left: 8px;
+  left: 9px;
   font-size: 12px;
   font-family: 'Inter', sans-serif;
   color: #a2a9b0;
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 6aa3ea17..6888c3b4 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -58,13 +58,11 @@ const ValidatorOnboarding = () => {
         <ValidatorBoxWrapper>
           {activeStep === 0 && <Overview />}
           {activeStep === 1 && <Advisories />}
-
           {activeStep === 2 && subStepValidatorSetup === 0 && <ValidatorSetup />}
           {activeStep === 2 && subStepValidatorSetup === 1 && <ValidatorSetupInstall />}
           {activeStep === 2 && subStepValidatorSetup === 2 && <ConsensusSelection />}
           {activeStep === 2 && subStepValidatorSetup === 3 && <ActivationValidatorSetup />}
           {activeStep === 3 && <ClientSetup />}
-
           {activeStep === 4 && <KeyGeneration />}
           {activeStep === 5 && <Deposit />}
           {activeStep === 6 && (

From 47ed76a0f2d86e0006e6fd832bc3023de7d0e5ef Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:55:50 +0200
Subject: [PATCH 072/131] fix: remove window width from stepper

---
 .../FormStepper/FormStepper.tsx                | 18 +++++++++---------
 .../ValidatorOnboarding.tsx                    |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 56fab68b..3b51e8c2 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -7,19 +7,19 @@ import './FormStepper.css'
 
 type FormStepperProps = {
   activeStep: number
-  windowWidth: number
 }
 
-const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
+const FormStepper = ({ activeStep }: FormStepperProps) => {
   const dispatch = useDispatch()
+
   const isStepVisible = (index: number) => {
-    if (windowWidth < 740) {
-      const start = Math.max(0, activeStep - 1)
-      const end = Math.min(FORM_STEPS.length - 1, activeStep + 1)
-      return index >= start && index <= end
-    } else {
-      return true
-    }
+    // if (windowWidth < 1025) {
+    //   const start = activeStep - 1
+    //   const end = Math.min(FORM_STEPS.length - 1, activeStep + 1)
+    //   return index >= start && index <= end
+    // } else {
+    return true
+    // }
   }
 
   const changeStepOnClickHandler = (index: number) => {
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 6888c3b4..7d7e39d0 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -54,7 +54,7 @@ const ValidatorOnboarding = () => {
           titleSize={19}
           subtitle="Earn Rewards for securing the Ethereum Network"
         />
-        <FormStepper activeStep={activeStep} windowWidth={windowWidth} />
+        <FormStepper activeStep={activeStep} />
         <ValidatorBoxWrapper>
           {activeStep === 0 && <Overview />}
           {activeStep === 1 && <Advisories />}

From 0c610343d140e06252d18966b758d96906a2d9f2 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:56:53 +0200
Subject: [PATCH 073/131] fix: clean validator on boarding code

---
 .../ValidatorOnboarding/ValidatorOnboarding.tsx   | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 7d7e39d0..a271b6fc 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -1,5 +1,4 @@
 import { YStack } from 'tamagui'
-
 import { useSelector } from 'react-redux'
 
 import { RootState } from '../../redux/store'
@@ -15,25 +14,11 @@ import Advisories from './Advisories/Advisories'
 import ValidatorSetup from './ValidatorSetup/ValidatorSetup/ValidatorSetup'
 import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstalling/ValidatorInstall'
 import ContinueButton from './ContinueButton'
-
 import ActivationValidatorSetup from './ValidatorSetup/ValidatorActivation/ActivationValidatorSetup'
-import './layoutGradient.css'
-
 import Deposit from './Deposit/Deposit'
-
 import './layoutGradient.css'
-import { useEffect, useState } from 'react'
 
 const ValidatorOnboarding = () => {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth)
-    }
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
   const { activeStep, subStepValidatorSetup } = useSelector(
     (state: RootState) => state.validatorOnboarding,
   )

From 5ca1529dc1bb97fb1f075686297a107cc3207a6a Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 21:55:50 +0200
Subject: [PATCH 074/131] feat: create custom hook for window size

---
 src/hooks/useWindowSize.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/hooks/useWindowSize.ts

diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts
new file mode 100644
index 00000000..547812bc
--- /dev/null
+++ b/src/hooks/useWindowSize.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react'
+
+export const useWindowSize = () => {
+  const [size, setSize] = useState({ width: 0, height: 0 })
+
+  useEffect(() => {
+    function handleResize() {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    handleResize()
+
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return size
+}

From 1a5ed0b07f197835c4a106319508bf1647f394de Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 18 Jan 2024 21:56:29 +0200
Subject: [PATCH 075/131] move constants in place

---
 src/constants.ts                              | 36 +++++++++++++++++++
 .../Advisories/Advisories.tsx                 | 36 +------------------
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/src/constants.ts b/src/constants.ts
index 1c6a6033..0e110eeb 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,3 +1,6 @@
+type AdvisoryTopicsType = {
+  [key: string]: string[]
+}
 // App
 export const apiKey = '1730eff0-9d50-4382-a3fe-89f0d34a2070'
 const INFURA_KEY = 'f25e905e25a545dcaad2c939530b91db'
@@ -122,3 +125,36 @@ export const VALIDATORS_DATA = [
     status: 'Active',
   },
 ]
+//Validator onboarding -> advisories -> text 
+export const advisoryTopics: AdvisoryTopicsType = {
+  'Proof of Stake': [
+    'Proof of Stake systems require validators to hold and lock up a certain amount of cryptocurrency to participate.',
+    'In Proof of Stake, the chances of creating a block is proportional to the amount of cryptocurrency held.',
+    'Unlike Proof of Work, Proof of Stake aims to achieve consensus without intensive computational work.',
+  ],
+  Deposit: [
+    'Deposits are often irreversible, so ensure to double-check transaction details before confirming.',
+    'Delay in deposit acknowledgment might be due to network congestion or node synchronization.',
+    'Always keep transaction IDs or hashes for records and future references in case of disputes.',
+  ],
+  'Key Management': [
+    'Storing your private keys on a device connected to the internet is susceptible to hacks and malware.',
+    'Hardware wallets provide an added layer of security by keeping private keys isolated from online systems.',
+    'Regularly back up and encrypt your key management solutions to prevent potential losses.',
+  ],
+  'Bad Behaviour': [
+    'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing.',
+    'Running your validator keys simultaneously on two or more machines will result in slashing.*',
+    'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.',
+  ],
+  Requirements: [
+    'Ensure your system meets the minimum software and hardware requirements before initiating any operations.',
+    'Staying updated with the latest versions is vital to maintain system integrity and performance.',
+    'Failure to meet requirements might result in operational inefficiencies or security vulnerabilities.',
+  ],
+  Risks: [
+    'Cryptocurrency investments are subject to high volatility and can result in both significant gains and losses.',
+    'Always do thorough research before making investment decisions or engaging in transactions.',
+    'Be wary of phishing scams, malicious software, and too-good-to-be-true offers.',
+  ],
+}
diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
index a9e0a90a..c6a31329 100644
--- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
+++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
@@ -7,9 +7,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../../redux/store'
 import { setSubStepAdvisories } from '../../../redux/ValidatorOnboarding/Advisories/slice'
 import './advisoriesLayout.css'
-type AdvisoryTopicsType = {
-  [key: string]: string[]
-}
+
 const Advisories = () => {
   const dispatch = useDispatch()
   const { subStepAdvisories } = useSelector((state: RootState) => state.advisories)
@@ -76,35 +74,3 @@ const Advisories = () => {
 
 export default Advisories
 
-export const advisoryTopics: AdvisoryTopicsType = {
-  'Proof of Stake': [
-    'Proof of Stake systems require validators to hold and lock up a certain amount of cryptocurrency to participate.',
-    'In Proof of Stake, the chances of creating a block is proportional to the amount of cryptocurrency held.',
-    'Unlike Proof of Work, Proof of Stake aims to achieve consensus without intensive computational work.',
-  ],
-  Deposit: [
-    'Deposits are often irreversible, so ensure to double-check transaction details before confirming.',
-    'Delay in deposit acknowledgment might be due to network congestion or node synchronization.',
-    'Always keep transaction IDs or hashes for records and future references in case of disputes.',
-  ],
-  'Key Management': [
-    'Storing your private keys on a device connected to the internet is susceptible to hacks and malware.',
-    'Hardware wallets provide an added layer of security by keeping private keys isolated from online systems.',
-    'Regularly back up and encrypt your key management solutions to prevent potential losses.',
-  ],
-  'Bad Behaviour': [
-    'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing.',
-    'Running your validator keys simultaneously on two or more machines will result in slashing.*',
-    'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.',
-  ],
-  Requirements: [
-    'Ensure your system meets the minimum software and hardware requirements before initiating any operations.',
-    'Staying updated with the latest versions is vital to maintain system integrity and performance.',
-    'Failure to meet requirements might result in operational inefficiencies or security vulnerabilities.',
-  ],
-  Risks: [
-    'Cryptocurrency investments are subject to high volatility and can result in both significant gains and losses.',
-    'Always do thorough research before making investment decisions or engaging in transactions.',
-    'Be wary of phishing scams, malicious software, and too-good-to-be-true offers.',
-  ],
-}

From 764d04e556463cf21142608c6b3360018e10221f Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 18 Jan 2024 21:57:38 +0200
Subject: [PATCH 076/131] Update Advisories.tsx

---
 src/pages/ValidatorOnboarding/Advisories/Advisories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
index c6a31329..7e63774d 100644
--- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
+++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
@@ -7,6 +7,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../../redux/store'
 import { setSubStepAdvisories } from '../../../redux/ValidatorOnboarding/Advisories/slice'
 import './advisoriesLayout.css'
+import { advisoryTopics } from '../../../constants'
 
 const Advisories = () => {
   const dispatch = useDispatch()

From 48a0166f00cd5db993ca761446a7e093681a98f2 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 22:33:52 +0200
Subject: [PATCH 077/131] feat: use new hook to make stepper responsive

---
 .../FormStepper/FormStepper.tsx               | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 3b51e8c2..5b666dd4 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux'
 
 import { setActiveStep } from '../../../redux/ValidatorOnboarding/slice'
 import { FORM_STEPS } from '../../../constants'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 import './FormStepper.css'
 
 type FormStepperProps = {
@@ -11,15 +12,28 @@ type FormStepperProps = {
 
 const FormStepper = ({ activeStep }: FormStepperProps) => {
   const dispatch = useDispatch()
+  const windowSize = useWindowSize()
 
   const isStepVisible = (index: number) => {
-    // if (windowWidth < 1025) {
-    //   const start = activeStep - 1
-    //   const end = Math.min(FORM_STEPS.length - 1, activeStep + 1)
-    //   return index >= start && index <= end
-    // } else {
-    return true
-    // }
+    if (windowSize.width < 774) {
+      const start = Math.min(3, activeStep - 1)
+      const end = Math.max(FORM_STEPS.length - 5, activeStep + 1)
+      return index >= start && index <= end
+    } else if (windowSize.width < 963) {
+      const start = Math.min(2, activeStep - 1)
+      const end = Math.max(FORM_STEPS.length - 4, activeStep + 1)
+      return index >= start && index <= end
+    } else if (windowSize.width < 1152) {
+      const start = Math.min(1, activeStep - 1)
+      const end = Math.max(FORM_STEPS.length - 3, activeStep + 1)
+      return index >= start && index <= end
+    } else if (windowSize.width < 1300) {
+      const start = Math.min(0, activeStep - 1)
+      const end = Math.max(FORM_STEPS.length - 2, activeStep + 1)
+      return index >= start && index <= end
+    } else {
+      return true
+    }
   }
 
   const changeStepOnClickHandler = (index: number) => {

From 2451c7c352fb85e9b3e40b5a436978cb2ffb7685 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 22:38:09 +0200
Subject: [PATCH 078/131] feat: create function to not repeat code

---
 .../FormStepper/FormStepper.tsx               | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 5b666dd4..6385f44f 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -14,23 +14,21 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
   const dispatch = useDispatch()
   const windowSize = useWindowSize()
 
+  const getIsStepVisible = (index: number, startNumber: number, endNumber: number) => {
+    const start = Math.min(startNumber, activeStep - 1)
+    const end = Math.max(FORM_STEPS.length - endNumber, activeStep + 1)
+    return index >= start && index <= end
+  }
+
   const isStepVisible = (index: number) => {
     if (windowSize.width < 774) {
-      const start = Math.min(3, activeStep - 1)
-      const end = Math.max(FORM_STEPS.length - 5, activeStep + 1)
-      return index >= start && index <= end
+      return getIsStepVisible(index, 3, 5)
     } else if (windowSize.width < 963) {
-      const start = Math.min(2, activeStep - 1)
-      const end = Math.max(FORM_STEPS.length - 4, activeStep + 1)
-      return index >= start && index <= end
+      return getIsStepVisible(index, 2, 4)
     } else if (windowSize.width < 1152) {
-      const start = Math.min(1, activeStep - 1)
-      const end = Math.max(FORM_STEPS.length - 3, activeStep + 1)
-      return index >= start && index <= end
+      return getIsStepVisible(index, 1, 3)
     } else if (windowSize.width < 1300) {
-      const start = Math.min(0, activeStep - 1)
-      const end = Math.max(FORM_STEPS.length - 2, activeStep + 1)
-      return index >= start && index <= end
+      return getIsStepVisible(index, 0, 2)
     } else {
       return true
     }

From 10a0eb369fd33071d10599c34f7bf871e76bb809 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 22:57:38 +0200
Subject: [PATCH 079/131] feat: add min height for validator box wrapper

---
 .../ValidatorBoxWrapper/ValidatorBoxWrapper.tsx                  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx
index c52289c2..84742a95 100644
--- a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx
@@ -16,6 +16,7 @@ const ValidatorBoxWrapper = ({ children }: ValidatorBoxWrapperProps) => {
         backgroundColor: '#fff',
         zIndex: 1,
         width: '100%',
+        minHeight: '60vh',
       }}
     >
       {children}

From 4aa4cc77410293b4a880c538bea942fbc5e18a0b Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 23:02:25 +0200
Subject: [PATCH 080/131] fix: spacing of validator on boarding main card

---
 src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index a271b6fc..5c828a02 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -17,19 +17,20 @@ import ContinueButton from './ContinueButton'
 import ActivationValidatorSetup from './ValidatorSetup/ValidatorActivation/ActivationValidatorSetup'
 import Deposit from './Deposit/Deposit'
 import './layoutGradient.css'
+import { useWindowSize } from '../../hooks/useWindowSize'
 
 const ValidatorOnboarding = () => {
   const { activeStep, subStepValidatorSetup } = useSelector(
     (state: RootState) => state.validatorOnboarding,
   )
+  const windowSize = useWindowSize()
 
   return (
     <div className="gradient-wrapper">
       <YStack
         style={{
           width: '100%',
-          maxWidth: '1100px',
-          margin: '4rem auto 2rem',
+          padding: windowSize.width < 900 ? '5% 2% 3% 2%' : '3% 10% 1% 10%',
           justifyContent: 'start',
           alignItems: 'start',
         }}

From 1d5285de4222bb7a122824c2c34219880aaf7df0 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 23:05:42 +0200
Subject: [PATCH 081/131] fix: correct margin top for continue button

---
 src/pages/ValidatorOnboarding/ContinueButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx
index 2658a68d..9ddd837e 100644
--- a/src/pages/ValidatorOnboarding/ContinueButton.tsx
+++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx
@@ -124,7 +124,7 @@ const ContinueButton = () => {
         justifyContent: isActivationValScreen ? 'space-between' : 'end',
         alignItems: 'center',
         zIndex: 1000,
-        marginTop: '10px',
+        marginTop: '21px',
       }}
     >
       {isCopyPastedPhrase && (

From 8cf45335c4112ed7e8d9398e6fb5c4e235de34b6 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 18 Jan 2024 23:07:59 +0200
Subject: [PATCH 082/131] fix advisories logic

Make step checked only when it has been clicked
---
 .../Advisories/Advisories.tsx                 | 61 ++++++++++++-------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
index 7e63774d..8152ef40 100644
--- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
+++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
@@ -10,30 +10,46 @@ import './advisoriesLayout.css'
 import { advisoryTopics } from '../../../constants'
 
 const Advisories = () => {
-  const dispatch = useDispatch()
-  const { subStepAdvisories } = useSelector((state: RootState) => state.advisories)
-  const [selectedTitle, setSelectedTitle] = useState(Object.keys(advisoryTopics)[0])
+  const dispatch = useDispatch();
+  const { subStepAdvisories } = useSelector((state: RootState) => state.advisories);
+  const [completedSteps, setCompletedSteps] = useState<number[]>([]);
+  const [selectedTitle, setSelectedTitle] = useState<string>(Object.keys(advisoryTopics)[0]);
+
+  const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'];
+
+  const isCompleted = (index: number): boolean => completedSteps.includes(index);
 
-  const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅']
   const advisoriesIcons = unicodeNumbers.map((number, index) =>
-    index <= subStepAdvisories ? '✓' : number,
-  )
+    isCompleted(index) ? '✓' : number,
+  );
 
   useEffect(() => {
-    setSelectedTitle(Object.keys(advisoryTopics)[subStepAdvisories])
-  }, [subStepAdvisories])
+    setSelectedTitle(Object.keys(advisoryTopics)[subStepAdvisories]);
+    // Add the current step to the completed steps if not already there
+    setCompletedSteps((prevSteps) => {
+      if (!prevSteps.includes(subStepAdvisories)) {
+        return [...prevSteps, subStepAdvisories];
+      }
+      return prevSteps;
+    });
+  }, [subStepAdvisories]);
+
+  const handleStepClick = (title: string): void => {
+    const index = getIndexTitle(title);
+    dispatch(setSubStepAdvisories(index));
+  };
 
   const isCurrent = (currentTitle: string): boolean => {
-    const topics = Object.keys(advisoryTopics)
-    const index = topics.indexOf(currentTitle)
-    return index <= subStepAdvisories ? true : false
-  }
+    const topics = Object.keys(advisoryTopics);
+    const index = topics.indexOf(currentTitle);
+    return index === subStepAdvisories;
+  };
 
   const getIndexTitle = (title: string): number => {
-    const topics = Object.keys(advisoryTopics)
-    const index = topics.indexOf(title)
-    return index
-  }
+    const topics = Object.keys(advisoryTopics);
+    const index = topics.indexOf(title);
+    return index;
+  };
 
   return (
     <XStack className="advisories-container">
@@ -46,21 +62,21 @@ const Advisories = () => {
         {Object.keys(advisoryTopics).map((title, index) => (
           <XStack
             key={title}
-            onPress={() => dispatch(setSubStepAdvisories(getIndexTitle(title)))}
+            onPress={() => handleStepClick(title)}
             style={{ cursor: 'pointer', alignItems: 'center' }}
             space={'$2'}
           >
             <Text
               size={19}
-              weight={isCurrent(title) && 'semibold'}
-              color={isCurrent(title) ? 'blue' : ''}
+              weight={isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'}
+              color={isCompleted(index) || isCurrent(title) ? 'blue' : 'default'}
             >
               {advisoriesIcons[index]}
             </Text>
             <Text
               size={19}
-              weight={isCurrent(title) ? 'semibold' : ''}
-              color={isCurrent(title) ? 'blue' : ''}
+              weight={isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'}
+              color={isCompleted(index) || isCurrent(title) ? 'blue' : 'default'}
             >
               {title}
             </Text>
@@ -73,5 +89,4 @@ const Advisories = () => {
   )
 }
 
-export default Advisories
-
+export default Advisories;

From c1ce3f566f2d8a6906750c30c908cd726c322b03 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 23:08:28 +0200
Subject: [PATCH 083/131] fix: window size minimum and padding percentages

---
 src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 5c828a02..44a63867 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -30,7 +30,7 @@ const ValidatorOnboarding = () => {
       <YStack
         style={{
           width: '100%',
-          padding: windowSize.width < 900 ? '5% 2% 3% 2%' : '3% 10% 1% 10%',
+          padding: windowSize.width < 1000 ? '5% 2% 3% 2%' : '3% 13% 1% 13%',
           justifyContent: 'start',
           alignItems: 'start',
         }}

From 433b59a651b7f31f0cf4fb846bee69c880a90e43 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 18 Jan 2024 23:14:50 +0200
Subject: [PATCH 084/131] Update Advisories.tsx

---
 .../Advisories/Advisories.tsx                 | 54 +++++++++----------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
index 8152ef40..1ddaa4b5 100644
--- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
+++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
@@ -10,46 +10,44 @@ import './advisoriesLayout.css'
 import { advisoryTopics } from '../../../constants'
 
 const Advisories = () => {
-  const dispatch = useDispatch();
-  const { subStepAdvisories } = useSelector((state: RootState) => state.advisories);
-  const [completedSteps, setCompletedSteps] = useState<number[]>([]);
-  const [selectedTitle, setSelectedTitle] = useState<string>(Object.keys(advisoryTopics)[0]);
+  const dispatch = useDispatch()
+  const { subStepAdvisories } = useSelector((state: RootState) => state.advisories)
+  const [completedSteps, setCompletedSteps] = useState<number[]>([])
+  const [selectedTitle, setSelectedTitle] = useState<string>(Object.keys(advisoryTopics)[0])
 
-  const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'];
+  const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅']
 
-  const isCompleted = (index: number): boolean => completedSteps.includes(index);
+  const isCompleted = (index: number): boolean => completedSteps.includes(index)
 
-  const advisoriesIcons = unicodeNumbers.map((number, index) =>
-    isCompleted(index) ? '✓' : number,
-  );
+  const advisoriesIcons = unicodeNumbers.map((number, index) => (isCompleted(index) ? '✓' : number))
 
   useEffect(() => {
-    setSelectedTitle(Object.keys(advisoryTopics)[subStepAdvisories]);
-    // Add the current step to the completed steps if not already there
-    setCompletedSteps((prevSteps) => {
+    setSelectedTitle(Object.keys(advisoryTopics)[subStepAdvisories])
+
+    setCompletedSteps(prevSteps => {
       if (!prevSteps.includes(subStepAdvisories)) {
-        return [...prevSteps, subStepAdvisories];
+        return [...prevSteps, subStepAdvisories]
       }
-      return prevSteps;
-    });
-  }, [subStepAdvisories]);
+      return prevSteps
+    })
+  }, [subStepAdvisories])
 
   const handleStepClick = (title: string): void => {
-    const index = getIndexTitle(title);
-    dispatch(setSubStepAdvisories(index));
-  };
+    const index = getIndexTitle(title)
+    dispatch(setSubStepAdvisories(index))
+  }
 
   const isCurrent = (currentTitle: string): boolean => {
-    const topics = Object.keys(advisoryTopics);
-    const index = topics.indexOf(currentTitle);
-    return index === subStepAdvisories;
-  };
+    const topics = Object.keys(advisoryTopics)
+    const index = topics.indexOf(currentTitle)
+    return index === subStepAdvisories
+  }
 
   const getIndexTitle = (title: string): number => {
-    const topics = Object.keys(advisoryTopics);
-    const index = topics.indexOf(title);
-    return index;
-  };
+    const topics = Object.keys(advisoryTopics)
+    const index = topics.indexOf(title)
+    return index
+  }
 
   return (
     <XStack className="advisories-container">
@@ -89,4 +87,4 @@ const Advisories = () => {
   )
 }
 
-export default Advisories;
+export default Advisories

From e0d177c2ea08f1b4fee8235621d4bb8d5a41fe35 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 18 Jan 2024 23:42:43 +0200
Subject: [PATCH 085/131] Advisories step logic

---
 src/pages/ValidatorOnboarding/ContinueButton.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx
index 9ddd837e..e2fbd38c 100644
--- a/src/pages/ValidatorOnboarding/ContinueButton.tsx
+++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx
@@ -64,12 +64,7 @@ const ContinueButton = () => {
   ])
 
   const handleStep1 = () => {
-    if (subStepAdvisories < 5) {
-      dispatch(setSubStepAdvisories(subStepAdvisories + 1))
-    } else {
-      dispatch(setSubStepAdvisories(0))
-      dispatch(setActiveStep(activeStep + 1))
-    }
+    dispatch(setActiveStep(activeStep + 1))
   }
 
   const handleStep2 = () => {

From fdc48a39ecede9dcb69036fbde9c010d52092192 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 23:46:48 +0200
Subject: [PATCH 086/131] fix: advisory topics constants location and var name

---
 src/constants.ts                              | 70 +++++++++----------
 .../Advisories/Advisories.tsx                 | 14 ++--
 .../Advisories/AdvisoriesContent.stories.ts   |  6 +-
 .../ValidatorOnboarding.tsx                   |  2 +-
 4 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/src/constants.ts b/src/constants.ts
index fe6f193c..632d6fcb 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,6 +1,3 @@
-type AdvisoryTopicsType = {
-  [key: string]: string[]
-}
 // App
 export const apiKey = '1730eff0-9d50-4382-a3fe-89f0d34a2070'
 const INFURA_KEY = 'f25e905e25a545dcaad2c939530b91db'
@@ -43,6 +40,40 @@ export const FORM_STEPS = [
   { label: 'Deposit', subtitle: 'Stake your ETH' },
   { label: 'Activation', subtitle: 'Complete Setup' },
 ]
+export const ADVISORY_TOPICS: {
+  [key: string]: string[]
+} = {
+  'Proof of Stake': [
+    'Proof of Stake systems require validators to hold and lock up a certain amount of cryptocurrency to participate.',
+    'In Proof of Stake, the chances of creating a block is proportional to the amount of cryptocurrency held.',
+    'Unlike Proof of Work, Proof of Stake aims to achieve consensus without intensive computational work.',
+  ],
+  Deposit: [
+    'Deposits are often irreversible, so ensure to double-check transaction details before confirming.',
+    'Delay in deposit acknowledgment might be due to network congestion or node synchronization.',
+    'Always keep transaction IDs or hashes for records and future references in case of disputes.',
+  ],
+  'Key Management': [
+    'Storing your private keys on a device connected to the internet is susceptible to hacks and malware.',
+    'Hardware wallets provide an added layer of security by keeping private keys isolated from online systems.',
+    'Regularly back up and encrypt your key management solutions to prevent potential losses.',
+  ],
+  'Bad Behaviour': [
+    'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing.',
+    'Running your validator keys simultaneously on two or more machines will result in slashing.*',
+    'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.',
+  ],
+  Requirements: [
+    'Ensure your system meets the minimum software and hardware requirements before initiating any operations.',
+    'Staying updated with the latest versions is vital to maintain system integrity and performance.',
+    'Failure to meet requirements might result in operational inefficiencies or security vulnerabilities.',
+  ],
+  Risks: [
+    'Cryptocurrency investments are subject to high volatility and can result in both significant gains and losses.',
+    'Always do thorough research before making investment decisions or engaging in transactions.',
+    'Be wary of phishing scams, malicious software, and too-good-to-be-true offers.',
+  ],
+}
 
 export const MAC = 'MacOS'
 export const WINDOWS = 'Windows'
@@ -125,39 +156,6 @@ export const VALIDATORS_DATA = [
     status: 'Active',
   },
 ]
-//Validator onboarding -> advisories -> text 
-export const advisoryTopics: AdvisoryTopicsType = {
-  'Proof of Stake': [
-    'Proof of Stake systems require validators to hold and lock up a certain amount of cryptocurrency to participate.',
-    'In Proof of Stake, the chances of creating a block is proportional to the amount of cryptocurrency held.',
-    'Unlike Proof of Work, Proof of Stake aims to achieve consensus without intensive computational work.',
-  ],
-  Deposit: [
-    'Deposits are often irreversible, so ensure to double-check transaction details before confirming.',
-    'Delay in deposit acknowledgment might be due to network congestion or node synchronization.',
-    'Always keep transaction IDs or hashes for records and future references in case of disputes.',
-  ],
-  'Key Management': [
-    'Storing your private keys on a device connected to the internet is susceptible to hacks and malware.',
-    'Hardware wallets provide an added layer of security by keeping private keys isolated from online systems.',
-    'Regularly back up and encrypt your key management solutions to prevent potential losses.',
-  ],
-  'Bad Behaviour': [
-    'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing.',
-    'Running your validator keys simultaneously on two or more machines will result in slashing.*',
-    'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.',
-  ],
-  Requirements: [
-    'Ensure your system meets the minimum software and hardware requirements before initiating any operations.',
-    'Staying updated with the latest versions is vital to maintain system integrity and performance.',
-    'Failure to meet requirements might result in operational inefficiencies or security vulnerabilities.',
-  ],
-  Risks: [
-    'Cryptocurrency investments are subject to high volatility and can result in both significant gains and losses.',
-    'Always do thorough research before making investment decisions or engaging in transactions.',
-    'Be wary of phishing scams, malicious software, and too-good-to-be-true offers.',
-  ],
-}
 
 // Pair Device
 export const VC = 'VC'
diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
index 1ddaa4b5..865c3028 100644
--- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
+++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
@@ -6,14 +6,14 @@ import AdvisoriesContent from './AdvisoriesContent'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../../redux/store'
 import { setSubStepAdvisories } from '../../../redux/ValidatorOnboarding/Advisories/slice'
+import { ADVISORY_TOPICS } from '../../../constants'
 import './advisoriesLayout.css'
-import { advisoryTopics } from '../../../constants'
 
 const Advisories = () => {
   const dispatch = useDispatch()
   const { subStepAdvisories } = useSelector((state: RootState) => state.advisories)
   const [completedSteps, setCompletedSteps] = useState<number[]>([])
-  const [selectedTitle, setSelectedTitle] = useState<string>(Object.keys(advisoryTopics)[0])
+  const [selectedTitle, setSelectedTitle] = useState<string>(Object.keys(ADVISORY_TOPICS)[0])
 
   const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅']
 
@@ -22,7 +22,7 @@ const Advisories = () => {
   const advisoriesIcons = unicodeNumbers.map((number, index) => (isCompleted(index) ? '✓' : number))
 
   useEffect(() => {
-    setSelectedTitle(Object.keys(advisoryTopics)[subStepAdvisories])
+    setSelectedTitle(Object.keys(ADVISORY_TOPICS)[subStepAdvisories])
 
     setCompletedSteps(prevSteps => {
       if (!prevSteps.includes(subStepAdvisories)) {
@@ -38,13 +38,13 @@ const Advisories = () => {
   }
 
   const isCurrent = (currentTitle: string): boolean => {
-    const topics = Object.keys(advisoryTopics)
+    const topics = Object.keys(ADVISORY_TOPICS)
     const index = topics.indexOf(currentTitle)
     return index === subStepAdvisories
   }
 
   const getIndexTitle = (title: string): number => {
-    const topics = Object.keys(advisoryTopics)
+    const topics = Object.keys(ADVISORY_TOPICS)
     const index = topics.indexOf(title)
     return index
   }
@@ -57,7 +57,7 @@ const Advisories = () => {
             Advisories
           </Text>
         </Stack>
-        {Object.keys(advisoryTopics).map((title, index) => (
+        {Object.keys(ADVISORY_TOPICS).map((title, index) => (
           <XStack
             key={title}
             onPress={() => handleStepClick(title)}
@@ -82,7 +82,7 @@ const Advisories = () => {
         ))}
       </YStack>
 
-      <AdvisoriesContent title={selectedTitle} content={advisoryTopics[selectedTitle]} />
+      <AdvisoriesContent title={selectedTitle} content={ADVISORY_TOPICS[selectedTitle]} />
     </XStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts
index 09088d7f..2725285b 100644
--- a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts
+++ b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 
 import AdvisoriesContent from './AdvisoriesContent'
-import { advisoryTopics } from './Advisories'
+import { ADVISORY_TOPICS } from './Advisories'
 
 const meta = {
   title: 'ValidatorOnboarding/AdvisoriesContent',
@@ -17,8 +17,8 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const advisoryTopicsKeys = Object.keys(advisoryTopics)
-const advisoryTopicsValues = Object.values(advisoryTopics)
+const advisoryTopicsKeys = Object.keys(ADVISORY_TOPICS)
+const advisoryTopicsValues = Object.values(ADVISORY_TOPICS)
 
 export const ProofOfStake: Story = {
   args: {
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 44a63867..664d99f5 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -16,8 +16,8 @@ import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstalling/Validato
 import ContinueButton from './ContinueButton'
 import ActivationValidatorSetup from './ValidatorSetup/ValidatorActivation/ActivationValidatorSetup'
 import Deposit from './Deposit/Deposit'
-import './layoutGradient.css'
 import { useWindowSize } from '../../hooks/useWindowSize'
+import './layoutGradient.css'
 
 const ValidatorOnboarding = () => {
   const { activeStep, subStepValidatorSetup } = useSelector(

From 3c6c3c32957f506f1a095b9ee997a705488d5df9 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 23:50:27 +0200
Subject: [PATCH 087/131] fix: filter visible steps immediately

---
 src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 6385f44f..e8226140 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -40,8 +40,6 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
     }
   }
 
-  const visibleSteps = FORM_STEPS.filter((_, index) => isStepVisible(index))
-
   return (
     <Stepper
       activeStep={activeStep}
@@ -57,7 +55,7 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
         marginBottom: '3rem',
       }}
     >
-      {visibleSteps.map(step => {
+      {FORM_STEPS.filter((_, index) => isStepVisible(index)).map(step => {
         const originalIndex = FORM_STEPS.indexOf(step)
         return (
           <Step

From ec0ada31bbd1889dd3b13acb98a8525737e3ba56 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 19 Jan 2024 00:07:36 +0200
Subject: [PATCH 088/131] fix: problem with prerendering of generating mnemonic

---
 .../KeyGeneration/KeyGeneration.tsx             | 16 +++++++++++++++-
 .../KeyGeneration/RecoveryPhrase.tsx            | 17 ++---------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 66ff460e..e0a5e873 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -1,6 +1,9 @@
+import { useEffect } from 'react'
 import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
-import { useSelector } from 'react-redux'
+import { generateMnemonic } from 'web-bip39'
+import { useDispatch, useSelector } from 'react-redux'
+import wordlist from 'web-bip39/wordlists/english'
 
 import KeyGenerationHeader from './KeyGenerationHeader/KeyGenerationHeader'
 import RecoveryMechanism from './RecoveryMechanism/RecoveryMechanism'
@@ -9,11 +12,22 @@ import RecoveryPhrase from './RecoveryPhrase'
 import ConfirmRecoveryPhrase from './ConfirmRecoveryPhrase/ConfirmRecoveryPhrase'
 import { BOTH_KEY_AND_RECOVERY, KEYSTORE_FILES, RECOVERY_PHRASE } from '../../../constants'
 import { RootState } from '../../../redux/store'
+import { setGeneratedMnemonic } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
 
 const KeyGeneration = () => {
   const { recoveryMechanism, isConfirmPhraseStage } = useSelector(
     (state: RootState) => state.keyGeneration,
   )
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    getMnemonic()
+  }, [])
+
+  const getMnemonic = async () => {
+    const mnemonic = await generateMnemonic(wordlist, 256)
+    dispatch(setGeneratedMnemonic(mnemonic.split(' ')))
+  }
 
   const isKeystoreFiles =
     recoveryMechanism === KEYSTORE_FILES || recoveryMechanism === BOTH_KEY_AND_RECOVERY
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index b2b5259c..680e7f55 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -2,14 +2,11 @@ import { Stack, XStack, YStack } from 'tamagui'
 import { Button, InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon, CopyIcon, CheckIcon } from '@status-im/icons'
 import { useEffect, useState } from 'react'
-import { generateMnemonic } from 'web-bip39'
-import { useDispatch, useSelector } from 'react-redux'
-import wordlist from 'web-bip39/wordlists/english'
+import { useSelector } from 'react-redux'
 
 import { RootState } from '../../../redux/store'
-import { setGeneratedMnemonic } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
-import styles from './index.module.css'
 import { copyFunction } from '../../../utilities'
+import styles from './index.module.css'
 
 type RecoveryPhraseProps = {
   isKeystoreFiles: boolean
@@ -20,21 +17,11 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
   const [isCopied, setIsCopied] = useState(false)
   const [isTimeoutActive, setIsTimeoutActive] = useState(false)
   const { generatedMnemonic } = useSelector((state: RootState) => state.keyGeneration)
-  const dispatch = useDispatch()
-
-  useEffect(() => {
-    getMnemonic()
-  }, [])
 
   useEffect(() => {
     setIsCopied(false)
   }, [generatedMnemonic])
 
-  const getMnemonic = async () => {
-    const mnemonic = await generateMnemonic(wordlist, 256)
-    dispatch(setGeneratedMnemonic(mnemonic.split(' ')))
-  }
-
   const revealHandler = () => {
     setIsReveal(state => !state)
   }

From af46f7ed5e74f61d1b234e45dc5b6ef34e1ffea5 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 19 Jan 2024 00:46:44 +0200
Subject: [PATCH 089/131] fix respovness

---
 .../ValidatorInstalling/InstallLayout.css     | 35 ++++++++++++-------
 .../ValidatorInstalling/OSCard.tsx            |  8 ++---
 .../ValidatorInstalling/OSCards.tsx           | 32 ++++++++---------
 3 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css
index a8e15471..1f2af3f1 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css
@@ -1,25 +1,36 @@
 .osCardsContainer {
-  /* Container styles */
+  display: grid;
+  grid-gap: 16px;
+  margin: 8px;
+  grid-template-columns: repeat(3, 1fr)
+}
+
+ 
+.osCardsContainer {
+  grid-template-columns: repeat(1, 1fr);
+}
+ 
+@media (min-width: 601px) {
+  .osCardsContainer {
+    grid-template-columns: repeat(2, 1fr);  
+  }
+}
+ 
+@media (min-width: 901px) {
+  .osCardsContainer {
+    grid-template-columns: repeat(3, 1fr);  
+  }
 }
 
 .osCard {
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 16px;
   padding: 12px 16px;
-  min-width: 200px;
-  cursor: 'pointer';
-  width: 32%; /* Adjust for normal screens */
+  cursor: pointer;
+  min-width: 250px;
 }
 
 .osCard.selected {
   background-color: #2a4af50d;
   border: 1px solid #2a4af566;
 }
-
-/* Media query for smaller screens */
-@media (max-width: 800px) {
-  .osCard {
-    width: 100%; /* Full width on small screens */
-    margin: 8px 0;
-  }
-}
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
index 3a48eac8..f518149a 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
@@ -1,6 +1,7 @@
-import { YStack } from 'tamagui'
+import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import Icon from '../../../../components/General/Icon'
+import './InstallLayout.css'
 
 type OSCardProps = {
   name: string
@@ -8,15 +9,14 @@ type OSCardProps = {
   onClick?: () => void
   isSelected?: boolean
 }
-
 const OSCard = ({ name, icon, onClick, isSelected }: OSCardProps) => {
   return (
-    <YStack className={`osCard ${isSelected ? 'selected' : ''}`} onPress={onClick}>
+    <Stack className={`osCard ${isSelected ? 'selected' : ''}`} onPress={onClick}>
       <Text size={19} weight={'semibold'}>
         {name}
       </Text>
       <Icon src={icon} width={90} height={110} />
-    </YStack>
+    </Stack>
   )
 }
 
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
index e83b8297..da59ae48 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
@@ -1,27 +1,23 @@
-import { XStack } from 'tamagui'
-import OSCard from './OSCard'
-import { LINUX, MAC, WINDOWS } from '../../../../constants'
+import { Stack, XStack } from 'tamagui';
+import OSCard from './OSCard';
+import { LINUX, MAC, WINDOWS } from '../../../../constants';
+
+import './InstallLayout.css';
 
-import './InstallLayout.css'
 const cards = [
   { name: MAC, icon: '/icons/apple-logo.svg' },
   { name: LINUX, icon: '/icons/linux-logo.svg' },
   { name: WINDOWS, icon: '/icons/windows-logo.svg' },
-]
+];
 
 type OSCardsProps = {
-  selectedOS: string
-  handleOSCardClick: (os: string) => void
-}
+  selectedOS: string;
+  handleOSCardClick: (os: string) => void;
+};
 
 const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
-    <XStack
-      className="osCardsContainer"
-      justifyContent={'space-between'}
-      my={'15px'}
-      flexWrap="wrap"
-    >
+    <Stack className="osCardsContainer" my={'15px'}  >
       {cards.map(card => (
         <OSCard
           key={card.name}
@@ -31,8 +27,8 @@ const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
           onClick={() => handleOSCardClick(card.name)}
         />
       ))}
-    </XStack>
-  )
-}
+    </Stack>
+  );
+};
 
-export default OSCards
+export default OSCards;

From 6301fa16286a526516dfad41f9d77760e7742bd6 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 19 Jan 2024 09:34:46 +0200
Subject: [PATCH 090/131] fix: rewrite css from page wrapper to module

---
 .../PageWrappers/PageWrapperShadow.tsx           | 16 ++++++++--------
 .../{layout.css => index.module.css}             |  0
 2 files changed, 8 insertions(+), 8 deletions(-)
 rename src/components/PageWrappers/{layout.css => index.module.css} (100%)

diff --git a/src/components/PageWrappers/PageWrapperShadow.tsx b/src/components/PageWrappers/PageWrapperShadow.tsx
index c8ba7c1a..bdfe3c48 100644
--- a/src/components/PageWrappers/PageWrapperShadow.tsx
+++ b/src/components/PageWrappers/PageWrapperShadow.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 import { useTheme } from 'tamagui'
 
 import NimbusLogoMark from '../Logos/NimbusLogoMark'
-import './layout.css'
+import styles from './index.module.css'
 
 type PageWrapperShadowProps = {
   breadcrumbBar?: ReactNode
@@ -22,19 +22,19 @@ const PageWrapperShadow = ({
   const theme = useTheme()
 
   return (
-    <div className="layout" style={{ backgroundColor: theme.background.val }}>
-      <section className="layout-left">
+    <div className={styles['layout']} style={{ backgroundColor: theme.background.val }}>
+      <section className={styles['layout-left']}>
         {breadcrumbBar}
-        <div className="container">
-          <div className="container-inner">{children}</div>
+        <div className={styles['container']}>
+          <div className={styles['container-inner']}>{children}</div>
         </div>
       </section>
-      <section className="layout-right">
-        <div className="image-container">
+      <section className={styles['layout-right']}>
+        <div className={styles['image-container']}>
           <img
             src={rightImageSrc}
             alt="background"
-            className="background-img"
+            className={styles['background-img']}
             style={{ height: imgHeight }}
           />
           {rightImageLogo ? <NimbusLogoMark /> : null}
diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/index.module.css
similarity index 100%
rename from src/components/PageWrappers/layout.css
rename to src/components/PageWrappers/index.module.css

From 75e6c5c4103ad01a2af130f181f84182c5dd1bc0 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 19 Jan 2024 09:50:57 +0200
Subject: [PATCH 091/131] fix: rewrite style of overview to module

---
 .../Overview/OverviewWrapper.tsx              | 16 +++----
 ...rLayout.css => validatorLayout.module.css} | 47 ++++++++++++++++---
 2 files changed, 48 insertions(+), 15 deletions(-)
 rename src/pages/ValidatorOnboarding/Overview/{validatorLayout.css => validatorLayout.module.css} (68%)

diff --git a/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx b/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx
index 03add1e6..7b3d697b 100644
--- a/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 import { useTheme } from 'tamagui'
 
-import './validatorLayout.css'
+import styles from './validatorLayout.module.css'
 
 type OverviewWrapperProps = {
   rightImageSrc?: string
@@ -18,18 +18,18 @@ const OverviewWrapper = ({
   const theme = useTheme()
 
   return (
-    <div className="layout" style={{ backgroundColor: theme.background.val }}>
-      <section className="layout-left">
-        <div className="container">
-          <div className="container-inner">{children}</div>
+    <div className={styles['layout']} style={{ backgroundColor: theme.background.val }}>
+      <section className={styles['layout-left']}>
+        <div className={styles['container']}>
+          <div className={styles['container-inner']}>{children}</div>
         </div>
       </section>
-      <section className="layout-right">
-        <div className="image-container">
+      <section className={styles['layout-right']}>
+        <div className={styles['image-container']}>
           <img
             src={rightImageSrc}
             alt="background"
-            className="background-img"
+            className={styles['background-img']}
             style={{ height: imgHeight }}
           />
         </div>
diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.module.css
similarity index 68%
rename from src/pages/ValidatorOnboarding/Overview/validatorLayout.css
rename to src/pages/ValidatorOnboarding/Overview/validatorLayout.module.css
index 77ea111b..4002c5f1 100644
--- a/src/pages/ValidatorOnboarding/Overview/validatorLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.module.css
@@ -1,3 +1,11 @@
+.layout {
+  background-color: #fff;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
 .layout::after {
   display: block;
   content: '';
@@ -5,7 +13,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  background: linear-gradient(to left, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
+  height: 100%;
 }
 .layout-left {
   flex: 0 0 55%;
@@ -15,8 +23,7 @@
 .container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: start;
-  margin-left: 50px;
+  height: 100%;
 }
 .container-inner {
   max-width: 70%;
@@ -54,7 +61,7 @@
   left: -1%;
   width: 50%;
   height: 100%;
-  background: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0));
+  background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0));
 }
 .image-container .background-img {
   position: absolute;
@@ -81,7 +88,7 @@
 
   .layout-left {
     flex: 0 0 100%;
-    max-width: 80%;
+    max-width: 100%;
     order: 1;
   }
 
@@ -90,11 +97,16 @@
     padding: 20px;
   }
 
+  .container-inner {
+    max-width: 100%;
+    flex: 1 0 100%;
+  }
+
   .layout-right {
     flex: 0 0 100%;
     max-width: 100%;
     order: 0;
-    margin-top: -5%;
+    margin-top: -10%;
     margin-bottom: -72%;
   }
 
@@ -105,6 +117,16 @@
     overflow: hidden;
   }
 
+  .image-container .background-img {
+    width: 100%;
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    /* transform: translateX(-50%) translateY(-5%); */
+    clip-path: inset(0 0 85% 0);
+    height: auto;
+  }
+
   .image-container .nimbus-logomark {
     display: none;
   }
@@ -122,10 +144,21 @@
     padding: 0;
   }
 
+  .image-container {
+    position: relative;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+  }
+
+  .image-container .background-img {
+    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
+  }
+
   .image-container::after {
     width: 100%;
     right: 0;
     left: 0;
-    background: linear-gradient(to top, rgba(255, 255, 255, 1) 78%, rgba(255, 255, 255, 0));
+    background: linear-gradient(to top, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0));
   }
 }

From e57a22b2c57fb1dcbc13d991a9516702986c0a12 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 19 Jan 2024 09:58:28 +0200
Subject: [PATCH 092/131] fix: import of advisories constants

---
 .../ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts
index 2725285b..b55d9971 100644
--- a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts
+++ b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 
 import AdvisoriesContent from './AdvisoriesContent'
-import { ADVISORY_TOPICS } from './Advisories'
+import { ADVISORY_TOPICS } from '../../../constants'
 
 const meta = {
   title: 'ValidatorOnboarding/AdvisoriesContent',

From a3291e589edc0f54e0e73cef3f95b49a6b25020b Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 19 Jan 2024 10:15:01 +0200
Subject: [PATCH 093/131] fix: width of validators menu with price

---
 src/components/General/ValidatorsMenuWithPrice.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/General/ValidatorsMenuWithPrice.tsx b/src/components/General/ValidatorsMenuWithPrice.tsx
index 88bbdb15..83337fd7 100644
--- a/src/components/General/ValidatorsMenuWithPrice.tsx
+++ b/src/components/General/ValidatorsMenuWithPrice.tsx
@@ -65,7 +65,7 @@ const ValidatorsMenuWithPrice = ({
           </Text>
         </YStack>
         <YStack space={'$2'}>
-          <XStack style={{ justifyContent: 'space-between', width: '115%' }}>
+          <XStack style={{ justifyContent: 'space-between' }}>
             <Text size={15} weight={'semibold'}>
               {currency}
             </Text>

From 00a227b9ee49c516a7b0911d787fbe66c40cfc33 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 19 Jan 2024 10:20:41 +0200
Subject: [PATCH 094/131] fix: space between eth and value

---
 src/components/General/ValidatorsMenuWithPrice.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/General/ValidatorsMenuWithPrice.tsx b/src/components/General/ValidatorsMenuWithPrice.tsx
index 83337fd7..9b7aa076 100644
--- a/src/components/General/ValidatorsMenuWithPrice.tsx
+++ b/src/components/General/ValidatorsMenuWithPrice.tsx
@@ -60,9 +60,11 @@ const ValidatorsMenuWithPrice = ({
           <Text size={15} weight={'semibold'}>
             ETH
           </Text>
-          <Text size={27} weight={'semibold'}>
-            {totalETH}
-          </Text>
+          <Stack style={{ marginTop: '2px' }}>
+            <Text size={27} weight={'semibold'}>
+              {totalETH}
+            </Text>
+          </Stack>
         </YStack>
         <YStack space={'$2'}>
           <XStack style={{ justifyContent: 'space-between' }}>

From a422ad2237cb851d7a7718e281565a885efb2a63 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 19 Jan 2024 11:11:57 +0200
Subject: [PATCH 095/131]  change css to modules

---
 .../ValidatorInstalling/InstallLayout.css     | 36 -------------------
 .../InstallLayout.module.css                  | 32 +++++++++++++++++
 ...Gradient.css => layoutGradient.module.css} |  0
 3 files changed, 32 insertions(+), 36 deletions(-)
 delete mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css
 create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
 rename src/pages/ValidatorOnboarding/{layoutGradient.css => layoutGradient.module.css} (100%)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css
deleted file mode 100644
index 1f2af3f1..00000000
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.osCardsContainer {
-  display: grid;
-  grid-gap: 16px;
-  margin: 8px;
-  grid-template-columns: repeat(3, 1fr)
-}
-
- 
-.osCardsContainer {
-  grid-template-columns: repeat(1, 1fr);
-}
- 
-@media (min-width: 601px) {
-  .osCardsContainer {
-    grid-template-columns: repeat(2, 1fr);  
-  }
-}
- 
-@media (min-width: 901px) {
-  .osCardsContainer {
-    grid-template-columns: repeat(3, 1fr);  
-  }
-}
-
-.osCard {
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 16px;
-  padding: 12px 16px;
-  cursor: pointer;
-  min-width: 250px;
-}
-
-.osCard.selected {
-  background-color: #2a4af50d;
-  border: 1px solid #2a4af566;
-}
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
new file mode 100644
index 00000000..0e4b62d3
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
@@ -0,0 +1,32 @@
+.osCardsContainer {
+  display: flex;
+    
+  justify-content: space-between;
+}
+
+.osCard {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 16px;
+  padding: 12px 16px;
+  cursor: pointer;
+  box-sizing: border-box;
+  margin-bottom: 16px;
+  flex-basis: calc(33.333% - 10px);
+}
+
+.osCardSelected {
+  background-color: #2a4af50d;
+  border: 1px solid #2a4af566;
+}
+
+@media (max-width: 900px) {
+  .osCard {
+    flex-basis: calc(50% - 10px);
+  }
+}
+
+@media (max-width: 680px) {
+  .osCard {
+    flex-basis: 100%;
+  }
+}
diff --git a/src/pages/ValidatorOnboarding/layoutGradient.css b/src/pages/ValidatorOnboarding/layoutGradient.module.css
similarity index 100%
rename from src/pages/ValidatorOnboarding/layoutGradient.css
rename to src/pages/ValidatorOnboarding/layoutGradient.module.css

From 4782e88c3f2998e33353811dba076ffc747aacec Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 19 Jan 2024 11:12:14 +0200
Subject: [PATCH 096/131] fix OsCards

---
 .../ValidatorOnboarding.tsx                   |  2 +-
 .../ValidatorInstalling/OSCard.tsx            |  9 ++---
 .../ValidatorInstalling/OSCards.tsx           | 38 +++++++++----------
 .../ValidatorInstalling/ValidatorInstall.tsx  |  4 +-
 4 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 664d99f5..cd5b9378 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -17,7 +17,7 @@ import ContinueButton from './ContinueButton'
 import ActivationValidatorSetup from './ValidatorSetup/ValidatorActivation/ActivationValidatorSetup'
 import Deposit from './Deposit/Deposit'
 import { useWindowSize } from '../../hooks/useWindowSize'
-import './layoutGradient.css'
+ 
 
 const ValidatorOnboarding = () => {
   const { activeStep, subStepValidatorSetup } = useSelector(
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
index f518149a..ce4f5beb 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
@@ -1,17 +1,14 @@
-import { Stack, YStack } from 'tamagui'
+import { Stack } from 'tamagui'
 import { Text } from '@status-im/components'
 import Icon from '../../../../components/General/Icon'
-import './InstallLayout.css'
 
 type OSCardProps = {
   name: string
   icon: string
-  onClick?: () => void
-  isSelected?: boolean
 }
-const OSCard = ({ name, icon, onClick, isSelected }: OSCardProps) => {
+const OSCard = ({ name, icon }: OSCardProps) => {
   return (
-    <Stack className={`osCard ${isSelected ? 'selected' : ''}`} onPress={onClick}>
+    <Stack>
       <Text size={19} weight={'semibold'}>
         {name}
       </Text>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
index da59ae48..d13c98aa 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
@@ -1,34 +1,32 @@
-import { Stack, XStack } from 'tamagui';
-import OSCard from './OSCard';
-import { LINUX, MAC, WINDOWS } from '../../../../constants';
-
-import './InstallLayout.css';
+import { Stack } from 'tamagui'
+import OSCard from './OSCard'
+import { LINUX, MAC, WINDOWS } from '../../../../constants'
 
 const cards = [
   { name: MAC, icon: '/icons/apple-logo.svg' },
   { name: LINUX, icon: '/icons/linux-logo.svg' },
   { name: WINDOWS, icon: '/icons/windows-logo.svg' },
-];
+]
 
 type OSCardsProps = {
-  selectedOS: string;
-  handleOSCardClick: (os: string) => void;
-};
-
+  selectedOS: string
+  handleOSCardClick: (os: string) => void
+}
+import styles from './InstallLayout.module.css'
 const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
-    <Stack className="osCardsContainer" my={'15px'}  >
+    <Stack className={styles.osCardsContainer}>
       {cards.map(card => (
-        <OSCard
+        <Stack
           key={card.name}
-          icon={card.icon}
-          name={card.name}
-          isSelected={selectedOS === card.name}
-          onClick={() => handleOSCardClick(card.name)}
-        />
+          className={`${styles.osCard} ${selectedOS === card.name ? styles.osCardSelected : ''}`}
+          onPress={() => handleOSCardClick(card.name)}
+        >
+          <OSCard key={card.name} icon={card.icon} name={card.name} />
+        </Stack>
       ))}
     </Stack>
-  );
-};
+  )
+}
 
-export default OSCards;
+export default OSCards
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
index 7b0ad056..92c44b99 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
@@ -8,7 +8,7 @@ import { DOCUMENTATIONS } from './documentations'
 import { MAC } from '../../../../constants'
 import OSCards from './OSCards'
 import Markdown from '../../../../components/General/Markdown/Markdown'
-import './InstallLayout.css'
+
 const ValidatorSetupInstall = () => {
   const [selectedOS, setSelectedOS] = useState(MAC)
   const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
@@ -18,7 +18,7 @@ const ValidatorSetupInstall = () => {
   }
 
   return (
-    <YStack style={{ padding: '26px 32px', width: 'fit-content' }}>
+    <YStack style={{ padding: '26px 32px' }}>
       <Text size={27} weight={'semibold'}>
         Validator Setup
       </Text>

From 0d4f8cf94fa0058efb4824c21e4b8667c285b5c3 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Sun, 21 Jan 2024 15:20:28 +0200
Subject: [PATCH 097/131] Update OSCards.tsx

---
 .../ValidatorSetup/ValidatorInstalling/OSCards.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
index d13c98aa..ed3a28ef 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
@@ -1,6 +1,7 @@
 import { Stack } from 'tamagui'
 import OSCard from './OSCard'
 import { LINUX, MAC, WINDOWS } from '../../../../constants'
+import styles from './InstallLayout.module.css'
 
 const cards = [
   { name: MAC, icon: '/icons/apple-logo.svg' },
@@ -12,7 +13,6 @@ type OSCardsProps = {
   selectedOS: string
   handleOSCardClick: (os: string) => void
 }
-import styles from './InstallLayout.module.css'
 const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
     <Stack className={styles.osCardsContainer}>

From 086e8956aa74a139f9ed7b0f938df6ff0abf5dd2 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Sun, 21 Jan 2024 15:24:56 +0200
Subject: [PATCH 098/131] fix bug

---
 .../ValidatorSetup/ValidatorInstalling/OSCards.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
index ed3a28ef..c1e656fe 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
@@ -15,17 +15,17 @@ type OSCardsProps = {
 }
 const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
-    <Stack className={styles.osCardsContainer}>
+    <div className={styles.osCardsContainer}>
       {cards.map(card => (
-        <Stack
+        <div
           key={card.name}
           className={`${styles.osCard} ${selectedOS === card.name ? styles.osCardSelected : ''}`}
-          onPress={() => handleOSCardClick(card.name)}
+          onClick={() => handleOSCardClick(card.name)}
         >
           <OSCard key={card.name} icon={card.icon} name={card.name} />
-        </Stack>
+        </div>
       ))}
-    </Stack>
+    </div>
   )
 }
 

From 91970547f92a460cf414d164c5a142ad423403b3 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Sun, 21 Jan 2024 16:14:47 +0200
Subject: [PATCH 099/131] update css using repeat

---
 .../InstallLayout.module.css                  | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
index 0e4b62d3..271b3867 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
@@ -1,7 +1,8 @@
 .osCardsContainer {
-  display: flex;
-    
-  justify-content: space-between;
+  display: grid;
+  grid-gap: 15px;
+
+  grid-template-columns: repeat(3, 1fr);
 }
 
 .osCard {
@@ -10,8 +11,6 @@
   padding: 12px 16px;
   cursor: pointer;
   box-sizing: border-box;
-  margin-bottom: 16px;
-  flex-basis: calc(33.333% - 10px);
 }
 
 .osCardSelected {
@@ -19,14 +18,23 @@
   border: 1px solid #2a4af566;
 }
 
-@media (max-width: 900px) {
-  .osCard {
-    flex-basis: calc(50% - 10px);
+@media (max-width: 1000px) {
+  .osCardsContainer {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .osCard:nth-child(3) {
+    width: 205%;
   }
 }
 
-@media (max-width: 680px) {
+@media (max-width: 750px) {
+  .osCardsContainer {
+    grid-template-columns: repeat(1, 1fr);
+  }
   .osCard {
-    flex-basis: 100%;
+    width: 90%;
+  }
+  .osCard:nth-child(3) {
+    width: 90%;
   }
 }

From 5567c62f7f0c04bdd2f31e9f9a6aed47e398197b Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Sun, 21 Jan 2024 16:15:07 +0200
Subject: [PATCH 100/131] Update OSCard.tsx

---
 .../ValidatorSetup/ValidatorInstalling/OSCard.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
index ce4f5beb..11216322 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
@@ -8,7 +8,7 @@ type OSCardProps = {
 }
 const OSCard = ({ name, icon }: OSCardProps) => {
   return (
-    <Stack>
+    <Stack >
       <Text size={19} weight={'semibold'}>
         {name}
       </Text>

From 9ef747c5136388a9ad38ed2a449dff07c42eada2 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Sun, 21 Jan 2024 16:15:09 +0200
Subject: [PATCH 101/131] Update OSCards.tsx

---
 .../ValidatorSetup/ValidatorInstalling/OSCards.tsx               | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
index c1e656fe..9c50ce40 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
@@ -1,4 +1,3 @@
-import { Stack } from 'tamagui'
 import OSCard from './OSCard'
 import { LINUX, MAC, WINDOWS } from '../../../../constants'
 import styles from './InstallLayout.module.css'

From 45ceb0b7f321de00740517e2b4c95c0642d6e38c Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Sun, 21 Jan 2024 16:15:23 +0200
Subject: [PATCH 102/131] fix overflow bug

---
 .../ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
index 92c44b99..dc6c6fe1 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
@@ -18,7 +18,7 @@ const ValidatorSetupInstall = () => {
   }
 
   return (
-    <YStack style={{ padding: '26px 32px' }}>
+    <YStack style={{ padding: '26px 32px', width:'fit-content'}} >
       <Text size={27} weight={'semibold'}>
         Validator Setup
       </Text>
@@ -35,7 +35,7 @@ const ValidatorSetupInstall = () => {
         <Text size={19} weight={'semibold'}>
           Installing {selectedClient}
         </Text>
-        <Stack flexWrap="wrap">
+        <Stack>
           <Markdown children={DOCUMENTATIONS[selectedClient].general} />
           <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
           <Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />

From 3a6c4965720dead291e253fbb1dbc8589a6bf513 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 21 Jan 2024 16:16:54 +0200
Subject: [PATCH 103/131] feat: add space between currency and dropdown

---
 src/components/General/ValidatorsMenuWithPrice.tsx           | 5 ++---
 .../ValidatorInstalling/InstallLayout.module.css             | 1 -
 .../ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx         | 1 -
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/General/ValidatorsMenuWithPrice.tsx b/src/components/General/ValidatorsMenuWithPrice.tsx
index 9b7aa076..2793d86c 100644
--- a/src/components/General/ValidatorsMenuWithPrice.tsx
+++ b/src/components/General/ValidatorsMenuWithPrice.tsx
@@ -35,8 +35,7 @@ const ValidatorsMenuWithPrice = ({
   return (
     <ResponsiveStack
       isVerticalAligned={media.sm}
-      style={{ justifyContent: 'space-between', width: media.md ? '100%' : '80%' }}
-      space={'$3'}
+      style={{ justifyContent: 'space-between', width: media.lg ? '100%' : '80%' }}
     >
       <Stack space={'$2'}>
         <Text size={15} weight="regular" color={'#647084'}>
@@ -55,7 +54,7 @@ const ValidatorsMenuWithPrice = ({
           onChangeText={changeValidatorCountHandler}
         />
       </Stack>
-      <XStack style={{ justifyContent: 'space-between' }}>
+      <XStack space={'$10'} style={{ justifyContent: 'space-between' }}>
         <YStack space={'$2'}>
           <Text size={15} weight={'semibold'}>
             ETH
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
index 0e4b62d3..27188b06 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
@@ -1,6 +1,5 @@
 .osCardsContainer {
   display: flex;
-    
   justify-content: space-between;
 }
 
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx
index c22e532a..407b0642 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx
@@ -16,7 +16,6 @@ const ValidatorSetup = () => {
         <Text size={27} weight={'semibold'}>
           Validator Setup
         </Text>
-
         <PairedDeviceCard />
       </XStack>
       <YStack>

From 0a11024d239ff845dd6a7512101e382b412e35b5 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 21 Jan 2024 16:17:50 +0200
Subject: [PATCH 104/131] fix: os card story props

---
 .../ValidatorSetup/ValidatorInstalling/OSCard.stories.ts      | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.stories.ts b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.stories.ts
index a697cf51..e8755ce2 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.stories.ts
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.stories.ts
@@ -16,7 +16,6 @@ export const MacOS: Story = {
   args: {
     icon: '/icons/apple-logo.svg',
     name: MAC,
-    isSelected: true,
   },
 }
 
@@ -24,7 +23,6 @@ export const Linux: Story = {
   args: {
     icon: '/icons/linux-logo.svg',
     name: LINUX,
-    isSelected: true,
   },
 }
 
@@ -32,7 +30,6 @@ export const Windows: Story = {
   args: {
     icon: '/icons/windows-logo.svg',
     name: WINDOWS,
-    isSelected: true,
   },
 }
 
@@ -40,6 +37,5 @@ export const NotSelectedMacOS = {
   args: {
     icon: '/icons/apple-logo.svg',
     name: MAC,
-    isSelected: false,
   },
 }

From 776ff3626c205663c911c3e96f3665092751215a Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 08:01:54 +0200
Subject: [PATCH 105/131] fix background wrapper

---
 src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx   | 4 ++--
 src/pages/ValidatorOnboarding/layoutGradient.module.css | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index cd5b9378..155cb584 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -17,7 +17,7 @@ import ContinueButton from './ContinueButton'
 import ActivationValidatorSetup from './ValidatorSetup/ValidatorActivation/ActivationValidatorSetup'
 import Deposit from './Deposit/Deposit'
 import { useWindowSize } from '../../hooks/useWindowSize'
- 
+ import styles from './layoutGradient.module.css'
 
 const ValidatorOnboarding = () => {
   const { activeStep, subStepValidatorSetup } = useSelector(
@@ -26,7 +26,7 @@ const ValidatorOnboarding = () => {
   const windowSize = useWindowSize()
 
   return (
-    <div className="gradient-wrapper">
+    <div className={styles.gradientWrapper}>
       <YStack
         style={{
           width: '100%',
diff --git a/src/pages/ValidatorOnboarding/layoutGradient.module.css b/src/pages/ValidatorOnboarding/layoutGradient.module.css
index bd143523..80a5bd6f 100644
--- a/src/pages/ValidatorOnboarding/layoutGradient.module.css
+++ b/src/pages/ValidatorOnboarding/layoutGradient.module.css
@@ -1,4 +1,4 @@
-.gradient-wrapper .image-container .background-img {
+.gradientWrapper .image-container .background-img {
   position: absolute;
   top: 50%;
   left: 75%;
@@ -6,7 +6,7 @@
   width: auto;
 }
 
-.gradient-wrapper:after {
+.gradientWrapper:after {
   display: block;
   content: '';
   position: absolute;

From ab9af8c557e10ee5594520ba0f6f6935232db920 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 09:21:22 +0200
Subject: [PATCH 106/131] fix overview cards style

---
 src/pages/ValidatorOnboarding/Overview/Overview.tsx      | 8 ++++----
 src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx  | 8 ++++----
 .../{overviewLayout.css => overviewLayout.module.css}    | 9 +++++----
 3 files changed, 13 insertions(+), 12 deletions(-)
 rename src/pages/ValidatorOnboarding/Overview/{overviewLayout.css => overviewLayout.module.css} (84%)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index c4f648d8..9aa3ccb1 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -4,7 +4,7 @@ import { Text } from '@status-im/components'
 import OverviewCard from './OverviewCard'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
 import OverviewWrapper from './OverviewWrapper'
-import './overviewLayout.css'
+import styles from './overviewLayout.module.css'
 
 const Overview = () => {
   return (
@@ -12,7 +12,7 @@ const Overview = () => {
       imgHeight="250%"
       rightImageSrc="./background-images/sync-status-background.png"
     >
-      <YStack>
+      <YStack marginLeft="10%">
         <YStack space={'$5'} width="150%" marginTop={'2rem'}>
           <Text size={27} weight={'semibold'}>
             Overview
@@ -37,12 +37,12 @@ const Overview = () => {
             style={{ marginBottom: '1%', fontSize: '13px' }}
           />
         </YStack>
-        <XStack space={'$3'} className="overview-cards">
+        <div className={styles.overviewCards}>
           <OverviewCard text={'Current APR'} value={'4.40%'} />
           <OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
           <OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />
           <OverviewCard text={'Validator Queue'} value={'92603'} />
-        </XStack>
+        </div>
       </YStack>
     </OverviewWrapper>
   )
diff --git a/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx b/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx
index 7e0957fb..059d93c2 100644
--- a/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx
@@ -1,21 +1,21 @@
 import { YStack } from 'tamagui'
 import { Text } from '@status-im/components'
-
+import styles from './overviewLayout.module.css'
 type OverviewCardProps = {
   text: string
   value: string
 }
-import './overviewLayout.css'
+
 const OverviewCard = ({ text, value }: OverviewCardProps) => {
   return (
-    <YStack className="overview-card">
+    <div className={styles.overviewCard}>
       <Text size={15} weight={'semibold'}>
         {text}
       </Text>
       <Text size={27} color="blue" weight={'semibold'}>
         {value}
       </Text>
-    </YStack>
+    </div>
   )
 }
 
diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
similarity index 84%
rename from src/pages/ValidatorOnboarding/Overview/overviewLayout.css
rename to src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
index ea8c7877..d66a6e20 100644
--- a/src/pages/ValidatorOnboarding/Overview/overviewLayout.css
+++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
@@ -1,10 +1,11 @@
-.overview-cards {
+.overviewCards {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
+  
 }
-.overview-card {
+.overviewCard {
   border-radius: 16px;
   border: 1px solid rgba(0, 0, 0, 0.15);
   width: 44%;
@@ -14,12 +15,12 @@
 }
 
 @media screen and (max-width: 1000px) {
-  .overview-cards {
+  .overviewCards {
     flex-direction: column;
     align-items: center;
     flex-wrap: wrap;
   }
-  .overview-card {
+  .overviewCard {
     width: 160%;
     margin-bottom: 16px;
   }

From 1571e3727cd1b7c2dbac06bf53be18656b33fa66 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 09:37:55 +0200
Subject: [PATCH 107/131] fix window of overview

---
 src/pages/ValidatorOnboarding/Overview/Overview.tsx           | 4 ++--
 src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx    | 1 -
 .../ValidatorOnboarding/Overview/validatorLayout.module.css   | 2 ++
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 9aa3ccb1..b02c80ab 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -12,7 +12,7 @@ const Overview = () => {
       imgHeight="250%"
       rightImageSrc="./background-images/sync-status-background.png"
     >
-      <YStack marginLeft="10%">
+      
         <YStack space={'$5'} width="150%" marginTop={'2rem'}>
           <Text size={27} weight={'semibold'}>
             Overview
@@ -43,7 +43,7 @@ const Overview = () => {
           <OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />
           <OverviewCard text={'Validator Queue'} value={'92603'} />
         </div>
-      </YStack>
+      
     </OverviewWrapper>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx b/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx
index 7b3d697b..e4464f6a 100644
--- a/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx
@@ -11,7 +11,6 @@ type OverviewWrapperProps = {
 
 const OverviewWrapper = ({
   rightImageSrc,
-
   children,
   imgHeight,
 }: OverviewWrapperProps) => {
diff --git a/src/pages/ValidatorOnboarding/Overview/validatorLayout.module.css b/src/pages/ValidatorOnboarding/Overview/validatorLayout.module.css
index 4002c5f1..83a67278 100644
--- a/src/pages/ValidatorOnboarding/Overview/validatorLayout.module.css
+++ b/src/pages/ValidatorOnboarding/Overview/validatorLayout.module.css
@@ -5,6 +5,7 @@
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
+  border-radius: 25px;
 }
 .layout::after {
   display: block;
@@ -24,6 +25,7 @@
   display: flex;
   flex-wrap: wrap;
   height: 100%;
+  padding-left: 10%;
 }
 .container-inner {
   max-width: 70%;

From 510a8b28bc30b4e6823b34eb1d2e0f64882ecd1a Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 10:07:40 +0200
Subject: [PATCH 108/131] fix cards responsivness

---
 .../Overview/overviewLayout.module.css              | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
index d66a6e20..37090b51 100644
--- a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
+++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
@@ -2,26 +2,25 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  width: 100%;
-  
+  gap: 16px;
+  flex-wrap: wrap;
+  width: 250%;
+  margin-top: 10%;
 }
 .overviewCard {
   border-radius: 16px;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  width: 44%;
   padding: 12px 16px;
   background-color: #fff;
-  min-width: 150px;
+  min-width: 220px;
 }
 
 @media screen and (max-width: 1000px) {
   .overviewCards {
     flex-direction: column;
-    align-items: center;
-    flex-wrap: wrap;
   }
   .overviewCard {
-    width: 160%;
+    width: 35%;
     margin-bottom: 16px;
   }
 }

From e082481c79764840a1460259d6d15fd25f548586 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 10:07:44 +0200
Subject: [PATCH 109/131] Update OverviewCard.tsx

---
 .../Overview/OverviewCard.tsx                 | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx b/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx
index 059d93c2..6517d50c 100644
--- a/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx
@@ -1,6 +1,5 @@
-import { YStack } from 'tamagui'
-import { Text } from '@status-im/components'
 import styles from './overviewLayout.module.css'
+import { Text, YStack } from 'tamagui'
 type OverviewCardProps = {
   text: string
   value: string
@@ -8,14 +7,23 @@ type OverviewCardProps = {
 
 const OverviewCard = ({ text, value }: OverviewCardProps) => {
   return (
-    <div className={styles.overviewCard}>
-      <Text size={15} weight={'semibold'}>
-        {text}
-      </Text>
-      <Text size={27} color="blue" weight={'semibold'}>
-        {value}
-      </Text>
-    </div>
+    <YStack>
+      <div className={styles.overviewCard}>
+        <Text
+          fontWeight={'500'}
+          style={{ display: 'block', marginBottom: '8px', fontSize: '15px' }}
+        >
+          {text}
+        </Text>
+        <Text
+          color="blue"
+          fontWeight={'500'}
+          style={{ display: 'block', marginBottom: '8px', fontSize: '27px' }}
+        >
+          {value}
+        </Text>
+      </div>
+    </YStack>
   )
 }
 

From b9ab061ed97ece7e322f4710470a1feaa2eff4d4 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 10:11:57 +0200
Subject: [PATCH 110/131] Update Overview.tsx

---
 .../ValidatorOnboarding/Overview/Overview.tsx | 62 +++++++++----------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index b02c80ab..91fe7715 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -12,38 +12,36 @@ const Overview = () => {
       imgHeight="250%"
       rightImageSrc="./background-images/sync-status-background.png"
     >
-      
-        <YStack space={'$5'} width="150%" marginTop={'2rem'}>
-          <Text size={27} weight={'semibold'}>
-            Overview
-          </Text>
-          <Text size={19}>
-            Becoming a validator is a big responsibility with important preparation steps. Only
-            start the deposit process when you're ready.
-          </Text>
-          <Text size={15} color="#939BA1">
-            By running a validator, you'll be responsible for securing the network and receive
-            continuous payouts for actions that help the network reach consensus.
-          </Text>
-          <Text size={15} color="#939BA1">
-            Since the successful transition to proof-of-stake via The Merge, Ethereum is fully
-            secured by proof-of-stake validators. By running a validator, you'll be helping to
-            secure the Ethereum network.
-          </Text>
-          <LinkWithArrow
-            text="Learn More"
-            to={'/'}
-            arrowRight={true}
-            style={{ marginBottom: '1%', fontSize: '13px' }}
-          />
-        </YStack>
-        <div className={styles.overviewCards}>
-          <OverviewCard text={'Current APR'} value={'4.40%'} />
-          <OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
-          <OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />
-          <OverviewCard text={'Validator Queue'} value={'92603'} />
-        </div>
-      
+      <YStack space={'$5'} marginTop={'2rem'} width="150%">
+        <Text size={27} weight={'semibold'}>
+          Overview
+        </Text>
+        <Text size={19}>
+          Becoming a validator is a big responsibility with important preparation steps. Only start
+          the deposit process when you're ready.
+        </Text>
+        <Text size={15} color="#939BA1">
+          By running a validator, you'll be responsible for securing the network and receive
+          continuous payouts for actions that help the network reach consensus.
+        </Text>
+        <Text size={15} color="#939BA1">
+          Since the successful transition to proof-of-stake via The Merge, Ethereum is fully secured
+          by proof-of-stake validators. By running a validator, you'll be helping to secure the
+          Ethereum network.
+        </Text>
+        <LinkWithArrow
+          text="Learn More"
+          to={'/'}
+          arrowRight={true}
+          style={{ marginBottom: '1%', fontSize: '13px' }}
+        />
+      </YStack>
+      <div className={styles.overviewCards}>
+        <OverviewCard text={'Current APR'} value={'4.40%'} />
+        <OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
+        <OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />
+        <OverviewCard text={'Validator Queue'} value={'92603'} />
+      </div>
     </OverviewWrapper>
   )
 }

From e1c4acf1acbf6eb167b1c85eb674d70bfaedaefb Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 10:12:11 +0200
Subject: [PATCH 111/131] format

---
 src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx  | 6 +-----
 src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx       | 2 +-
 .../ValidatorSetup/ValidatorInstalling/OSCard.tsx           | 2 +-
 .../ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx | 2 +-
 4 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx b/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx
index e4464f6a..f1b1f139 100644
--- a/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/OverviewWrapper.tsx
@@ -9,11 +9,7 @@ type OverviewWrapperProps = {
   imgHeight?: string
 }
 
-const OverviewWrapper = ({
-  rightImageSrc,
-  children,
-  imgHeight,
-}: OverviewWrapperProps) => {
+const OverviewWrapper = ({ rightImageSrc, children, imgHeight }: OverviewWrapperProps) => {
   const theme = useTheme()
 
   return (
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 155cb584..8f92a7a7 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -17,7 +17,7 @@ import ContinueButton from './ContinueButton'
 import ActivationValidatorSetup from './ValidatorSetup/ValidatorActivation/ActivationValidatorSetup'
 import Deposit from './Deposit/Deposit'
 import { useWindowSize } from '../../hooks/useWindowSize'
- import styles from './layoutGradient.module.css'
+import styles from './layoutGradient.module.css'
 
 const ValidatorOnboarding = () => {
   const { activeStep, subStepValidatorSetup } = useSelector(
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
index 11216322..ce4f5beb 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
@@ -8,7 +8,7 @@ type OSCardProps = {
 }
 const OSCard = ({ name, icon }: OSCardProps) => {
   return (
-    <Stack >
+    <Stack>
       <Text size={19} weight={'semibold'}>
         {name}
       </Text>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
index dc6c6fe1..659af4a0 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
@@ -18,7 +18,7 @@ const ValidatorSetupInstall = () => {
   }
 
   return (
-    <YStack style={{ padding: '26px 32px', width:'fit-content'}} >
+    <YStack style={{ padding: '26px 32px', width: 'fit-content' }}>
       <Text size={27} weight={'semibold'}>
         Validator Setup
       </Text>

From 573855fc0fbb308a3358b2789c7e76df183a3d1c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 22 Jan 2024 14:36:42 +0200
Subject: [PATCH 112/131] feat: add timer and check icon for copy validator
 address

---
 .../General/ValidatorNameAddress.tsx          | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/General/ValidatorNameAddress.tsx b/src/components/General/ValidatorNameAddress.tsx
index fc30c1f3..3d1ad83e 100644
--- a/src/components/General/ValidatorNameAddress.tsx
+++ b/src/components/General/ValidatorNameAddress.tsx
@@ -1,6 +1,7 @@
 import { Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
-import { CopyIcon, VerifiedIcon, ContactIcon } from '@status-im/icons'
+import { CopyIcon, VerifiedIcon, ContactIcon, CheckIcon } from '@status-im/icons'
+import { useState } from 'react'
 
 import { copyFunction, getFormattedValidatorAddress } from '../../utilities'
 
@@ -17,8 +18,18 @@ const ValidatorNameAddress = ({
   isVerified,
   isAvatarChipIncluded,
 }: ValidatorNameAddressProps) => {
+  const [isCopied, setIsCopied] = useState(false)
+
   const onCopyAddress = () => {
     copyFunction(address)
+
+    if (isCopied === false) {
+      setIsCopied(true)
+
+      setTimeout(() => {
+        setIsCopied(false)
+      }, 3000)
+    }
   }
 
   return (
@@ -34,7 +45,16 @@ const ValidatorNameAddress = ({
         <Text size={13} color="#647084">
           {getFormattedValidatorAddress(address)}
         </Text>
-        <CopyIcon size={16} color="#647084" style={{ cursor: 'pointer' }} onClick={onCopyAddress} />
+        {isCopied ? (
+          <CheckIcon size={16} />
+        ) : (
+          <CopyIcon
+            size={16}
+            color="#647084"
+            style={{ cursor: 'pointer' }}
+            onClick={onCopyAddress}
+          />
+        )}
       </XStack>
     </YStack>
   )

From 08bcb779cabbd1dd6ec1b1aad6758610870baf41 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 22 Jan 2024 14:38:46 +0200
Subject: [PATCH 113/131] fix: remove timeout state for copying recovery phrase

---
 .../ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx     | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 680e7f55..052f9d78 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -15,7 +15,6 @@ type RecoveryPhraseProps = {
 const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
   const [isReveal, setIsReveal] = useState(false)
   const [isCopied, setIsCopied] = useState(false)
-  const [isTimeoutActive, setIsTimeoutActive] = useState(false)
   const { generatedMnemonic } = useSelector((state: RootState) => state.keyGeneration)
 
   useEffect(() => {
@@ -29,13 +28,11 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
   const copyRecoveryPhraseHandler = () => {
     copyFunction(generatedMnemonic.join(' '))
 
-    if (!isTimeoutActive) {
+    if (isCopied === false) {
       setIsCopied(true)
-      setIsTimeoutActive(true)
 
       setTimeout(() => {
         setIsCopied(false)
-        setIsTimeoutActive(false)
       }, 3000)
     }
   }

From 590cb6a9efc83d525c98088be5c595266d15a4d0 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 22 Jan 2024 14:39:48 +0200
Subject: [PATCH 114/131] feat: add color for check icon after copy validator

---
 src/components/General/ValidatorNameAddress.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/General/ValidatorNameAddress.tsx b/src/components/General/ValidatorNameAddress.tsx
index 3d1ad83e..20f612c2 100644
--- a/src/components/General/ValidatorNameAddress.tsx
+++ b/src/components/General/ValidatorNameAddress.tsx
@@ -46,7 +46,7 @@ const ValidatorNameAddress = ({
           {getFormattedValidatorAddress(address)}
         </Text>
         {isCopied ? (
-          <CheckIcon size={16} />
+          <CheckIcon size={16} color="#647084" />
         ) : (
           <CopyIcon
             size={16}

From 771d9a1bf1dbcfb5ce1c4e61504d11511c0be0b2 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 15:45:57 +0200
Subject: [PATCH 115/131] fix advisories

---
 .../Advisories/advisoriesLayout.css           | 14 -----------
 .../Advisories/advisoriesLayout.module.css    | 25 +++++++++++++++++++
 2 files changed, 25 insertions(+), 14 deletions(-)
 delete mode 100644 src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css
 create mode 100644 src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.module.css

diff --git a/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css b/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css
deleted file mode 100644
index 92bc241f..00000000
--- a/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.advisories-container {
-  padding: 30px;
-  justify-content: space-between;
-  min-height: 65vh;
-  width: 100%;
-  display: grid;
-}
-
-@media screen and (max-width: 1000px) {
-  .advisories-container {
-    flex-wrap: wrap;
-    margin: 30;
-  }
-}
diff --git a/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.module.css b/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.module.css
new file mode 100644
index 00000000..61411116
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Advisories/advisoriesLayout.module.css
@@ -0,0 +1,25 @@
+.advisories-container {
+  display: flex;
+  padding: 30px;
+  justify-content: space-between;
+  width: auto;
+}
+.advisories-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+@media screen and (max-width: 780px) {
+  .advisories-container {
+    flex-direction: column;
+    align-items: start;
+    gap: 20px;
+  }
+  .advisories-nav {
+    width: 100%;
+    gap: 10px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: start;
+  }
+}

From 142f22506928243d72eb1cb5c4590d8c4610d2de Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 15:46:28 +0200
Subject: [PATCH 116/131] Update Advisories.tsx

---
 .../Advisories/Advisories.tsx                 | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
index 865c3028..fd210412 100644
--- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
+++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
@@ -7,7 +7,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../../redux/store'
 import { setSubStepAdvisories } from '../../../redux/ValidatorOnboarding/Advisories/slice'
 import { ADVISORY_TOPICS } from '../../../constants'
-import './advisoriesLayout.css'
+import styles from './advisoriesLayout.module.css'
 
 const Advisories = () => {
   const dispatch = useDispatch()
@@ -50,40 +50,42 @@ const Advisories = () => {
   }
 
   return (
-    <XStack className="advisories-container">
+    <div className={styles['advisories-container']}>
       <YStack space={'$2'} marginBottom={'30px'}>
         <Stack marginBottom="$6">
           <Text size={27} weight={'semibold'}>
             Advisories
           </Text>
         </Stack>
-        {Object.keys(ADVISORY_TOPICS).map((title, index) => (
-          <XStack
-            key={title}
-            onPress={() => handleStepClick(title)}
-            style={{ cursor: 'pointer', alignItems: 'center' }}
-            space={'$2'}
-          >
-            <Text
-              size={19}
-              weight={isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'}
-              color={isCompleted(index) || isCurrent(title) ? 'blue' : 'default'}
+        <div className={styles['advisories-nav']}>
+          {Object.keys(ADVISORY_TOPICS).map((title, index) => (
+            <XStack
+              key={title}
+              onPress={() => handleStepClick(title)}
+              style={{ cursor: 'pointer', alignItems: 'center' }}
+              space={'$2'}
             >
-              {advisoriesIcons[index]}
-            </Text>
-            <Text
-              size={19}
-              weight={isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'}
-              color={isCompleted(index) || isCurrent(title) ? 'blue' : 'default'}
-            >
-              {title}
-            </Text>
-          </XStack>
-        ))}
+              <Text
+                size={19}
+                weight={isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'}
+                color={isCompleted(index) || isCurrent(title) ? 'blue' : 'default'}
+              >
+                {advisoriesIcons[index]}
+              </Text>
+              <Text
+                size={19}
+                weight={isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'}
+                color={isCompleted(index) || isCurrent(title) ? 'blue' : 'default'}
+              >
+                {title}
+              </Text>
+            </XStack>
+          ))}
+        </div>
       </YStack>
 
       <AdvisoriesContent title={selectedTitle} content={ADVISORY_TOPICS[selectedTitle]} />
-    </XStack>
+    </div>
   )
 }
 

From 3043be8ebdc696b8edc837ae96d3a93584403229 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 22 Jan 2024 15:48:45 +0200
Subject: [PATCH 117/131] fix: add space for validators menu price

---
 src/components/General/ValidatorsMenuWithPrice.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/General/ValidatorsMenuWithPrice.tsx b/src/components/General/ValidatorsMenuWithPrice.tsx
index 2793d86c..4d9588c4 100644
--- a/src/components/General/ValidatorsMenuWithPrice.tsx
+++ b/src/components/General/ValidatorsMenuWithPrice.tsx
@@ -36,6 +36,7 @@ const ValidatorsMenuWithPrice = ({
     <ResponsiveStack
       isVerticalAligned={media.sm}
       style={{ justifyContent: 'space-between', width: media.lg ? '100%' : '80%' }}
+      space={'$2'}
     >
       <Stack space={'$2'}>
         <Text size={15} weight="regular" color={'#647084'}>

From 72b2988525e63ecf75b1c2a21321e16ee8dce5a1 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 15:56:33 +0200
Subject: [PATCH 118/131] fix size of number icon

---
 src/pages/ValidatorOnboarding/Advisories/Advisories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
index fd210412..60c0515e 100644
--- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
+++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
@@ -66,7 +66,7 @@ const Advisories = () => {
               space={'$2'}
             >
               <Text
-                size={19}
+                size={27}
                 weight={isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'}
                 color={isCompleted(index) || isCurrent(title) ? 'blue' : 'default'}
               >

From a21725eb562bc9f14b436657babe5cac7a940180 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 22 Jan 2024 16:08:16 +0200
Subject: [PATCH 119/131] fix: remove not used XStack

---
 src/pages/ValidatorOnboarding/Overview/Overview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 91fe7715..09015dbc 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -1,4 +1,4 @@
-import { XStack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 
 import OverviewCard from './OverviewCard'

From 4295fe483eae8f7c731f07cfe5ee0269b12d45e3 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 16:11:28 +0200
Subject: [PATCH 120/131] Update Overview.tsx

---
 src/pages/ValidatorOnboarding/Overview/Overview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 91fe7715..8a1fe431 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -1,4 +1,4 @@
-import { XStack, YStack } from 'tamagui'
+import {   YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 
 import OverviewCard from './OverviewCard'
@@ -12,7 +12,7 @@ const Overview = () => {
       imgHeight="250%"
       rightImageSrc="./background-images/sync-status-background.png"
     >
-      <YStack space={'$5'} marginTop={'2rem'} width="150%">
+      <YStack space={'$5'} marginTop={'2rem'} width="100%">
         <Text size={27} weight={'semibold'}>
           Overview
         </Text>

From 63340c0e7e072a7166a7d31ce09c95d4835135a9 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 16:11:29 +0200
Subject: [PATCH 121/131] Update overviewLayout.module.css

---
 src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
index 37090b51..fe3ca803 100644
--- a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
+++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
@@ -1,7 +1,6 @@
 .overviewCards {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   width: 250%;

From b05e4b020fb6b3aa1dea4ba0eda6608057ba6bba Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 16:15:16 +0200
Subject: [PATCH 122/131] Update overviewLayout.module.css

---
 .../ValidatorOnboarding/Overview/overviewLayout.module.css      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
index fe3ca803..97c5ffec 100644
--- a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
+++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
@@ -11,7 +11,7 @@
   border: 1px solid rgba(0, 0, 0, 0.15);
   padding: 12px 16px;
   background-color: #fff;
-  min-width: 220px;
+  min-width: 180px;
 }
 
 @media screen and (max-width: 1000px) {

From 5dd369ea4ae5eb732c6146c7438d740bde709030 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 16:16:11 +0200
Subject: [PATCH 123/131] Update overviewLayout.module.css

---
 src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
index 97c5ffec..9a1a21fe 100644
--- a/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
+++ b/src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
@@ -4,7 +4,6 @@
   gap: 16px;
   flex-wrap: wrap;
   width: 250%;
-  margin-top: 10%;
 }
 .overviewCard {
   border-radius: 16px;

From 4412fb7283395307bf0534ca4a8219435b034b6c Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 16:35:34 +0200
Subject: [PATCH 124/131] Update InstallLayout.module.css

---
 .../ValidatorInstalling/InstallLayout.module.css              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
index 3808ee16..f95f66da 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
@@ -34,9 +34,9 @@
     grid-template-columns: repeat(1, 1fr);
   }
   .osCard {
-    width: 90%;
+    width: 100%;
   }
   .osCard:nth-child(3) {
-    width: 90%;
+    width: 100%;
   }
 }

From d73a403147b45ff0d22bf06f657dd00aa3bd7056 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 22 Jan 2024 19:48:51 +0200
Subject: [PATCH 125/131] feat: make new algorithm for stepper responsiveness

---
 .../FormStepper/FormStepper.tsx               | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index e8226140..bb3ac14b 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -14,21 +14,36 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
   const dispatch = useDispatch()
   const windowSize = useWindowSize()
 
-  const getIsStepVisible = (index: number, startNumber: number, endNumber: number) => {
-    const start = Math.min(startNumber, activeStep - 1)
-    const end = Math.max(FORM_STEPS.length - endNumber, activeStep + 1)
+  const getIsStepVisible = (index: number, stepsBefore: number, stepsAfter: number) => {
+    const totalSteps = FORM_STEPS.length
+    let start = activeStep - stepsBefore
+    let end = activeStep + stepsAfter
+
+    // active step is near the start or end
+    if (start < 0) {
+      end -= start
+      start = 0
+    }
+    if (end >= totalSteps) {
+      start -= end - totalSteps + 1
+      end = totalSteps - 1
+    }
+
+    start = Math.max(0, start)
+    end = Math.min(end, totalSteps - 1)
+
     return index >= start && index <= end
   }
 
   const isStepVisible = (index: number) => {
     if (windowSize.width < 774) {
-      return getIsStepVisible(index, 3, 5)
+      return getIsStepVisible(index, 1, 1) // 3 steps (1 before, 1 after)
     } else if (windowSize.width < 963) {
-      return getIsStepVisible(index, 2, 4)
-    } else if (windowSize.width < 1152) {
-      return getIsStepVisible(index, 1, 3)
+      return getIsStepVisible(index, 1, 2) // 4 steps
+    } else if (windowSize.width < 1183) {
+      return getIsStepVisible(index, 1, 3) // 5 steps
     } else if (windowSize.width < 1300) {
-      return getIsStepVisible(index, 0, 2)
+      return getIsStepVisible(index, 2, 3) // 6 steps
     } else {
       return true
     }

From 89f519b583cdaca3b2f9bbe74789c1bf572f2a45 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 22 Jan 2024 20:04:00 +0200
Subject: [PATCH 126/131] feat: change subtitle font size for smaller screen

---
 src/pages/ValidatorOnboarding/FormStepper/FormStepper.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
index fb5373fa..d6baf2d2 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
@@ -59,3 +59,9 @@ span[class*='Connector-'] {
   color: #a2a9b0;
   width: max-content;
 }
+
+@media (max-width: 410px) {
+  .custom-step::after {
+    font-size: 10px;
+  }
+}
\ No newline at end of file

From c53a8ed8dff23b315f48796e7cbe400d51b2150c Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 20:09:58 +0200
Subject: [PATCH 127/131] format

---
 src/pages/ValidatorOnboarding/Overview/Overview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 8a1fe431..0e564336 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -1,4 +1,4 @@
-import {   YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 
 import OverviewCard from './OverviewCard'

From 6dfe6c6c54c2ff53446c87addea9ec5cbc36f914 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 20:10:05 +0200
Subject: [PATCH 128/131] clear warning

---
 .../ValidatorOnboarding/ContinueButton.tsx    |  6 ++---
 .../FormStepper/FormStepper.css               |  2 +-
 .../ValidatorOnboarding/Advisories/slice.ts   | 23 -------------------
 3 files changed, 3 insertions(+), 28 deletions(-)
 delete mode 100644 src/redux/ValidatorOnboarding/Advisories/slice.ts

diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx
index e2fbd38c..fe7783e7 100644
--- a/src/pages/ValidatorOnboarding/ContinueButton.tsx
+++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx
@@ -15,8 +15,7 @@ import {
   setIsCopyPastedPhrase,
   setValidWords,
 } from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
-import { setSubStepAdvisories } from '../../redux/ValidatorOnboarding/Advisories/slice'
-
+ 
 const ContinueButton = () => {
   const [isDisabled, setIsDisabled] = useState(false)
   const {
@@ -32,8 +31,7 @@ const ContinueButton = () => {
     (state: RootState) => state.validatorOnboarding,
   )
   const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup)
-  const { subStepAdvisories } = useSelector((state: RootState) => state.advisories)
-
+ 
   const dispatch = useDispatch()
   const navigate = useNavigate()
   const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
index d6baf2d2..42da0daf 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
@@ -64,4 +64,4 @@ span[class*='Connector-'] {
   .custom-step::after {
     font-size: 10px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/redux/ValidatorOnboarding/Advisories/slice.ts b/src/redux/ValidatorOnboarding/Advisories/slice.ts
deleted file mode 100644
index f18a3b96..00000000
--- a/src/redux/ValidatorOnboarding/Advisories/slice.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-
-interface AdvisoriesState {
-  subStepAdvisories: number
-}
-
-const initialState = {
-  subStepAdvisories: 0,
-}
-
-const AdvisoriesSlice = createSlice({
-  name: 'advisories',
-  initialState,
-  reducers: {
-    setSubStepAdvisories: (state: AdvisoriesState, action: PayloadAction<number>) => {
-      state.subStepAdvisories = action.payload
-    },
-  },
-})
-
-export const { setSubStepAdvisories } = AdvisoriesSlice.actions
-
-export default AdvisoriesSlice.reducer

From c207a0f037741a85dba11ad2c0d758bd18484b4c Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 20:18:36 +0200
Subject: [PATCH 129/131] Revert "clear warning"

This reverts commit 6dfe6c6c54c2ff53446c87addea9ec5cbc36f914.
---
 .../ValidatorOnboarding/ContinueButton.tsx    |  6 +++--
 .../FormStepper/FormStepper.css               |  2 +-
 .../ValidatorOnboarding/Advisories/slice.ts   | 23 +++++++++++++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/redux/ValidatorOnboarding/Advisories/slice.ts

diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx
index fe7783e7..e2fbd38c 100644
--- a/src/pages/ValidatorOnboarding/ContinueButton.tsx
+++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx
@@ -15,7 +15,8 @@ import {
   setIsCopyPastedPhrase,
   setValidWords,
 } from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
- 
+import { setSubStepAdvisories } from '../../redux/ValidatorOnboarding/Advisories/slice'
+
 const ContinueButton = () => {
   const [isDisabled, setIsDisabled] = useState(false)
   const {
@@ -31,7 +32,8 @@ const ContinueButton = () => {
     (state: RootState) => state.validatorOnboarding,
   )
   const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup)
- 
+  const { subStepAdvisories } = useSelector((state: RootState) => state.advisories)
+
   const dispatch = useDispatch()
   const navigate = useNavigate()
   const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
index 42da0daf..d6baf2d2 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
@@ -64,4 +64,4 @@ span[class*='Connector-'] {
   .custom-step::after {
     font-size: 10px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/redux/ValidatorOnboarding/Advisories/slice.ts b/src/redux/ValidatorOnboarding/Advisories/slice.ts
new file mode 100644
index 00000000..f18a3b96
--- /dev/null
+++ b/src/redux/ValidatorOnboarding/Advisories/slice.ts
@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+interface AdvisoriesState {
+  subStepAdvisories: number
+}
+
+const initialState = {
+  subStepAdvisories: 0,
+}
+
+const AdvisoriesSlice = createSlice({
+  name: 'advisories',
+  initialState,
+  reducers: {
+    setSubStepAdvisories: (state: AdvisoriesState, action: PayloadAction<number>) => {
+      state.subStepAdvisories = action.payload
+    },
+  },
+})
+
+export const { setSubStepAdvisories } = AdvisoriesSlice.actions
+
+export default AdvisoriesSlice.reducer

From f80d786e4ea81d237fb7cffa1d506fdb3c51bfa7 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 22 Jan 2024 20:21:34 +0200
Subject: [PATCH 130/131] Update ContinueButton.tsx

---
 src/pages/ValidatorOnboarding/ContinueButton.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx
index e2fbd38c..e04daba7 100644
--- a/src/pages/ValidatorOnboarding/ContinueButton.tsx
+++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx
@@ -15,8 +15,7 @@ import {
   setIsCopyPastedPhrase,
   setValidWords,
 } from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
-import { setSubStepAdvisories } from '../../redux/ValidatorOnboarding/Advisories/slice'
-
+ 
 const ContinueButton = () => {
   const [isDisabled, setIsDisabled] = useState(false)
   const {
@@ -32,8 +31,7 @@ const ContinueButton = () => {
     (state: RootState) => state.validatorOnboarding,
   )
   const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup)
-  const { subStepAdvisories } = useSelector((state: RootState) => state.advisories)
-
+  
   const dispatch = useDispatch()
   const navigate = useNavigate()
   const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3

From f3941e7a6ba78f6ba742d0f34096420b685dbfea Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 22 Jan 2024 20:42:06 +0200
Subject: [PATCH 131/131] fix: formatting continue btn and format stepper css

---
 src/pages/ValidatorOnboarding/ContinueButton.tsx          | 4 ++--
 src/pages/ValidatorOnboarding/FormStepper/FormStepper.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx
index e04daba7..672aa11b 100644
--- a/src/pages/ValidatorOnboarding/ContinueButton.tsx
+++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx
@@ -15,7 +15,7 @@ import {
   setIsCopyPastedPhrase,
   setValidWords,
 } from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
- 
+
 const ContinueButton = () => {
   const [isDisabled, setIsDisabled] = useState(false)
   const {
@@ -31,7 +31,7 @@ const ContinueButton = () => {
     (state: RootState) => state.validatorOnboarding,
   )
   const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup)
-  
+
   const dispatch = useDispatch()
   const navigate = useNavigate()
   const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
index d6baf2d2..42da0daf 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
@@ -64,4 +64,4 @@ span[class*='Connector-'] {
   .custom-step::after {
     font-size: 10px;
   }
-}
\ No newline at end of file
+}