From 761ed1f370256e21d40bdd2b8d8e07fef2f1f08c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 10 Jan 2024 18:35:20 +0200
Subject: [PATCH] feat: create responsive stack and use media hook

---
 .../KeyGeneration/KeystoreFiles/KeystoreFiles.tsx    | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
index c23be369..a6c4f098 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
@@ -1,4 +1,4 @@
-import { Stack, XStack, YStack } from 'tamagui'
+import { Stack, XStack, YStack, useMedia } from 'tamagui'
 import { Button, InformationBox, Input, Text } from '@status-im/components'
 import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
@@ -12,6 +12,9 @@ const KeystoreFiles = () => {
   const [confirmEncryptedPasswordError, setConfirmEncryptedPasswordError] = useState(false)
   const [displayEncryptedPassword, setDisplayEncryptedPassword] = useState('')
   const [displayConfirmEncryptedPassword, setDisplayConfirmEncryptedPassword] = useState('')
+  const media = useMedia()
+
+  const StackComponent = media.sm ? YStack : XStack
 
   const generateKeystoreFilesHandler = () => {
     if (
@@ -55,7 +58,10 @@ const KeystoreFiles = () => {
 
   return (
     <YStack space={'$4'}>
-      <XStack space={'$2'} style={{ justifyContent: 'space-between', width: '100%' }}>
+      <StackComponent
+        space={'$2'}
+        style={{ justifyContent: 'space-between', width: '100%' }}
+      >
         <YStack space={'$4'} style={{ width: '66%' }}>
           <YStack space={'$4'}>
             <Text size={15} color={'#647084'}>
@@ -97,7 +103,7 @@ const KeystoreFiles = () => {
           </YStack>
         </YStack>
         <KeystoreBackupsCard />
-      </XStack>
+      </StackComponent>
       <Stack style={{ width: 'fit-content' }}>
         <Button onPress={generateKeystoreFilesHandler}>Generate Key files</Button>
       </Stack>