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

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

@@ -1,25 +1,36 @@
 .osCardsContainer {
-  /* Container styles */
+  display: grid;
+  grid-gap: 16px;
+  margin: 8px;
+  grid-template-columns: repeat(3, 1fr)
+}
+
+ 
+.osCardsContainer {
+  grid-template-columns: repeat(1, 1fr);
+}
+ 
+@media (min-width: 601px) {
+  .osCardsContainer {
+    grid-template-columns: repeat(2, 1fr);  
+  }
+}
+ 
+@media (min-width: 901px) {
+  .osCardsContainer {
+    grid-template-columns: repeat(3, 1fr);  
+  }
 }
 
 .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 */
+  cursor: pointer;
+  min-width: 250px;
 }
 
 .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,7 @@
-import { YStack } from 'tamagui'
+import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import Icon from '../../../../components/General/Icon'
+import './InstallLayout.css'
 
 type OSCardProps = {
   name: string
@@ -8,15 +9,14 @@ type OSCardProps = {
   onClick?: () => void
   isSelected?: boolean
 }
-
 const OSCard = ({ name, icon, onClick, isSelected }: OSCardProps) => {
   return (
-    <YStack className={`osCard ${isSelected ? 'selected' : ''}`} onPress={onClick}>
+    <Stack className={`osCard ${isSelected ? 'selected' : ''}`} onPress={onClick}>
       <Text size={19} weight={'semibold'}>
         {name}
       </Text>
       <Icon src={icon} width={90} height={110} />
-    </YStack>
+    </Stack>
   )
 }
 

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

@@ -1,27 +1,23 @@
-import { XStack } from 'tamagui'
-import OSCard from './OSCard'
-import { LINUX, MAC, WINDOWS } from '../../../../constants'
+import { Stack, XStack } from 'tamagui';
+import OSCard from './OSCard';
+import { LINUX, MAC, WINDOWS } from '../../../../constants';
+
+import './InstallLayout.css';
 
-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' },
-]
+];
 
 type OSCardsProps = {
-  selectedOS: string
-  handleOSCardClick: (os: string) => void
-}
+  selectedOS: string;
+  handleOSCardClick: (os: string) => void;
+};
 
 const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
-    <XStack
-      className="osCardsContainer"
-      justifyContent={'space-between'}
-      my={'15px'}
-      flexWrap="wrap"
-    >
+    <Stack className="osCardsContainer" my={'15px'}  >
       {cards.map(card => (
         <OSCard
           key={card.name}
@@ -31,8 +27,8 @@ const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
           onClick={() => handleOSCardClick(card.name)}
         />
       ))}
-    </XStack>
-  )
-}
+    </Stack>
+  );
+};
 
-export default OSCards
+export default OSCards;