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

fix(dashboard): spaces between cards

This commit is contained in:
RadoslavDimchev 2024-04-20 16:50:48 +03:00 committed by Emil Ivanichkov
parent c94cbdfc77
commit 57d98fc83c
1 changed files with 17 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/Dashboard/Dashboard.tsx
View File

@ -37,7 +37,7 @@ const Dashboard = () => {
style={{ style={{
display: 'grid', display: 'grid',
gridTemplateColumns: width < 1400 ? '1fr' : '1fr 1fr', gridTemplateColumns: width < 1400 ? '1fr' : '1fr 1fr',
gap: '15px', gap: '14px',
gridAutoFlow: 'row', gridAutoFlow: 'row',
width: '100%', width: '100%',
}} }}
@ -56,38 +56,27 @@ const Dashboard = () => {
{width < 1400 ? ( {width < 1400 ? (
DashboardLayout(width) DashboardLayout(width)
) : ( ) : (
<Stack <div
style={{ style={{
display: 'grid', display: 'grid',
gridTemplateColumns: '1fr 1fr', gridTemplateColumns: 'repeat(4, 1fr)', // Four columns, each taking up an equal portion of the available space
gap: '15px', gap: '14px',
width: '100%', width: '100%',
}} }}
> >
<YStack space="$3">
<XStack space="$3" width={'100%'}>
<ConsensusUptimeCard /> <ConsensusUptimeCard />
<ExecutionUptime /> <ExecutionUptime />
</XStack>
<DeviceUptime />
</YStack>
<YStack space={'$3'}>
<XStack space={'$3'}>
<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]} />
</XStack> <div style={{ gridColumn: 'span 2' }}>
<XStack space="$3"> <DeviceUptime />
<MemoryCard </div>
currentMemory={[21, 33, 3, 42, 35]} <MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
maxMemory={50}
/>
<NetworkCard <NetworkCard
downloadRate={[12, 31, 22, 12, 23, 23, 90]} downloadRate={[12, 31, 22, 12, 23, 23, 90]}
uploadRate={[31, 22, 32, 132, 32, 45, 65]} uploadRate={[31, 22, 32, 132, 32, 45, 65]}
/> />
</XStack> </div>
</YStack>
</Stack>
)} )}
</YStack> </YStack>
</SidebarsWrapper> </SidebarsWrapper>
@ -108,7 +97,7 @@ const DashboardLayout = (width: number) => {
style={{ style={{
display: 'grid', display: 'grid',
gridTemplateColumns: width < 1240 ? '1fr 1fr' : '1fr 1fr 1fr 1fr', gridTemplateColumns: width < 1240 ? '1fr 1fr' : '1fr 1fr 1fr 1fr',
gap: '15px', gap: '14px',
}} }}
> >
<StorageCard maxStorage={100} storage={82} /> <StorageCard maxStorage={100} storage={82} />