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

Implement ontop cards

This commit is contained in:
Hristo Nedelkov 2023-08-24 12:10:33 +03:00
parent b629168250
commit d2a8b4bc9a
1 changed files with 75 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import { Stack, Text as TextTam, YStack } from 'tamagui' import { Stack, Text as TextTam, XStack, YStack } from 'tamagui'
import { Button, Shadow, Text } from '@status-im/components' import { Button, Shadow, Text } from '@status-im/components'
import { Link } from 'react-router-dom'
const Overview = () => { const Overview = () => {
return ( return (
@ -12,7 +13,6 @@ const Overview = () => {
flexDirection: 'row', flexDirection: 'row',
backgroundColor: '#fff', backgroundColor: '#fff',
}} }}
className="content"
> >
<YStack className="layout-left" space={10} style={{ padding: '16px 32px' }}> <YStack className="layout-left" space={10} style={{ padding: '16px 32px' }}>
<TextTam fontSize={27} fontWeight={'700'} style={{ marginBottom: '20px' }}> <TextTam fontSize={27} fontWeight={'700'} style={{ marginBottom: '20px' }}>
@ -32,6 +32,79 @@ const Overview = () => {
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}>
<Link to={'www.youtube.com'}> Learn more</Link>
</Text>
<XStack style={{ justifyContent: 'space-between', width: '170%', height: '100px' }}>
<YStack
style={{
borderRadius: '16px',
border: '1px solid rgba(0, 0, 0, 0.15)',
width: '335px',
padding: '8px 16px',
backgroundColor: '#FFF',
}}
>
<Text size={19} weight={'semibold'}>
Current APR
</Text>
<Text size={27} color="blue" weight={'semibold'}>
afasfa
</Text>
</YStack>
<YStack
style={{
borderRadius: '16px',
border: '1px solid rgba(0, 0, 0, 0.15)',
backgroundColor: '#FFF',
width: '335px',
padding: '8px 16px',
}}
>
<Text size={19} weight={'semibold'}>
Current APR
</Text>
<Text size={27} color="blue" weight={'semibold'}>
afasfa
</Text>
</YStack>
<YStack
style={{
borderRadius: '16px',
border: '1px solid rgba(0, 0, 0, 0.15)',
width: '335px',
backgroundColor: '#FFF',
padding: '8px 16px',
}}
>
<Text size={19} weight={'semibold'}>
Current APR
</Text>
<Text size={27} color="blue" weight={'semibold'}>
afasfa
</Text>
</YStack>
<YStack
style={{
borderRadius: '16px',
border: '1px solid rgba(0, 0, 0, 0.15)',
width: '335px',
backgroundColor: '#FFF',
padding: '8px 16px',
}}
>
<Text size={19} weight={'semibold'}>
Current APR
</Text>
<Text size={27} color="blue" weight={'semibold'}>
afasfa
</Text>
</YStack>
</XStack>
</YStack> </YStack>
<section className="layout-right"> <section className="layout-right">
<div className="image-container"> <div className="image-container">