status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: create responsive stack and use media hook

This commit is contained in:
RadoslavDimchev 2024-01-10 18:35:20 +02:00
parent 405d9d4f90
commit 761ed1f370
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
View File

@ -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 { Button, InformationBox, Input, Text } from '@status-im/components'
import { ClearIcon, CloseCircleIcon } from '@status-im/icons' import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
import { useState } from 'react' import { useState } from 'react'
@ -12,6 +12,9 @@ const KeystoreFiles = () => {
const [confirmEncryptedPasswordError, setConfirmEncryptedPasswordError] = useState(false) const [confirmEncryptedPasswordError, setConfirmEncryptedPasswordError] = useState(false)
const [displayEncryptedPassword, setDisplayEncryptedPassword] = useState('') const [displayEncryptedPassword, setDisplayEncryptedPassword] = useState('')
const [displayConfirmEncryptedPassword, setDisplayConfirmEncryptedPassword] = useState('') const [displayConfirmEncryptedPassword, setDisplayConfirmEncryptedPassword] = useState('')
const media = useMedia()
const StackComponent = media.sm ? YStack : XStack
const generateKeystoreFilesHandler = () => { const generateKeystoreFilesHandler = () => {
if ( if (
@ -55,7 +58,10 @@ const KeystoreFiles = () => {
return ( return (
<YStack space={'$4'}> <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'} style={{ width: '66%' }}>
<YStack space={'$4'}> <YStack space={'$4'}>
<Text size={15} color={'#647084'}> <Text size={15} color={'#647084'}>
@ -97,7 +103,7 @@ const KeystoreFiles = () => {
</YStack> </YStack>
</YStack> </YStack>
<KeystoreBackupsCard /> <KeystoreBackupsCard />
</XStack> </StackComponent>
<Stack style={{ width: 'fit-content' }}> <Stack style={{ width: 'fit-content' }}>
<Button onPress={generateKeystoreFilesHandler}>Generate Key files</Button> <Button onPress={generateKeystoreFilesHandler}>Generate Key files</Button>
</Stack> </Stack>