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

fix(uptime cards): make cards responsive

Browse Source
This commit is contained in:
Hristo Nedelkov 2024-03-22 10:28:29 +02:00 committed by Emil Ivanichkov
parent 2d22996841
commit fb1a7fe810
3 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
View File

@ -7,7 +7,7 @@ import DashboardCardWrapper from '../DashboardCardWrapper'
const ConsensusUptimeCard = () => { const ConsensusUptimeCard = () => {
return ( return (
<DashboardCardWrapper minWidth="100px"> <DashboardCardWrapper>
<YStack space={'$3'}> <YStack space={'$3'}>
<YStack> <YStack>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>

17
src/pages/Dashboard/DashboardContent.tsx
View File

@ -21,7 +21,7 @@ const DashboardContent = () => {
const { width } = useWindowSize() const { width } = useWindowSize()
return ( return (
<YStack <YStack
space="$4" space="$3"
alignItems="flex-start" alignItems="flex-start"
px="24px" px="24px"
minWidth="500px" minWidth="500px"
@ -64,14 +64,14 @@ const DashboardContent = () => {
width: '100%', width: '100%',
}} }}
> >
<YStack space="$4"> <YStack space="$3">
<XStack space="$2" width="100%" flexWrap="wrap"> <XStack space="$2" width={'100%'}>
<ConsensusUptimeCard /> <ConsensusUptimeCard />
<ExecutionUptime /> <ExecutionUptime />
</XStack> </XStack>
<DeviceUptime /> <DeviceUptime />
</YStack> </YStack>
<YStack space={'$4'}> <YStack space={'$3'}>
<XStack space={'$4'}> <XStack space={'$4'}>
<StorageCard maxStorage={100} storage={182} /> <StorageCard maxStorage={100} storage={182} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} /> <CPUCard load={[12, 31, 3, 2, 24, 98]} />
@ -92,12 +92,13 @@ const DashboardContent = () => {
} }
const DashboardContentLayout = (width: number) => { const DashboardContentLayout = (width: number) => {
return ( return (
<Stack width={'100%'}> <Stack width={'100%'} space="$3">
<YStack> <YStack space="$3">
<XStack> <Stack space="$2" width={'100%'}>
<ConsensusUptimeCard /> <ConsensusUptimeCard />
<ExecutionUptime /> <ExecutionUptime />
</XStack> </Stack>
<DeviceUptime /> <DeviceUptime />
</YStack> </YStack>

2
src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
View File

@ -7,7 +7,7 @@ import DashboardCardWrapper from '../DashboardCardWrapper'
const ExecutionUptime = () => { const ExecutionUptime = () => {
return ( return (
<DashboardCardWrapper minWidth="100px"> <DashboardCardWrapper>
<YStack space={'$3'}> <YStack space={'$3'}>
<YStack> <YStack>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>