status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-01-21 00:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix:consensusGaugeCard to work responsive

Browse Source
This commit is contained in:
Hristo Nedelkov 2024-01-26 10:22:04 +02:00
parent a0edfd7113
commit 436a2776a2
1 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx
View File

@ -5,6 +5,7 @@ import { Text } from '@status-im/components'
import StandardGauge from '../../../../components/Charts/StandardGauge'
import BorderBox from '../../../../components/General/BorderBox'
import { formatNumbersWithComa } from '../../../../utilities'
import { useWindowSize } from '../../../../hooks/useWindowSize'
type ConsensusGaugeCardProps = {
synced: number
@ -14,43 +15,56 @@ type ConsensusGaugeCardProps = {
}
const ConsensusGaugeCard = ({ synced, total, title, color }: ConsensusGaugeCardProps) => {
const windowSize = useWindowSize()
return (
<BorderBox style={{ borderRadius: '10.1px', borderWidth: '0.5px' }}>
<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'}>
{formatNumbersWithComa(synced)} / {formatNumbersWithComa(total)}
</Text>
</YStack>
<Stack
style={{
border: '1px solid #DCE0E5',
borderRadius: '10px',
padding: '6px 12px',
borderWidth: '0.5px',
width: windowSize.width < 580 ? '90%' : 'auto',
height: '100%',
}}
>
<XStack space={'$2'} alignItems="center" justifyContent="space-between">
<XStack space={'$3'}>
<Stack
style={{
height: '35px',
width: '35px',
}}
space={'$2'}
>
<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'}>
{formatNumbersWithComa(synced)} / {formatNumbersWithComa(total)}
</Text>
</YStack>
</XStack>
<InfoBadgeIcon size={20} color="#A1ABBD" />
</XStack>
</BorderBox>
</Stack>
)
}