From f3ad8aa6b47965f3f9de1f3dfa09e6c5bd2d742e Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Thu, 7 Sep 2023 15:03:07 +0300
Subject: [PATCH] fix: font sizes and pixels here and there

---
 .../ValidatorSetup/ConsensusClientCard.tsx    |  4 ++--
 .../ValidatorSetup/ExecClientCard.tsx         |  8 ++++----
 .../ValidatorSetup/OsCard.tsx                 |  6 +++---
 .../ValidatorSetup/PairedDeviceCard.tsx       |  4 ++--
 .../ValidatorSetup/ValidatorInstall.tsx       | 20 +++++++++----------
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx
index 7ea640d9..402c062b 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx
@@ -18,10 +18,10 @@ const ConsensusClientCard = ({ name, icon }: ConsensusClientCardProps) => {
         padding: '12px 16px',
         width: '29%',
       }}
-      space={'$10'}
+      space={'$8'}
     >
       <Stack>
-        <Text size={27} weight={'semibold'}>
+        <Text size={15} weight={'semibold'}>
           {name}
         </Text>
       </Stack>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx
index 6dced07c..c11b3597 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx
@@ -30,13 +30,13 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
         padding: '12px 16px',
         width: '19%',
       }}
-      space={'$12'}
+      space={'$8'}
       onClick={() => {
         dispatch(selectClient(name))
       }}
     >
       <Stack>
-        <Text size={27} weight={'semibold'} color={isComingSoon ? '#DCE0E5' : ''}>
+        <Text size={19} weight={'semibold'} color={isComingSoon ? '#DCE0E5' : ''}>
           {name}
         </Text>
         {isComingSoon && (
@@ -46,9 +46,9 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
-              padding: '3px',
+              padding: '3px 6px',
               borderRadius: '67px',
-              width: '50%',
+              width: 'fit-content',
             }}
           >
             <Text size={11} color="#fff">
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx
index 777e3fd4..379e96f9 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx
@@ -18,13 +18,13 @@ const OsCard = ({ name, icon, onClick, isSelected }: OsCardProps) => {
         border: isSelected ? '1px solid #2A4AF566' : '1px solid rgba(0, 0, 0, 0.15);',
         borderRadius: '16px',
         padding: '12px 16px',
-        width: '33%',
+        width: '32%',
       }}
-      space={'$12'}
+      space={'$8'}
       onPress={onClick}
     >
       <Stack>
-        <Text size={27} weight={'semibold'}>
+        <Text size={19} weight={'semibold'}>
           {name}
         </Text>
       </Stack>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx
index 1507c05e..8fa4f9ed 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx
@@ -20,9 +20,9 @@ const PairedDeviceCard = ({ isVisibleState }: PairedDeviceCardProps) => {
     <XStack
       space={'$7'}
       style={{
-        padding: '2px 6px',
+        padding: '6px 12px',
         border: '1px solid #DCE0E5',
-        borderRadius: '15px',
+        borderRadius: '10px',
       }}
       alignItems={'center'}
     >
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
index bea12dd4..d3fc7deb 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
@@ -13,7 +13,7 @@ const ValidatorSetupInstall = () => {
   const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
 
   return (
-    <YStack style={{ width: '100%', padding: '16px 32px' }}>
+    <YStack style={{ width: '100%', padding: '26px 32px' }}>
       <XStack justifyContent={'space-between'} style={{ marginBottom: '10px' }}>
         <Text size={27} weight={'semibold'}>
           Validator Setup
@@ -23,7 +23,7 @@ const ValidatorSetupInstall = () => {
       <YStack>
         <Stack style={{ marginBottom: '4px' }}>
           <YStack space={'$3'}>
-            <Text size={19} weight={'semibold'}>
+            <Text size={15} weight={'semibold'}>
               {selectedClient}
             </Text>
 
@@ -41,12 +41,12 @@ const ValidatorSetupInstall = () => {
               style={{
                 border: '1px solid #00000026',
                 borderRadius: '16px',
-                padding: '6px 12px',
+                padding: '19px 16px',
               }}
               space={'$3'}
             >
-              <Text size={27}> Installing {selectedClient}</Text>
-              <Text size={19} color="#647084" weight={'regular'}>
+              <Text size={19}> Installing {selectedClient}</Text>
+              <Text size={15} color="#647084" weight={'regular'}>
                 There are several ways to install Geth, including via a package manager, downloading
                 a pre-built bundle, running as a docker container or building from downloaded source
                 code. On this page the various installation options are explained for several major
@@ -59,10 +59,10 @@ const ValidatorSetupInstall = () => {
                 are also provided in each section.
               </Text>
 
-              <XStack justifyContent={'space-between'} space={'$2'} margin={'50px 0px'}>
+              <XStack justifyContent={'space-between'} my={'15px'}>
                 <OsCard
                   icon="/icons/MAC.png"
-                  name="Mac"
+                  name="MacOS"
                   isSelected={selectedOs === 'Mac'}
                   onClick={() => setSelectedOs('Mac')}
                 />
@@ -80,17 +80,17 @@ const ValidatorSetupInstall = () => {
                 />
               </XStack>
               <YStack space={'$2'}>
-                <Text size={27}> Package Managers</Text>
+                <Text size={19}> Package Managers</Text>
                 <Text size={15} weight={'semibold'}>
                   MacOS via Homebrew
                 </Text>
-                <Text size={19} color="#647084" weight={'regular'}>
+                <Text size={15} color="#647084">
                   The easiest way to install go-ethereum is to use the Geth Homebrew tap. The first
                   step is to check that Homebrew is installed. The following command should return a
                   version number.
                 </Text>
                 <SyntaxHighlighterBox rows={['brew -v']} />
-                <Text size={19} color="#647084" weight={'regular'}>
+                <Text size={15} color="#647084">
                   If a version number is returned, then Homebrew is installed. If not, Homebrew can
                   be installed by following the instructions here. With Homebrew installed, the
                   following commands add the Geth tap and install Geth: