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: small changes to sizing and font sizes

This commit is contained in:
Ivana Andersson 2023-09-07 15:10:21 +03:00
parent f3ad8aa6b4
commit 8b6751d8b8
4 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/ValidatorOnboarding/Activation/Activation.tsx
View File

@ -35,20 +35,20 @@ const Activation = () => {
}, []) }, [])
return ( return (
<Stack style={styles.confettiContainer} width={'100%'}> <Stack style={styles.confettiContainer} width={'100%'} minHeight={'65vh'}>
{showConfetti && <Confetti style={styles.confettiCanvas} />} {showConfetti && <Confetti style={styles.confettiCanvas} />}
<YStack style={{ padding: '16px 32px' }}> <YStack style={{ padding: '26px 32px' }}>
<YStack space={'$5'}> <YStack space={'$5'}>
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>
Activation Activation
</Text> </Text>
<Stack style={{ width: '66%' }}> <Stack style={{ width: '66%' }}>
<Text size={27}> <Text size={19}>
Congratulations! You have successfully setup your Nimbus Validators and are currently Congratulations! You have successfully setup your Nimbus Validators and are currently
syncing your nodes. syncing your nodes.
</Text> </Text>
</Stack> </Stack>
<YStack space={'$3'} marginTop={'10px'} width={'33%'}> <YStack space={'$3'} marginTop={'25px'} width={'33%'}>
<XStack space={'$3'} justifyContent={'space-between'}> <XStack space={'$3'} justifyContent={'space-between'}>
<ActivationCard text="Validators" value="4" /> <ActivationCard text="Validators" value="4" />
<ActivationCard <ActivationCard
@ -77,7 +77,7 @@ const Activation = () => {
text="Edit Validators" text="Edit Validators"
to="/" to="/"
arrowLeft={true} arrowLeft={true}
style={{ marginTop: '44px', marginBottom: '88px' }} style={{ marginTop: '44px', marginBottom: '88px', fontSize: '13px' }}
/> />
</YStack> </YStack>
</Stack> </Stack>

4
src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx
View File

@ -30,7 +30,7 @@ const ActivationCard = ({
}} }}
> >
{!isGaugeIncluded && ( {!isGaugeIncluded && (
<Stack> <Stack space={'$2'}>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
{text} {text}
</Text> </Text>
@ -40,7 +40,7 @@ const ActivationCard = ({
</Stack> </Stack>
)} )}
{isGaugeIncluded && ( {isGaugeIncluded && (
<Stack> <Stack space={'$2'}>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
{text} {text}
</Text> </Text>

2
src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx
View File

@ -8,7 +8,7 @@ const ConfirmRecoveryPhrase = () => {
return ( return (
<YStack space={'$4'} style={{ width: '100%', marginTop: '20px' }}> <YStack space={'$4'} style={{ width: '100%', marginTop: '20px' }}>
<KeyGenerationTitle /> <KeyGenerationTitle />
<Text size={27}>Confirm Recovery Phrase</Text> <Text size={19}>Confirm Recovery Phrase</Text>
<Stack <Stack
style={{ style={{
display: 'grid', display: 'grid',

15
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx
View File

@ -32,29 +32,29 @@ const ConsensusSelection = () => {
] ]
return ( return (
<YStack style={{ width: '100%', padding: '32px' }}> <YStack style={{ width: '100%', padding: '32px' }} minHeight={'65vh'}>
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'} alignItems={'center'} mb={'30px'}>
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>
Validator Setup Validator Setup
</Text> </Text>
<XStack space={'$2'}> <XStack space={'$2'}>
<PairedDeviceCard isVisibleState={true} />
<ConsensusGaugeCard <ConsensusGaugeCard
color="blue" color="blue"
synced={134879} synced={134879}
title="Execution Sync Status" title="Execution Sync Status"
total={150000} total={150000}
/> />
<PairedDeviceCard isVisibleState={true} />
</XStack> </XStack>
</XStack> </XStack>
<YStack> <YStack mb={'50px'}>
<Stack style={{ marginBottom: '4px' }}> <Stack style={{ marginBottom: '4px' }}>
<Text size={13} color="#647084"> <Text size={13} color="#647084">
Consensus Client Detection Consensus Client Detection
</Text> </Text>
</Stack> </Stack>
<Text size={15} weight={'regular'}> <Text size={15}>
No existing execution client installations have been detected on paired device. No existing execution client installations have been detected on paired device.
</Text> </Text>
<Text size={13} color="#828282"> <Text size={13} color="#828282">
@ -63,14 +63,14 @@ const ConsensusSelection = () => {
</Text> </Text>
</YStack> </YStack>
<TextTam fontSize={27} style={{ margin: '5px', marginLeft: 0, marginTop: '50px' }}> <TextTam fontSize={19} style={{ marginLeft: 0, marginTop: '50px', marginBottom: '25px' }}>
Install Consensus client Install Consensus client
</TextTam> </TextTam>
<XStack space={'$8'}> <XStack space={'$8'}>
<ConsensusClientCard name={clients[0].name} icon={clients[0].icon} /> <ConsensusClientCard name={clients[0].name} icon={clients[0].icon} />
<YStack width={'67%'} space={'$4'}> <YStack width={'67%'} space={'$4'}>
<Text size={27}>The resource efficient Ethereum Clients.</Text> <Text size={19}>The resource efficient Ethereum Clients.</Text>
<Text size={15}> <Text size={15}>
{selectedClient} is a client implementation for both execution and consensus layers that {selectedClient} is a client implementation for both execution and consensus layers that
strives to be as lightweight as possible in terms of resources used. This allows it to strives to be as lightweight as possible in terms of resources used. This allows it to
@ -81,6 +81,7 @@ const ConsensusSelection = () => {
<LinkWithArrow <LinkWithArrow
textColor="black" textColor="black"
text="Nimbus Documentation" text="Nimbus Documentation"
style={{ fontSize: '15px' }}
arrowRight={true} arrowRight={true}
to="https://www.youtube.com/watch?v=dQw4w9WgXcQ" to="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
/> />