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: add text and style to reveal phrase

This commit is contained in:
RadoslavDimchev 2023-08-29 13:55:29 +03:00
parent a1340d4265
commit 43492a3dad
1 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
View File

@ -1,4 +1,4 @@
import { Stack, YStack } from 'tamagui' import { Stack, XStack, YStack } from 'tamagui'
import { Button, InformationBox, Text } from '@status-im/components' import { Button, InformationBox, Text } from '@status-im/components'
import { CloseCircleIcon } from '@status-im/icons' import { CloseCircleIcon } from '@status-im/icons'
import { useState } from 'react' import { useState } from 'react'
@ -20,16 +20,30 @@ const RecoveryPhrase = ({ isKeyFiles }: RecoveryPhraseProps) => {
style={{ style={{
border: `1px solid #2A4AF566`, border: `1px solid #2A4AF566`,
borderRadius: '16px', borderRadius: '16px',
padding: '12px 16px', padding: '28px 18px',
backgroundColor: '#f4f6fe', backgroundColor: '#f4f6fe',
width: '100%', width: '100%',
height: '176px',
}} }}
> >
<Stack style={{ filter: `blur(${isReveal ? '0px' : '4px'})` }}> <YStack space={'$2'} style={{ filter: `blur(${isReveal ? '0px' : '4px'})` }}>
<Text size={15} weight={'semibold'}> <XStack space={'$6'}>
asdf <Text size={19} weight={'semibold'}>
this is your secret recovery phrase for the validator
</Text> </Text>
</Stack> <Text size={19} weight={'semibold'}>
this is your secret recovery phrase for the validator
</Text>
</XStack>
<XStack space={'$6'}>
<Text size={19} weight={'semibold'}>
this is your secret recovery phrase for the validator
</Text>
<Text size={19} weight={'semibold'}>
this is your secret recovery phrase for the validator
</Text>
</XStack>
</YStack>
</Stack> </Stack>
<Stack style={{ width: 'fit-content', marginBottom: '12px' }}> <Stack style={{ width: 'fit-content', marginBottom: '12px' }}>
<Button onPress={revealHandler}>Reveal Recovery Phrase</Button> <Button onPress={revealHandler}>Reveal Recovery Phrase</Button>