From 0cd5ff1c5429c7a076f68fcad4af2f236cbf68da Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 23 Oct 2023 20:46:56 +0300
Subject: [PATCH] feat: use os cards new component

---
 .../ValidatorInstalling/ValidatorInstall.tsx  | 28 ++-----------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
index 605d37b8..556d4b0a 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
@@ -1,16 +1,13 @@
 import { XStack, Stack, YStack } from 'tamagui'
 import { InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
-import { useState } from 'react'
 import { useSelector } from 'react-redux'
 
-import SyntaxHighlighterBox from './SyntaxHighlighter'
 import { RootState } from '../../../../redux/store'
-import { LINUX, MAC, WINDOWS } from '../../../../constants'
-import OSCard from './OSCard'
+import SyntaxHighlighterBox from './SyntaxHighlighter'
+import OSCards from './OSCards'
 
 const ValidatorSetupInstall = () => {
-  const [selectedOs, setSelectedOs] = useState(MAC)
   const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
 
   return (
@@ -56,26 +53,7 @@ const ValidatorSetupInstall = () => {
                 releases can be found here. Instructions for updating existing Geth installations
                 are also provided in each section.
               </Text>
-              <XStack justifyContent={'space-between'} my={'15px'}>
-                <OSCard
-                  icon="/icons/apple-logo.svg"
-                  name="MacOS"
-                  isSelected={selectedOs === MAC}
-                  onClick={() => setSelectedOs(MAC)}
-                />
-                <OSCard
-                  icon="/icons/linux-logo.svg"
-                  name={LINUX}
-                  isSelected={selectedOs === LINUX}
-                  onClick={() => setSelectedOs(LINUX)}
-                />
-                <OSCard
-                  icon="/icons/windows-logo.svg"
-                  name={WINDOWS}
-                  isSelected={selectedOs === WINDOWS}
-                  onClick={() => setSelectedOs(WINDOWS)}
-                />
-              </XStack>
+              <OSCards />
               <YStack space={'$2'}>
                 <Text size={19}>Package Managers</Text>
                 <Text size={15} weight={'semibold'}>