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: replace xstack with styled div for rec mechanism

This commit is contained in:
RadoslavDimchev 2024-01-09 22:19:17 +02:00
parent b664c3a4a2
commit f6cf36fc81
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,9 @@
import { Text } from '@status-im/components' import { Text } from '@status-im/components'
import { XStack, YStack } from 'tamagui' import { YStack } from 'tamagui'
import RecoveryMechanismCard from './RecoveryMechanismCard' import RecoveryMechanismCard from './RecoveryMechanismCard'
import { BOTH_KEY_AND_RECOVERY, KEYSTORE_FILES, RECOVERY_PHRASE } from '../../../../constants' import { BOTH_KEY_AND_RECOVERY, KEYSTORE_FILES, RECOVERY_PHRASE } from '../../../../constants'
import styles from '../index.module.css'
type RecoveryMechanismProps = { type RecoveryMechanismProps = {
recoveryMechanism: string recoveryMechanism: string
@ -20,7 +21,7 @@ const RecoveryMechanism = ({ recoveryMechanism }: RecoveryMechanismProps) => {
<Text size={19} weight={'semibold'}> <Text size={19} weight={'semibold'}>
Select Recovery Mechanism Select Recovery Mechanism
</Text> </Text>
<XStack space={'$4'} style={{ justifyContent: 'space-between', marginTop: '40px' }}> <div className={styles['recovery-mechanism-container']}>
{Object.entries(cards).map(([value, icon]) => ( {Object.entries(cards).map(([value, icon]) => (
<RecoveryMechanismCard <RecoveryMechanismCard
key={value} key={value}
@ -29,7 +30,7 @@ const RecoveryMechanism = ({ recoveryMechanism }: RecoveryMechanismProps) => {
icon={icon} icon={icon}
/> />
))} ))}
</XStack> </div>
</YStack> </YStack>
) )
} }

8
src/pages/ValidatorOnboarding/KeyGeneration/index.module.css Normal file
View File

@ -0,0 +1,8 @@
.recovery-mechanism-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: space-between;
margin-top: 40px;
}