Merge branch 'hn.validator-onboarding' of https://github.com/nimbus-gui/nimbus-gui into hn.validator-onboarding

src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx

@@ -2,8 +2,7 @@ import { Stack, YStack } from 'tamagui'
 import Icon from '../../../components/General/Icon'
 import { Text } from '@status-im/components'
 
-// make func component
-
+ 
 type OsCardProps = {
   name: string
   icon: string
@@ -18,7 +17,7 @@ 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: '30%',
+        width: '33%',
       }}
       space={'$12'}
       onPress={onClick}

src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.tsx

@@ -1,24 +1,25 @@
 import { YStack } from 'tamagui'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism'
 type SyntaxHighlighterBoxProps = {
   rows: string[]
 }
 
 const customStyle = {
-    ...solarizedlight,
-    'pre[class*="language-"]': {
-      ...solarizedlight['pre[class*="language-"]'],
-      backgroundColor: 'white',
-    }
-  };
+  ...solarizedlight,
+  'pre[class*="language-"]': {
+    ...solarizedlight['pre[class*="language-"]'],
+    backgroundColor: 'white',
+  },
+}
 const SyntaxHighlighterBox = ({ rows }: SyntaxHighlighterBoxProps) => {
   return (
-    <YStack style={{ borderRadius: '15px' }}>
+    <YStack>
       <SyntaxHighlighter
         language="bash"
         style={customStyle}
         showLineNumbers={true}
+        lineNumberStyle={{ backgroundColor: '#E7EAEE', color: 'black' }}
       >
         {`${rows.join('\n')}`}
       </SyntaxHighlighter>

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx

@@ -58,8 +58,8 @@ const ValidatorSetupInstall = () => {
                 commands add the Geth tap and install Geth:
               </Text>
             </YStack>
-            {/* Cards */}
-            <XStack justifyContent={'space-between'} space={'$3'} margin={'50px 0px'}>
+
+            <XStack justifyContent={'space-between'} space={'$2'} margin={'50px 0px'}>
               <OsCard
                 icon="/icons/MAC.png"
                 name="Mac"