From 14dc82ebb97f16c409e306b9613a88ba41e0fce7 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 9 Jan 2024 14:48:01 +0200
Subject: [PATCH] fix ExecCLientCards to be responsive

---
 src/components/General/Icon.tsx                     | 13 +++++++------
 .../ValidatorOnboarding/FormStepper/FormStepper.tsx |  3 ++-
 src/pages/ValidatorOnboarding/Overview/Overview.tsx |  2 +-
 .../ValidatorSetup/ExecClientCard.tsx               |  3 ++-
 .../ValidatorSetup/ExecClientCards.tsx              | 11 +++++++++--
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/General/Icon.tsx b/src/components/General/Icon.tsx
index 9a427140..e3fb33d1 100644
--- a/src/components/General/Icon.tsx
+++ b/src/components/General/Icon.tsx
@@ -1,19 +1,20 @@
-import { Image } from '@status-im/components'
+import { Image } from 'tamagui'
 
 export type IconProps = {
   src: string
-  width?: number
-  height?: number
+  width?: string
+  height?: string
 }
 
-const Icon = ({ src, width = 16, height = 16 }: IconProps) => {
+const Icon = ({ src, width = '16px', height = '16px' }: IconProps) => {
   return (
     <Image
       src={src}
       source={{ uri: src }}
-      width={width}
-      height={height}
+      width={'70%'}
+      height={100}
       style={{ backgroundColor: 'transparent' }}
+      minWidth={'110px'}
     />
   )
 }
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 3498eed6..6459a182 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -49,6 +49,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
         fontSize: '14px',
         zIndex: 1,
         width: '100%',
+        height: 'fit-content',
         padding: 0,
         marginBottom: '3rem',
         overflow: 'hidden',
@@ -59,7 +60,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
         return (
           <Step
             key={originalIndex}
-            label={step.label}
+            label={`${originalIndex + 1}. ${step.label}`}
             className="custom-step"
             onClick={() => changeStepOnClickHandler(originalIndex)}
             completed={activeStep > originalIndex - 1}
diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 643eb6a4..63fb2258 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -15,7 +15,7 @@ const Overview = () => {
       >
         <YStack>
           <YStack space={'$5'} width="150%">
-            <Text size={27} weight={'semibold'}>
+            <Text size={27} weight={'semibold'} marginTop={'2rem'}>
               Overview
             </Text>
             <Text size={19}>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
index 481e509d..5c3a34fb 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
@@ -30,6 +30,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
         padding: '12px 16px',
         width: '19%',
         cursor: 'pointer',
+        minWidth: '150px',
       }}
       space={'$8'}
       onClick={() => {
@@ -58,7 +59,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
           </XStack>
         )}
       </Stack>
-      <Icon src={icon} width={100} height={100} />
+      <Icon src={icon} width={'100%'} height={'full'} />
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
index 0149f834..04741a92 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
@@ -10,11 +10,18 @@ const ExecClientCards = () => {
       <Stack style={{ marginTop: '15px', marginLeft: 0, marginBottom: '15px' }}>
         <Text size={27}>Select Execution client</Text>
       </Stack>
-      <XStack justifyContent={'space-between'}>
+      <Stack
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+          gap: '8px',
+          justifyContent: 'space-between',
+        }}
+      >
         {Object.entries(DOCUMENTATIONS).map(([name, { icon }], index) => (
           <ExecClientCard key={index} name={name} icon={icon} />
         ))}
-      </XStack>
+      </Stack>
     </YStack>
   )
 }