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: add colors to sync cards

This commit is contained in:
RadoslavDimchev 2023-08-25 15:01:57 +03:00
parent 7a1b16759e
commit f64d7e5c63
2 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx
View File

@ -7,8 +7,18 @@ const KeyGenerationHeader = () => {
<XStack style={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}>
<KeyGenerationTitle />
<XStack space={'$2'}>
<KeyGenerationSyncCard synced={123.524} total={172.503} title="Execution Sync Status" />
<KeyGenerationSyncCard synced={123.524} total={172.503} title="Consensus Sync Status" />
<KeyGenerationSyncCard
synced={123.524}
total={172.503}
title="Execution Sync Status"
color="#2a4af5"
/>
<KeyGenerationSyncCard
synced={123.524}
total={172.503}
title="Consensus Sync Status"
color="#ff6161"
/>
</XStack>
</XStack>
)

37
src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx
View File

@ -7,26 +7,10 @@ type KeyGenerationSyncCardProps = {
synced: number
total: number
title: string
color: string
}
const KeyGenerationSyncCard = ({ synced, total, title }: KeyGenerationSyncCardProps) => {
const data = () => {
return [
{
id: 'storage',
label: 'Used',
value: synced,
color: '#2a4af5',
},
{
id: 'storage',
label: 'Free',
value: total - synced || 1,
color: '#E7EAEE',
},
]
}
const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyncCardProps) => {
return (
<XStack
space={'$2'}
@ -39,7 +23,22 @@ const KeyGenerationSyncCard = ({ synced, total, title }: KeyGenerationSyncCardPr
width: '35px',
}}
>
<StandardGauge data={data()} />
<StandardGauge
data={[
{
id: 'storage',
label: 'Used',
value: synced,
color: color,
},
{
id: 'storage',
label: 'Free',
value: total - synced || 1,
color: '#E7EAEE',
},
]}
/>
</Stack>
<YStack>
<Text size={11} color="#84888e" weight={'semibold'}>