diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx index 07678c79..b7ce1dbf 100644 --- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx +++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx @@ -35,20 +35,20 @@ const Activation = () => { }, []) return ( - <Stack style={styles.confettiContainer} width={'100%'}> + <Stack style={styles.confettiContainer} width={'100%'} minHeight={'65vh'}> {showConfetti && <Confetti style={styles.confettiCanvas} />} - <YStack style={{ padding: '16px 32px' }}> + <YStack style={{ padding: '26px 32px' }}> <YStack space={'$5'}> <Text size={27} weight={'semibold'}> Activation </Text> <Stack style={{ width: '66%' }}> - <Text size={27}> + <Text size={19}> Congratulations! You have successfully setup your Nimbus Validators and are currently syncing your nodes. </Text> </Stack> - <YStack space={'$3'} marginTop={'10px'} width={'33%'}> + <YStack space={'$3'} marginTop={'25px'} width={'33%'}> <XStack space={'$3'} justifyContent={'space-between'}> <ActivationCard text="Validators" value="4" /> <ActivationCard @@ -77,7 +77,7 @@ const Activation = () => { text="Edit Validators" to="/" arrowLeft={true} - style={{ marginTop: '44px', marginBottom: '88px' }} + style={{ marginTop: '44px', marginBottom: '88px', fontSize: '13px' }} /> </YStack> </Stack> diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx index befba796..cca9b23f 100644 --- a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx +++ b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx @@ -30,7 +30,7 @@ const ActivationCard = ({ }} > {!isGaugeIncluded && ( - <Stack> + <Stack space={'$2'}> <Text size={15} weight={'semibold'}> {text} </Text> @@ -40,7 +40,7 @@ const ActivationCard = ({ </Stack> )} {isGaugeIncluded && ( - <Stack> + <Stack space={'$2'}> <Text size={15} weight={'semibold'}> {text} </Text> diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx index 20521db4..b0112061 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx @@ -8,7 +8,7 @@ const ConfirmRecoveryPhrase = () => { return ( <YStack space={'$4'} style={{ width: '100%', marginTop: '20px' }}> <KeyGenerationTitle /> - <Text size={27}>Confirm Recovery Phrase</Text> + <Text size={19}>Confirm Recovery Phrase</Text> <Stack style={{ display: 'grid', diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx index 4bed105e..b761704f 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx @@ -32,29 +32,29 @@ const ConsensusSelection = () => { ] return ( - <YStack style={{ width: '100%', padding: '32px' }}> - <XStack justifyContent={'space-between'}> + <YStack style={{ width: '100%', padding: '32px' }} minHeight={'65vh'}> + <XStack justifyContent={'space-between'} alignItems={'center'} mb={'30px'}> <Text size={27} weight={'semibold'}> Validator Setup </Text> <XStack space={'$2'}> + <PairedDeviceCard isVisibleState={true} /> <ConsensusGaugeCard color="blue" synced={134879} title="Execution Sync Status" total={150000} /> - <PairedDeviceCard isVisibleState={true} /> </XStack> </XStack> - <YStack> + <YStack mb={'50px'}> <Stack style={{ marginBottom: '4px' }}> <Text size={13} color="#647084"> Consensus Client Detection </Text> </Stack> - <Text size={15} weight={'regular'}> + <Text size={15}> No existing execution client installations have been detected on paired device. </Text> <Text size={13} color="#828282"> @@ -63,14 +63,14 @@ const ConsensusSelection = () => { </Text> </YStack> - <TextTam fontSize={27} style={{ margin: '5px', marginLeft: 0, marginTop: '50px' }}> + <TextTam fontSize={19} style={{ marginLeft: 0, marginTop: '50px', marginBottom: '25px' }}> Install Consensus client </TextTam> <XStack space={'$8'}> <ConsensusClientCard name={clients[0].name} icon={clients[0].icon} /> <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}> {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 @@ -81,6 +81,7 @@ const ConsensusSelection = () => { <LinkWithArrow textColor="black" text="Nimbus Documentation" + style={{ fontSize: '15px' }} arrowRight={true} to="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />