From 8b6751d8b8d5444d48ac5ec7eb5759b86b07cce4 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Thu, 7 Sep 2023 15:10:21 +0300
Subject: [PATCH] fix: small changes to sizing and font sizes

---
 .../ValidatorOnboarding/Activation/Activation.tsx | 10 +++++-----
 .../Activation/ActivationCard.tsx                 |  4 ++--
 .../ConfirmRecoveryPhrase.tsx                     |  2 +-
 .../ValidatorSetup/ConsensusSelection.tsx         | 15 ++++++++-------
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
index 07678c79..b7ce1dbf 100644
--- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx
+++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
@@ -35,20 +35,20 @@ const Activation = () => {
   }, [])
 
   return (
-    <Stack style={styles.confettiContainer} width={'100%'}>
+    <Stack style={styles.confettiContainer} width={'100%'} minHeight={'65vh'}>
       {showConfetti && <Confetti style={styles.confettiCanvas} />}
-      <YStack style={{ padding: '16px 32px' }}>
+      <YStack style={{ padding: '26px 32px' }}>
         <YStack space={'$5'}>
           <Text size={27} weight={'semibold'}>
             Activation
           </Text>
           <Stack style={{ width: '66%' }}>
-            <Text size={27}>
+            <Text size={19}>
               Congratulations! You have successfully setup your Nimbus Validators and are currently
               syncing your nodes.
             </Text>
           </Stack>
-          <YStack space={'$3'} marginTop={'10px'} width={'33%'}>
+          <YStack space={'$3'} marginTop={'25px'} width={'33%'}>
             <XStack space={'$3'} justifyContent={'space-between'}>
               <ActivationCard text="Validators" value="4" />
               <ActivationCard
@@ -77,7 +77,7 @@ const Activation = () => {
           text="Edit Validators"
           to="/"
           arrowLeft={true}
-          style={{ marginTop: '44px', marginBottom: '88px' }}
+          style={{ marginTop: '44px', marginBottom: '88px', fontSize: '13px' }}
         />
       </YStack>
     </Stack>
diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx
index befba796..cca9b23f 100644
--- a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx
+++ b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx
@@ -30,7 +30,7 @@ const ActivationCard = ({
       }}
     >
       {!isGaugeIncluded && (
-        <Stack>
+        <Stack space={'$2'}>
           <Text size={15} weight={'semibold'}>
             {text}
           </Text>
@@ -40,7 +40,7 @@ const ActivationCard = ({
         </Stack>
       )}
       {isGaugeIncluded && (
-        <Stack>
+        <Stack space={'$2'}>
           <Text size={15} weight={'semibold'}>
             {text}
           </Text>
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx
index 20521db4..b0112061 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx
@@ -8,7 +8,7 @@ const ConfirmRecoveryPhrase = () => {
   return (
     <YStack space={'$4'} style={{ width: '100%', marginTop: '20px' }}>
       <KeyGenerationTitle />
-      <Text size={27}>Confirm Recovery Phrase</Text>
+      <Text size={19}>Confirm Recovery Phrase</Text>
       <Stack
         style={{
           display: 'grid',
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx
index 4bed105e..b761704f 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx
@@ -32,29 +32,29 @@ const ConsensusSelection = () => {
   ]
 
   return (
-    <YStack style={{ width: '100%', padding: '32px' }}>
-      <XStack justifyContent={'space-between'}>
+    <YStack style={{ width: '100%', padding: '32px' }} minHeight={'65vh'}>
+      <XStack justifyContent={'space-between'} alignItems={'center'} mb={'30px'}>
         <Text size={27} weight={'semibold'}>
           Validator Setup
         </Text>
         <XStack space={'$2'}>
+          <PairedDeviceCard isVisibleState={true} />
           <ConsensusGaugeCard
             color="blue"
             synced={134879}
             title="Execution Sync Status"
             total={150000}
           />
-          <PairedDeviceCard isVisibleState={true} />
         </XStack>
       </XStack>
 
-      <YStack>
+      <YStack mb={'50px'}>
         <Stack style={{ marginBottom: '4px' }}>
           <Text size={13} color="#647084">
             Consensus 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">
@@ -63,14 +63,14 @@ const ConsensusSelection = () => {
         </Text>
       </YStack>
 
-      <TextTam fontSize={27} style={{ margin: '5px', marginLeft: 0, marginTop: '50px' }}>
+      <TextTam fontSize={19} style={{ marginLeft: 0, marginTop: '50px', marginBottom: '25px' }}>
         Install Consensus client
       </TextTam>
 
       <XStack space={'$8'}>
         <ConsensusClientCard name={clients[0].name} icon={clients[0].icon} />
         <YStack width={'67%'} space={'$4'}>
-          <Text size={27}>The resource efficient Ethereum Clients.</Text>
+          <Text size={19}>The resource efficient Ethereum Clients.</Text>
           <Text size={15}>
             {selectedClient} is a client implementation for both execution and consensus layers that
             strives to be as lightweight as possible in terms of resources used. This allows it to
@@ -81,6 +81,7 @@ const ConsensusSelection = () => {
             <LinkWithArrow
               textColor="black"
               text="Nimbus Documentation"
+              style={{ fontSize: '15px' }}
               arrowRight={true}
               to="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
             />