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

fix: spacing and widths of key files

This commit is contained in:
RadoslavDimchev 2023-08-29 10:16:35 +03:00
parent 5b1964e12a
commit 7b9999d708
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
View File

@ -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 { 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'
import BorderBox from '../../../components/General/BorderBox'
const KeyFiles = () => { const KeyFiles = () => {
const [encryptedPassword, setEncryptedPassword] = useState('') const [encryptedPassword, setEncryptedPassword] = useState('')
const [confirmEncryptedPassword, setConfirmEncryptedPassword] = useState('') const [confirmEncryptedPassword, setConfirmEncryptedPassword] = useState('')
@ -29,8 +27,8 @@ const KeyFiles = () => {
return ( return (
<YStack space={'$4'}> <YStack space={'$4'}>
<XStack space={'$2'} style={{ justifyContent: 'space-between' }}> <XStack space={'$2'} style={{ justifyContent: 'space-between', width: '100%' }}>
<YStack space={'$1'}> <YStack space={'$4'} style={{ width: '66%' }}>
<YStack space={'$4'}> <YStack space={'$4'}>
<Text size={15} color={'#647084'}> <Text size={15} color={'#647084'}>
Encryption Password Encryption Password
@ -68,13 +66,22 @@ const KeyFiles = () => {
/> />
</YStack> </YStack>
</YStack> </YStack>
<BorderBox> <YStack
style={{
border: '1px solid #DCE0E5',
borderRadius: '16px',
padding: '12px 16px',
width: '32%',
}}
>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
Download Key Files Download Key Files
</Text> </Text>
</BorderBox> </YStack>
</XStack> </XStack>
<Stack style={{ width: 'fit-content' }}>
<Button onPress={generateKeyFilesHandler}>Generate Key files</Button> <Button onPress={generateKeyFilesHandler}>Generate Key files</Button>
</Stack>
<InformationBox <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" 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" variant="error"

4
src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
View File

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