fix first width range

This commit is contained in:
Hristo Nedelkov 2023-11-03 10:42:12 +02:00
parent 5672514787
commit e970ca6a43
4 changed files with 15 additions and 12 deletions

View File

@ -6,11 +6,10 @@ import Icon from '../../../components/General/Icon'
import DashboardCardWrapper from '../DashboardCardWrapper' import DashboardCardWrapper from '../DashboardCardWrapper'
const ConsensusUptimeCard = () => { const ConsensusUptimeCard = () => {
const monthlyActivity = [3, 0, 5, 4, 6, 7, 8, 9, 10, 1, 2, 3]
return ( return (
<DashboardCardWrapper> <DashboardCardWrapper minWidth="50px" maxWidth="1fr" >
<YStack space={'$3'}> <YStack space={'$3'} >
<YStack> <YStack>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
Consensus Uptime Consensus Uptime

View File

@ -65,7 +65,7 @@ const DashboardContent = () => {
)} )}
</Stack> </Stack>
<BasicInfoCards /> <BasicInfoCards />
{/* SECOND ROW ENDS HERE! */}
{windowWidth < 1375 ? ( {windowWidth < 1375 ? (
windowWidth < 850 ? ( windowWidth < 850 ? (
DashboardContentLayoutPhone(windowWidth) DashboardContentLayoutPhone(windowWidth)
@ -82,16 +82,20 @@ const DashboardContent = () => {
}} }}
> >
<YStack> <YStack>
<XStack> <Stack style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
}}>
<ConsensusUptimeCard /> <ConsensusUptimeCard />
<ExecutionUptime /> <ExecutionUptime />
</XStack> </Stack>
<DeviceUptime /> <DeviceUptime />
</YStack> </YStack>
<YStack space={'$4'}> <YStack space={'$4'}>
<XStack space={'$4'}> <XStack space={'$4'}>
<StorageCard maxStorage={100} storage={82} /> <StorageCard maxStorage={100} storage={182} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} /> <CPUCard load={[12, 31, 3, 2, 24, 98]} />
</XStack> </XStack>
<XStack space="$4"> <XStack space="$4">

View File

@ -28,7 +28,7 @@ const DeviceUptime = () => {
} }
return ( return (
<DashboardCardWrapper> <DashboardCardWrapper minWidth='100px'>
<YStack space={'$3'}> <YStack space={'$3'}>
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'}>
<YStack> <YStack>

View File

@ -6,10 +6,10 @@ import UptimeChart from '../UptimeChart/UptimeChart'
import DashboardCardWrapper from '../DashboardCardWrapper' import DashboardCardWrapper from '../DashboardCardWrapper'
const ExecutionUptime = () => { const ExecutionUptime = () => {
const monthlyActivity = [3, 0, 5, 4, 6, 7, 0, 9, 10, 1, 2, 3]
return ( return (
<DashboardCardWrapper> <DashboardCardWrapper minWidth="100px" maxWidth="1fr" >
<YStack space={'$3'} minHeight={'156px'} padding={'$3'}> <YStack space={'$3'} >
<YStack> <YStack>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
Execution Uptime Execution Uptime