From c47f589cb57fa505ac4123444f9c8eaef932f8b7 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 13 Oct 2023 16:18:09 +0300
Subject: [PATCH] fix: spaces and order

---
 .../KeyGeneration/RecoveryPhrase.tsx          | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 44c8ebf3..58c83765 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -1,6 +1,6 @@
 import { Stack, XStack, YStack } from 'tamagui'
 import { Button, InformationBox, Text } from '@status-im/components'
-import { CloseCircleIcon } from '@status-im/icons'
+import { CloseCircleIcon, CopyIcon } from '@status-im/icons'
 import { useEffect, useState } from 'react'
 import { generateMnemonic } from 'web-bip39'
 import wordlist from 'web-bip39/wordlists/english'
@@ -42,32 +42,36 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
 
   return (
     <YStack space={'$4'} style={{ width: '100%', marginTop: isKeystoreFiles ? '20px' : '0px' }}>
-      <Stack
+      <YStack
         style={{
           border: `1px solid #2A4AF566`,
           borderRadius: '16px',
-          padding: '28px 18px',
           backgroundColor: '#f4f6fe',
           width: '100%',
+          alignItems: 'end',
+          cursor: 'pointer',
+          paddingBottom: '8px',
+          paddingRight: '18px',
         }}
+        onClick={copyRecoveryPhraseHandler}
       >
-        <XStack
+        <Stack
           style={{
             display: 'grid',
             gridTemplateColumns: 'repeat(6, 1fr)',
-            gap: '5px 0px',
+            gap: '5px 3px',
+            width: '100%',
             filter: `blur(${isReveal ? '0px' : '4px'})`,
-            cursor: 'pointer',
+            padding: '28px 0px 0px 18px',
           }}
-          onClick={copyRecoveryPhraseHandler}
         >
           {generatedMnemonic.map((word, index) => (
             <Text key={index} size={19} weight={'semibold'}>
               {index + 1}. {word}
             </Text>
           ))}
-        </XStack>
-      </Stack>
+        </Stack>
+      </YStack>
       <Stack style={{ width: 'fit-content', marginBottom: '12px' }}>
         <Button onPress={revealHandler}>
           {isReveal ? 'Hide Recovery Phrase' : 'Reveal Recovery Phrase'}