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

src/components/General/ResponsiveStack.tsx

@@ -10,10 +10,18 @@ type ResponsiveStackProps = {
 
 const ResponsiveStack = ({ isVerticalAligned, children, space, style }: ResponsiveStackProps) => {
   if (isVerticalAligned) {
-    return <YStack space={space} style={style}>{children}</YStack>
+    return (
+      <YStack space={space} style={style}>
+        {children}
+      </YStack>
+    )
   }
 
-  return <XStack space={space} style={style}>{children}</XStack>
+  return (
+    <XStack space={space} style={style}>
+      {children}
+    </XStack>
+  )
 }
 
 export default ResponsiveStack

src/pages/ValidatorOnboarding/Overview/validatorLayout.css

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

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

@@ -11,10 +11,7 @@ type OSCardProps = {
 
 const OSCard = ({ name, icon, onClick, isSelected }: OSCardProps) => {
   return (
-    <YStack
-      className={`osCard ${isSelected ? 'selected' : ''}`}
-      onPress={onClick}
-    >
+    <YStack className={`osCard ${isSelected ? 'selected' : ''}`} onPress={onClick}>
       <Text size={19} weight={'semibold'}>
         {name}
       </Text>

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

@@ -16,7 +16,12 @@ type OSCardsProps = {
 
 const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
-    <XStack className="osCardsContainer" justifyContent={'space-between'} my={'15px'} flexWrap="wrap">
+    <XStack
+      className="osCardsContainer"
+      justifyContent={'space-between'}
+      my={'15px'}
+      flexWrap="wrap"
+    >
       {cards.map(card => (
         <OSCard
           key={card.name}

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

@@ -18,7 +18,7 @@ const ValidatorSetupInstall = () => {
   }
 
   return (
-    <YStack style={{ padding: '26px 32px', width:'fit-content' }}>
+    <YStack style={{ padding: '26px 32px', width: 'fit-content' }}>
       <Text size={27} weight={'semibold'}>
         Validator Setup
       </Text>

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

@@ -50,7 +50,6 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
               alignItems: 'center',
               padding: '3px 6px',
               borderRadius: '67px',
-              
             }}
           >
             <Text size={11} color="#fff">

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx

@@ -1,4 +1,4 @@
-import { Stack, XStack, YStack } from 'tamagui'
+import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 
 import ExecClientCard from './ExecClientCard'

src/utilities.ts

@@ -71,4 +71,4 @@ export const getHeightPercentages = (amountOfElements: number) => {
 
 export const copyFunction = (text: string) => {
   navigator.clipboard.writeText(text)
-}
+}