From 8dd77585174cf97af5d7566e8fb1a5d38f7b664d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 10:38:33 +0300
Subject: [PATCH] feat: add dynamic margin for both states

---
 .../ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx   | 2 +-
 .../ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx  | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 5ba1dbe8..f0b06f99 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -33,7 +33,7 @@ const KeyGeneration = () => {
         </Text>
       </Stack>
       {isKeyFiles && <KeyFiles />}
-      {isRecoveryPhrase && <RecoveryPhrase />}
+      {isRecoveryPhrase && <RecoveryPhrase isKeyFiles={isKeyFiles} />}
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 531c707f..cd28c1f0 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -3,7 +3,11 @@ import { Button, InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
 
-const RecoveryPhrase = () => {
+type RecoveryPhraseProps = {
+  isKeyFiles: boolean
+}
+
+const RecoveryPhrase = ({ isKeyFiles }: RecoveryPhraseProps) => {
   const [isReveal, setIsReveal] = useState(false)
 
   const revealHandler = () => {
@@ -11,7 +15,7 @@ const RecoveryPhrase = () => {
   }
 
   return (
-    <YStack space={'$4'} style={{ width: '100%' }}>
+    <YStack space={'$4'} style={{ width: '100%', marginTop: isKeyFiles ? '20px' : '0px' }}>
       <Stack
         style={{
           border: `1px solid #2A4AF566`,