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: use border box for key gen syn card

This commit is contained in:
RadoslavDimchev 2023-08-28 11:09:28 +03:00
parent 10ba1e0cf6
commit 3a847e3ab5
1 changed files with 37 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import { Stack, XStack, YStack } from 'tamagui'
import StandardGauge from '../../../components/Charts/StandardGauge'
import { ClearIcon } from '@status-im/icons'
import { Text } from '@status-im/components'
import BorderBox from '../../../components/General/BorderBox'
type KeyGenerationSyncCardProps = {
synced: number
@ -12,44 +13,42 @@ type KeyGenerationSyncCardProps = {
const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyncCardProps) => {
return (
<XStack
space={'$2'}
alignItems="center"
style={{ border: '1px solid #DCE0E5', borderRadius: '0.5rem', padding: '6px 12px' }}
>
<Stack
style={{
height: '35px',
width: '35px',
}}
>
<StandardGauge
data={[
{
id: title,
label: title,
value: synced,
color: color,
},
{
id: 'free',
label: 'free',
value: total - synced || 1,
color: '#E7EAEE',
},
]}
/>
</Stack>
<YStack>
<Text size={11} color="#84888e" weight={'semibold'}>
{title}
</Text>
<Text size={15} weight={'semibold'}>
{synced} / {total}
</Text>
</YStack>
<ClearIcon size={20} color="#A1ABBD" />
</XStack>
<BorderBox>
<XStack space={'$2'} alignItems="center">
<Stack
style={{
height: '35px',
width: '35px',
}}
>
<StandardGauge
data={[
{
id: title,
label: title,
value: synced,
color: color,
},
{
id: 'free',
label: 'free',
value: total - synced || 1,
color: '#E7EAEE',
},
]}
/>
</Stack>
<YStack>
<Text size={11} color="#84888e" weight={'semibold'}>
{title}
</Text>
<Text size={15} weight={'semibold'}>
{synced} / {total}
</Text>
</YStack>
<ClearIcon size={20} color="#A1ABBD" />
</XStack>
</BorderBox>
)
}