status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-03-02 20:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: style recovery mechanism

Browse Source
This commit is contained in:
RadoslavDimchev 2023-08-28 14:47:16 +03:00
parent dc32d40270
commit 036fa734c1
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
View File

@ -1,5 +1,5 @@
import { Text } from '@status-im/components' import { Text } from '@status-im/components'
import { XStack } from 'tamagui' import { XStack, YStack } from 'tamagui'
import RecoveryMechanismCard from './RecoveryMechanismCard' import RecoveryMechanismCard from './RecoveryMechanismCard'
type RecoveryMechanismProps = { type RecoveryMechanismProps = {
@ -12,11 +12,11 @@ const RecoveryMechanism = ({
handleRecoveryMechanismChange, handleRecoveryMechanismChange,
}: RecoveryMechanismProps) => { }: RecoveryMechanismProps) => {
return ( return (
<XStack style={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}> <YStack style={{ width: '100%' }}>
<Text size={19} weight={'semibold'}> <Text size={19} weight={'semibold'}>
Select Recovery Mechanism Select Recovery Mechanism
</Text> </Text>
<XStack space={'$1'}> <XStack space={'$4'} style={{ justifyContent: 'space-between', marginTop: '40px' }}>
<RecoveryMechanismCard <RecoveryMechanismCard
value="Key Files" value="Key Files"
selectedRecoveryMechanism={selectedRecoveryMechanism} selectedRecoveryMechanism={selectedRecoveryMechanism}
@ -33,7 +33,7 @@ const RecoveryMechanism = ({
handleRecoveryMechanismChange={handleRecoveryMechanismChange} handleRecoveryMechanismChange={handleRecoveryMechanismChange}
/> />
</XStack> </XStack>
</XStack> </YStack>
) )
} }

6
src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.tsx
View File

@ -15,10 +15,12 @@ const RecoveryMechanismCard = ({
<div <div
style={{ style={{
border: `1px solid ${selectedRecoveryMechanism === value ? '#2A4AF566' : '#DCE0E5'}`, border: `1px solid ${selectedRecoveryMechanism === value ? '#2A4AF566' : '#DCE0E5'}`,
borderRadius: '0.5rem', borderRadius: '16px',
padding: '6px 12px', padding: '12px 16px',
cursor: 'pointer', cursor: 'pointer',
backgroundColor: selectedRecoveryMechanism === value ? '#f4f6fe' : '#fff', backgroundColor: selectedRecoveryMechanism === value ? '#f4f6fe' : '#fff',
width: '100%',
height: '140px',
}} }}
onClick={() => handleRecoveryMechanismChange(value)} onClick={() => handleRecoveryMechanismChange(value)}
> >