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: make all y stacks to be the same height

This commit is contained in:
Ivana Andersson 2023-09-07 14:39:08 +03:00
parent c39ee594f3
commit 593819d8bf
3 changed files with 41 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
View File

@ -6,7 +6,7 @@ import LinkWithArrow from '../../../components/General/LinkWithArrow'
const ClientSetup = () => {
return (
<YStack padding={'26px'} width={'100%'} space={'$8'}>
<YStack space={'$8'} padding={'26px'} width={'100%'} minHeight={'65vh'}>
<SetupRow title={'Setup up Validators'} />
<Separator borderColor={'#F0F2F5'} />
<WithdrawalAddress title={'Withdrawal address'} />

54
src/pages/ValidatorOnboarding/Overview/Overview.tsx
View File

@ -7,29 +7,37 @@ import LinkWithArrow from '../../../components/General/LinkWithArrow'
const Overview = () => {
return (
<>
<YStack className="layout-left" space={'$5'} style={{ padding: '26px 0 32px 32px' }}>
<Text size={27} weight={'semibold'}>
Overview
</Text>
<Text size={19}>
Becoming a validator is a big responsibility with important preparation steps. Only start
the deposit process when you're ready.
</Text>
<Text size={15} color="#939BA1">
By running a validator, you'll be responsible for securing the network and receive
continuous payouts for actions that help the network reach consensus.
</Text>
<Text size={15} color="#939BA1">
Since the successful transition to proof-of-stake via The Merge, Ethereum is fully secured
by proof-of-stake validators. By running a validator, you'll be helping to secure the
Ethereum network.
</Text>
<LinkWithArrow
text="Learn More"
to={'/'}
arrowRight={true}
style={{ marginBottom: '1%', fontSize: '13px' }}
/>
<YStack
className="layout-left"
space={'$5'}
style={{ padding: '26px 0 32px 32px' }}
minHeight={'65vh'}
justifyContent={'space-between'}
>
<YStack space={'$5'}>
<Text size={27} weight={'semibold'}>
Overview
</Text>
<Text size={19}>
Becoming a validator is a big responsibility with important preparation steps. Only
start the deposit process when you're ready.
</Text>
<Text size={15} color="#939BA1">
By running a validator, you'll be responsible for securing the network and receive
continuous payouts for actions that help the network reach consensus.
</Text>
<Text size={15} color="#939BA1">
Since the successful transition to proof-of-stake via The Merge, Ethereum is fully
secured by proof-of-stake validators. By running a validator, you'll be helping to
secure the Ethereum network.
</Text>
<LinkWithArrow
text="Learn More"
to={'/'}
arrowRight={true}
style={{ marginBottom: '1%', fontSize: '13px' }}
/>
</YStack>
<XStack space={'$3'}>
<OverviewCard text={'Current APR'} value={'4.40%'} />
<OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />

14
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
View File

@ -7,8 +7,12 @@ import LinkWithArrow from '../../../components/General/LinkWithArrow'
const ValidatorSetup = () => {
return (
<YStack style={{ width: '100%', padding: '16px 32px' }}>
<XStack justifyContent={'space-between'}>
<YStack
style={{ width: '100%', padding: '26px 32px' }}
minHeight={'65vh'}
justifyContent={'space-between'}
>
<XStack justifyContent={'space-between'} alignItems={'center'}>
<Text size={27} weight={'semibold'}>
Validator Setup
</Text>
@ -21,7 +25,7 @@ const ValidatorSetup = () => {
Execution 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">
@ -30,7 +34,7 @@ const ValidatorSetup = () => {
</Text>
</YStack>
<TextTam fontSize={27} style={{ margin: '5px', marginLeft: 0 }}>
<TextTam fontSize={27} style={{ marginTop: '15px', marginLeft: 0, marginBottom: '15px' }}>
Select Execution client
</TextTam>
<XStack justifyContent={'space-between'}>
@ -43,7 +47,7 @@ const ValidatorSetup = () => {
<LinkWithArrow
to="/"
text="View Execution client comparison chart"
style={{ marginTop: '6%' }}
style={{ marginTop: '6%', fontWeight: 'bold' }}
/>
</YStack>
)