make responsive

src/components/General/Icon.tsx

@@ -2,21 +2,12 @@ import { Image } from 'tamagui'
 
 export type IconProps = {
   src: string
-  width?: string
-  height?: string
+  width?: number
+  height?: number
 }
 
-const Icon = ({ src, width = '16px', height = '16px' }: IconProps) => {
-  return (
-    <Image
-      src={src}
-      source={{ uri: src }}
-      width={'50%'}
-      height={90}
-      style={{ backgroundColor: 'transparent' }}
-      minWidth={'90px'}
-    />
-  )
+const Icon = ({ src, height = 100, width = 100 }: IconProps) => {
+  return <Image src={src} source={{ uri: src }} height={height} width={width} />
 }
 
 export default Icon

src/pages/ValidatorOnboarding/Overview/validatorLayout.css

@@ -1,3 +1,4 @@
+ 
 .layout::after {
   display: block;
   content: '';

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx

@@ -33,12 +33,13 @@ const ConsensusSelection = () => {
 
   return (
     <YStack style={{ width: '100%', padding: '32px' }} minHeight={'65vh'}>
-      <XStack justifyContent={'space-between'} alignItems={'center'} mb={'30px'}>
+      <XStack justifyContent={'space-between'} alignItems={'center'} mb={'30px'} flexWrap="wrap">
         <Text size={27} weight={'semibold'}>
           Validator Setup
         </Text>
-        <XStack space={'$2'}>
+        <XStack space={'$2'} flexWrap="wrap">
           <PairedDeviceCard />
+
           <ConsensusGaugeCard
             color="blue"
             synced={134879}
@@ -67,9 +68,9 @@ const ConsensusSelection = () => {
         Install Consensus client
       </TextTam>
 
-      <XStack space={'$8'}>
+      <XStack space={'$8'} flexWrap="wrap">
         <ConsensusClientCard name={clients[0].name} icon={clients[0].icon} />
-        <YStack width={'67%'} space={'$4'}>
+        <YStack width={'67%'} maxWidth="550px" space={'$4'}>
           <Text size={19}>The resource efficient Ethereum Clients.</Text>
           <Text size={15}>
             {selectedClient} is a client implementation for both execution and consensus layers that

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css

@@ -0,0 +1,25 @@
+.osCardsContainer {
+  /* Container styles */
+}
+
+.osCard {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 16px;
+  padding: 12px 16px;
+  min-width: 200px;
+  cursor: 'pointer';
+  width: 32%; /* Adjust for normal screens */
+}
+
+.osCard.selected {
+  background-color: #2a4af50d;
+  border: 1px solid #2a4af566;
+}
+
+/* Media query for smaller screens */
+@media (max-width: 800px) {
+  .osCard {
+    width: 100%; /* Full width on small screens */
+    margin: 8px 0;
+  }
+}

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx

@@ -1,6 +1,5 @@
-import { Stack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 import { Text } from '@status-im/components'
-
 import Icon from '../../../../components/General/Icon'
 
 type OSCardProps = {
@@ -13,23 +12,13 @@ type OSCardProps = {
 const OSCard = ({ name, icon, onClick, 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: '32%',
-        cursor: 'pointer',
-      }}
-      space={'$8'}
+      className={`osCard ${isSelected ? 'selected' : ''}`}
       onPress={onClick}
     >
-      <Stack>
-        <Text size={19} weight={'semibold'}>
-          {name}
-        </Text>
-      </Stack>
-      <Icon src={icon} width={42} height={52} />
+      <Text size={19} weight={'semibold'}>
+        {name}
+      </Text>
+      <Icon src={icon} width={90} height={110} />
     </YStack>
   )
 }

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx

@@ -1,21 +1,12 @@
 import { XStack } from 'tamagui'
-
 import OSCard from './OSCard'
 import { LINUX, MAC, WINDOWS } from '../../../../constants'
 
+import './InstallLayout.css'
 const cards = [
-  {
-    name: MAC,
-    icon: '/icons/apple-logo.svg',
-  },
-  {
-    name: LINUX,
-    icon: '/icons/linux-logo.svg',
-  },
-  {
-    name: WINDOWS,
-    icon: '/icons/windows-logo.svg',
-  },
+  { name: MAC, icon: '/icons/apple-logo.svg' },
+  { name: LINUX, icon: '/icons/linux-logo.svg' },
+  { name: WINDOWS, icon: '/icons/windows-logo.svg' },
 ]
 
 type OSCardsProps = {
@@ -25,7 +16,7 @@ type OSCardsProps = {
 
 const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
-    <XStack justifyContent={'space-between'} my={'15px'}>
+    <XStack className="osCardsContainer" justifyContent={'space-between'} my={'15px'} flexWrap="wrap">
       {cards.map(card => (
         <OSCard
           key={card.name}

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx

@@ -1,4 +1,4 @@
-import { YStack } from 'tamagui'
+import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import { useSelector } from 'react-redux'
 import { useState } from 'react'
@@ -8,7 +8,7 @@ import { DOCUMENTATIONS } from './documentations'
 import { MAC } from '../../../../constants'
 import OSCards from './OSCards'
 import Markdown from '../../../../components/General/Markdown/Markdown'
-
+import './InstallLayout.css'
 const ValidatorSetupInstall = () => {
   const [selectedOS, setSelectedOS] = useState(MAC)
   const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
@@ -18,7 +18,7 @@ const ValidatorSetupInstall = () => {
   }
 
   return (
-    <YStack style={{ width: '100%', padding: '26px 32px' }}>
+    <YStack style={{ padding: '26px 32px', width:'fit-content' }}>
       <Text size={27} weight={'semibold'}>
         Validator Setup
       </Text>
@@ -35,9 +35,11 @@ const ValidatorSetupInstall = () => {
         <Text size={19} weight={'semibold'}>
           Installing {selectedClient}
         </Text>
-        <Markdown children={DOCUMENTATIONS[selectedClient].general} />
-        <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
-        <Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />
+        <Stack flexWrap="wrap">
+          <Markdown children={DOCUMENTATIONS[selectedClient].general} />
+          <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
+          <Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />
+        </Stack>
       </YStack>
     </YStack>
   )

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx

@@ -59,7 +59,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
           </XStack>
         )}
       </Stack>
-      <Icon src={icon} width={'100%'} height={'full'} />
+      <Icon src={icon} width={100} height={100} />
     </YStack>
   )
 }