From 593819d8bf4f97181a6b9f134462919a38c876da Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Thu, 7 Sep 2023 14:39:08 +0300
Subject: [PATCH] feat: make all y stacks to be the same height

---
 .../ClientSetup/ClientSetup.tsx               |  2 +-
 .../ValidatorOnboarding/Overview/Overview.tsx | 54 +++++++++++--------
 .../ValidatorSetup/ValidatorSetup.tsx         | 14 +++--
 3 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
index 5675f892..aa69ed88 100644
--- a/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
+++ b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
@@ -6,7 +6,7 @@ import LinkWithArrow from '../../../components/General/LinkWithArrow'
 
 const ClientSetup = () => {
   return (
-    <YStack padding={'26px'} width={'100%'} space={'$8'}>
+    <YStack space={'$8'} padding={'26px'} width={'100%'} minHeight={'65vh'}>
       <SetupRow title={'Setup up Validators'} />
       <Separator borderColor={'#F0F2F5'} />
       <WithdrawalAddress title={'Withdrawal address'} />
diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 7f32491f..898fd087 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -7,29 +7,37 @@ import LinkWithArrow from '../../../components/General/LinkWithArrow'
 const Overview = () => {
   return (
     <>
-      <YStack className="layout-left" space={'$5'} style={{ padding: '26px 0 32px 32px' }}>
-        <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
+        className="layout-left"
+        space={'$5'}
+        style={{ padding: '26px 0 32px 32px' }}
+        minHeight={'65vh'}
+        justifyContent={'space-between'}
+      >
+        <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'} />
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
index 2fc1e5e6..05b392b9 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
@@ -7,8 +7,12 @@ import LinkWithArrow from '../../../components/General/LinkWithArrow'
 
 const ValidatorSetup = () => {
   return (
-    <YStack style={{ width: '100%', padding: '16px 32px' }}>
-      <XStack justifyContent={'space-between'}>
+    <YStack
+      style={{ width: '100%', padding: '26px 32px' }}
+      minHeight={'65vh'}
+      justifyContent={'space-between'}
+    >
+      <XStack justifyContent={'space-between'} alignItems={'center'}>
         <Text size={27} weight={'semibold'}>
           Validator Setup
         </Text>
@@ -21,7 +25,7 @@ const ValidatorSetup = () => {
             Execution Client Detection
           </Text>
         </Stack>
-        <Text size={15} weight={'regular'}>
+        <Text size={15}>
           No existing execution client installations have been detected on paired device.
         </Text>
         <Text size={13} color="#828282">
@@ -30,7 +34,7 @@ const ValidatorSetup = () => {
         </Text>
       </YStack>
 
-      <TextTam fontSize={27} style={{ margin: '5px', marginLeft: 0 }}>
+      <TextTam fontSize={27} style={{ marginTop: '15px', marginLeft: 0, marginBottom: '15px' }}>
         Select Execution client
       </TextTam>
       <XStack justifyContent={'space-between'}>
@@ -43,7 +47,7 @@ const ValidatorSetup = () => {
       <LinkWithArrow
         to="/"
         text="View Execution client comparison chart"
-        style={{ marginTop: '6%' }}
+        style={{ marginTop: '6%', fontWeight: 'bold' }}
       />
     </YStack>
   )