From 036fa734c1d14a2e929a6311759fba50c5b48d7b Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 28 Aug 2023 14:47:16 +0300
Subject: [PATCH] feat: style recovery mechanism

---
 .../KeyGeneration/RecoveryMechanism.tsx                   | 8 ++++----
 .../KeyGeneration/RecoveryMechanismCard.tsx               | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
index e7c4878c..8aa131d4 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
+++ b/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>
   )
 }
 
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.tsx
index 5e6018d8..df689616 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.tsx
+++ b/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)}
     >