fix: font sizes and pixels here and there

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>

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">

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>

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'}
     >

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: