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: separate diamond card

This commit is contained in:
RadoslavDimchev 2023-10-18 08:43:11 +03:00
parent 07d9509db7
commit ddf7db1227
2 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/General/RightSideBar/DiamondCard.tsx Normal file
View File

@ -0,0 +1,36 @@
import { Text } from '@status-im/components'
import { XStack, YStack } from 'tamagui'
const DiamondCard = () => {
return (
<YStack
backgroundColor={'#2A4AF5'}
style={{
padding: '8px 12px',
borderRadius: '16px',
flexGrow: '1',
height: 'max-fit',
}}
>
<Text size={15} weight={'semibold'} color={'#FFF'}>
💎 Diamond Hands
</Text>
<Text size={27} weight={'semibold'} color={'#FFF'}>
$0.00
</Text>
<XStack space={'$1.5'} alignItems={'center'}>
<Text size={13} color={'#bac7fb'}>
0%
</Text>
<Text size={13} color={'#bac7fb'}>
.
</Text>
<Text size={13} color={'#bac7fb'}>
$0
</Text>
</XStack>
</YStack>
)
}
export default DiamondCard

29
src/components/General/RightSideBar/RightSidebar.tsx
View File

@ -7,6 +7,7 @@ import ValidatorsList from './ValidatorsList'
import AlertsList from './AlertsList' import AlertsList from './AlertsList'
import LogsList from './LogsList' import LogsList from './LogsList'
import { getFormattedWalletAddress } from '../../../utilities' import { getFormattedWalletAddress } from '../../../utilities'
import DiamondCard from './DiamondCard'
const RightSidebar = () => { const RightSidebar = () => {
const countOfValidators = useSelector((state: any) => state.rightSidebar.countOfValidators) const countOfValidators = useSelector((state: any) => state.rightSidebar.countOfValidators)
@ -33,33 +34,7 @@ const RightSidebar = () => {
</YStack> </YStack>
</XStack> </XStack>
<XStack space={'$2'} alignItems="center" justifyContent="space-between"> <XStack space={'$2'} alignItems="center" justifyContent="space-between">
<YStack <DiamondCard />
backgroundColor={'#2A4AF5'}
style={{
padding: '8px 12px',
borderRadius: '16px',
flexGrow: '1',
height: 'max-fit',
}}
>
<Text size={15} weight={'semibold'} color={'#FFF'}>
💎 Diamond Hands
</Text>
<Text size={27} weight={'semibold'} color={'#FFF'}>
$0.00
</Text>
<XStack space={'$1.5'} alignItems={'center'}>
<Text size={13} color={'#bac7fb'}>
0%
</Text>
<Text size={13} color={'#bac7fb'}>
.
</Text>
<Text size={13} color={'#bac7fb'}>
$0
</Text>
</XStack>
</YStack>
<AddCard style={{ padding: '0 2vw' }} /> <AddCard style={{ padding: '0 2vw' }} />
</XStack> </XStack>
<XStack justifyContent={'space-between'} width={'85%'}> <XStack justifyContent={'space-between'} width={'85%'}>