Add OS Cards

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -11,6 +11,7 @@ import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper'
 import { Button } from '@status-im/components'
 import { useNavigate } from 'react-router-dom'
 import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
+import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)

src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx

@@ -0,0 +1,33 @@
+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
+  isSelected?: boolean
+}
+const OsCard = ({ name, icon, isSelected }: OsCardProps) => {
+  return (
+    <YStack
+      style={{
+        backgroundColor: isSelected ? '#2A4AF50D' : 'none',
+        border: isSelected ? '1px solid #2A4AF566' : '1px solid rgba(0, 0, 0, 0.15);',
+        borderRadius: '16px',
+        padding: '12px 16px',
+        width: '30%',
+      }}
+      space={'$12'}
+    >
+      <Stack>
+        <Text size={27} weight={'semibold'}>
+          {name}
+        </Text>
+      </Stack>
+      <Icon src={icon} width={100} height={100} />
+    </YStack>
+  )
+}
+export default OsCard

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx

@@ -1,6 +1,7 @@
 import { XStack, Stack, YStack } from 'tamagui'
 import { InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
+import OsCard from './OsCard'
 
 const ValidatorSetupInstall = () => {
   return (
@@ -34,6 +35,7 @@ const ValidatorSetupInstall = () => {
                 borderRadius: '15px',
                 padding: '6px 12px',
               }}
+              space={'$3'}
             >
               <Text size={27}> Installing Geth</Text>
               <Text size={13}>
@@ -49,6 +51,12 @@ const ValidatorSetupInstall = () => {
                 are also provided in each section.
               </Text>
             </YStack>
+            {/* Cards */}
+            <XStack justifyContent={'space-between'} space={'$3'}>
+              <OsCard icon="/icons/MAC.png" name="Mac" isSelected={true}></OsCard>
+              <OsCard icon="/icons/Linux.png" name="Linux"></OsCard>
+              <OsCard icon="/icons/windows.png" name="Windows"></OsCard>
+            </XStack>
           </YStack>
         </Stack>
       </YStack>