feat: style recovery mechanism

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx

@@ -1,5 +1,5 @@
 import { Text } from '@status-im/components'
-import { XStack } from 'tamagui'
+import { XStack, YStack } from 'tamagui'
 import RecoveryMechanismCard from './RecoveryMechanismCard'
 
 type RecoveryMechanismProps = {
@@ -12,11 +12,11 @@ const RecoveryMechanism = ({
   handleRecoveryMechanismChange,
 }: RecoveryMechanismProps) => {
   return (
-    <XStack style={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}>
+    <YStack style={{ width: '100%' }}>
       <Text size={19} weight={'semibold'}>
         Select Recovery Mechanism
       </Text>
-      <XStack space={'$1'}>
+      <XStack space={'$4'} style={{ justifyContent: 'space-between', marginTop: '40px' }}>
         <RecoveryMechanismCard
           value="Key Files"
           selectedRecoveryMechanism={selectedRecoveryMechanism}
@@ -33,7 +33,7 @@ const RecoveryMechanism = ({
           handleRecoveryMechanismChange={handleRecoveryMechanismChange}
         />
       </XStack>
-    </XStack>
+    </YStack>
   )
 }
 

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.tsx

@@ -15,10 +15,12 @@ const RecoveryMechanismCard = ({
     <div
       style={{
         border: `1px solid ${selectedRecoveryMechanism === value ? '#2A4AF566' : '#DCE0E5'}`,
-        borderRadius: '0.5rem',
-        padding: '6px 12px',
+        borderRadius: '16px',
+        padding: '12px 16px',
         cursor: 'pointer',
         backgroundColor: selectedRecoveryMechanism === value ? '#f4f6fe' : '#fff',
+        width: '100%',
+        height: '140px',
       }}
       onClick={() => handleRecoveryMechanismChange(value)}
     >