fix: spaces and order

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'}