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

fix: overview styling

Browse Source
This commit is contained in:
RadoslavDimchev 2023-08-24 14:31:53 +03:00
parent dc8fb030c5
commit 3a12bbcde3
2 changed files with 19 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,41 +14,35 @@ const Overview = () => {
backgroundColor: '#fff', backgroundColor: '#fff',
}} }}
> >
<YStack className="layout-left" space={10} style={{ padding: '16px 32px' }}> <YStack className="layout-left" space={'$5'} style={{ padding: '16px 32px' }}>
<TextTam fontSize={27} fontWeight={'700'} style={{ marginBottom: '20px' }}> <TextTam fontSize={27} fontWeight={'600'} style={{ marginBottom: '5px' }}>
Overview Overview
</TextTam> </TextTam>
<Text size={27}> <Text size={27}>
Becoming a validator is a big responsibility with important preparation steps. Only Becoming a validator is a big responsibility with important preparation steps. Only
start the deposit process when youre ready. start the deposit process when youre ready.
</Text> </Text>
<Text size={19} color="#939BA1"> <Text size={15} color="#939BA1">
By running a validator, you'll be responsible for securing the network and receive By running a validator, you'll be responsible for securing the network and receive
continuous payouts for actions that help the network reach consensus. continuous payouts for actions that help the network reach consensus.
</Text> </Text>
<Text size={19} color="#939BA1"> <Text size={15} color="#939BA1">
Since the successful transition to proof-of-stake via The Merge, Ethereum is fully 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 secured by proof-of-stake validators. By running a validator, you'll be helping to
secure the Ethereum network. secure the Ethereum network.
</Text> </Text>
<Text size={13}> <Stack style={{ margin: '2% 0 4%' }}>
<Link to={'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}> Learn more</Link> <Text size={15}>
</Text> <Link to={'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}> Learn more</Link>
<XStack </Text>
style={{ </Stack>
justifyContent: 'space-between', <XStack space={'$5'}>
width: '180%',
height: '100px',
marginTop: '200px',
}}
>
<YStack <YStack
style={{ style={{
borderRadius: '16px', borderRadius: '16px',
border: '1px solid rgba(0, 0, 0, 0.15)', border: '1px solid rgba(0, 0, 0, 0.15)',
width: '305px', width: '45%',
padding: '8px 16px', padding: '12px 16px',
backgroundColor: '#FFF', backgroundColor: '#FFF',
}} }}
> >
@ -64,8 +58,8 @@ const Overview = () => {
borderRadius: '16px', borderRadius: '16px',
border: '1px solid rgba(0, 0, 0, 0.15)', border: '1px solid rgba(0, 0, 0, 0.15)',
backgroundColor: '#FFF', backgroundColor: '#FFF',
width: '305px', width: '45%',
padding: '8px 16px', padding: '12px 16px',
}} }}
> >
<Text size={19} weight={'semibold'}> <Text size={19} weight={'semibold'}>
@ -79,9 +73,9 @@ const Overview = () => {
style={{ style={{
borderRadius: '16px', borderRadius: '16px',
border: '1px solid rgba(0, 0, 0, 0.15)', border: '1px solid rgba(0, 0, 0, 0.15)',
width: '305px', width: '45%',
backgroundColor: '#FFF', backgroundColor: '#FFF',
padding: '8px 16px', padding: '12px 16px',
}} }}
> >
<Text size={19} weight={'semibold'}> <Text size={19} weight={'semibold'}>
@ -95,9 +89,9 @@ const Overview = () => {
style={{ style={{
borderRadius: '16px', borderRadius: '16px',
border: '1px solid rgba(0, 0, 0, 0.15)', border: '1px solid rgba(0, 0, 0, 0.15)',
width: '305px', width: '45%',
backgroundColor: '#FFF', backgroundColor: '#FFF',
padding: '8px 16px', padding: '12px 16px',
}} }}
> >
<Text size={19} weight={'semibold'}> <Text size={19} weight={'semibold'}>

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

@ -22,7 +22,7 @@ const ValidatorOnboarding = () => {
style={{ style={{
width: '100%', width: '100%',
margin: '0 auto', margin: '0 auto',
padding: '2% 10%', padding: '2% 10% 1%',
justifyContent: 'start', justifyContent: 'start',
alignItems: 'start', alignItems: 'start',
}} }}