fix: spacing and widths of key files

src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx

@@ -1,10 +1,8 @@
-import { XStack, YStack } from 'tamagui'
+import { Stack, XStack, YStack } from 'tamagui'
 import { Button, InformationBox, Input, Text } from '@status-im/components'
 import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
 
-import BorderBox from '../../../components/General/BorderBox'
-
 const KeyFiles = () => {
   const [encryptedPassword, setEncryptedPassword] = useState('')
   const [confirmEncryptedPassword, setConfirmEncryptedPassword] = useState('')
@@ -29,8 +27,8 @@ const KeyFiles = () => {
 
   return (
     <YStack space={'$4'}>
-      <XStack space={'$2'} style={{ justifyContent: 'space-between' }}>
-        <YStack space={'$1'}>
+      <XStack space={'$2'} style={{ justifyContent: 'space-between', width: '100%' }}>
+        <YStack space={'$4'} style={{ width: '66%' }}>
           <YStack space={'$4'}>
             <Text size={15} color={'#647084'}>
               Encryption Password
@@ -68,13 +66,22 @@ const KeyFiles = () => {
             />
           </YStack>
         </YStack>
-        <BorderBox>
+        <YStack
+          style={{
+            border: '1px solid #DCE0E5',
+            borderRadius: '16px',
+            padding: '12px 16px',
+            width: '32%',
+          }}
+        >
           <Text size={15} weight={'semibold'}>
             Download Key Files
           </Text>
-        </BorderBox>
+        </YStack>
       </XStack>
-      <Button onPress={generateKeyFilesHandler}>Generate Key files</Button>
+      <Stack style={{ width: 'fit-content' }}>
+        <Button onPress={generateKeyFilesHandler}>Generate Key files</Button>
+      </Stack>
       <InformationBox
         message="You should see that you have one keystore per validator. This keystore contains your signing key, encrypted with your password. Warning: Do not store keys on multiple (backup) validator clients at once"
         variant="error"

src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx

@@ -1,4 +1,4 @@
-import { YStack } from 'tamagui'
+import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import { useState } from 'react'
 
@@ -27,9 +27,11 @@ const KeyGeneration = () => {
         recoveryMechanism={recoveryMechanism}
         handleRecMechanismChange={handleRecMechanismChange}
       />
-      <Text size={27} weight={'semibold'}>
-        4 Validators
-      </Text>
+      <Stack style={{ margin: '30px 0' }}>
+        <Text size={27} weight={'semibold'}>
+          4 Validators
+        </Text>
+      </Stack>
       {isKeyFiles && <KeyFiles />}
       {isRecoveryPhrase && <RecoveryPhrase />}
     </YStack>