fix: remove old stack and use new responsive one

src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx

@@ -1,9 +1,10 @@
-import { Stack, XStack, YStack, useMedia } from 'tamagui'
+import { Stack, YStack, useMedia } from 'tamagui'
 import { Button, InformationBox, Input, Text } from '@status-im/components'
 import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
 
 import KeystoreBackupsCard from './KeystoreBackupsCard'
+import ResponsiveStack from '../../../../components/General/ResponsiveStack'
 
 const KeystoreFiles = () => {
   const [encryptedPassword, setEncryptedPassword] = useState('')
@@ -14,8 +15,6 @@ const KeystoreFiles = () => {
   const [displayConfirmEncryptedPassword, setDisplayConfirmEncryptedPassword] = useState('')
   const media = useMedia()
 
-  const StackComponent = media.sm ? YStack : XStack
-
   const generateKeystoreFilesHandler = () => {
     if (
       encryptedPassword !== confirmEncryptedPassword ||
@@ -58,7 +57,11 @@ const KeystoreFiles = () => {
 
   return (
     <YStack space={'$4'}>
-      <StackComponent space={'$2'} style={{ justifyContent: 'space-between', width: '100%' }}>
+      <ResponsiveStack
+        isVerticalAligned={!!media.sm}
+        space={'$2'}
+        style={{ justifyContent: 'space-between', width: '100%' }}
+      >
         <YStack space={'$4'} style={{ width: media.sm ? '100%' : '66%' }}>
           <YStack space={'$4'}>
             <Text size={15} color={'#647084'}>
@@ -102,7 +105,7 @@ const KeystoreFiles = () => {
         <div style={{ width: media.sm ? '100%' : '32%', paddingTop: '3.8%' }}>
           <KeystoreBackupsCard />
         </div>
-      </StackComponent>
+      </ResponsiveStack>
       <Stack style={{ width: 'fit-content' }}>
         <Button onPress={generateKeystoreFilesHandler}>Generate Key files</Button>
       </Stack>