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

use flexWrap=wrap in dashboard

This commit is contained in:
Hristo Nedelkov 2023-10-13 14:46:51 +03:00
parent abcda976dd
commit 23bc9c1c7e
1 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,17 +17,17 @@ import MemoryCard from './MemoryCard/MemoryCard'
const Dashboard = () => { const Dashboard = () => {
return ( return (
<XStack justifyContent={'space-between'} > <XStack justifyContent={'space-between'} style={{ width: '80%' }}>
<LeftSidebar /> <LeftSidebar />
<YStack <YStack
space={'$4'} space={'$4'}
alignItems="start" alignItems="start"
px="24px" px="24px"
style={{ flexGrow: '1', marginTop: '16px' }} style={{ flexGrow: '1', marginTop: '16px', width: '100%' }}
> >
<TitleLogo /> <TitleLogo />
<XStack space={'$4'} justifyContent={'space-between'} > <XStack space={'$4'} justifyContent={'space-between'} flexWrap="wrap">
<XStack space={'$4'}> <XStack space={'$4'}>
<SyncStatusCard /> <SyncStatusCard />
<AddCardsContainer /> <AddCardsContainer />
@ -36,20 +36,20 @@ const Dashboard = () => {
</XStack> </XStack>
<BasicInfoCards /> <BasicInfoCards />
<XStack space="$3" > <XStack space="$3" flexWrap="wrap">
<YStack space={'$4'}> <YStack space={'$4'}>
<XStack justifyContent="space-between"> <XStack justifyContent="space-between" flexWrap="wrap">
<ConsensusUptimeCard /> <ConsensusUptimeCard />
<ExecutionUptime /> <ExecutionUptime />
</XStack> </XStack>
<DeviceUptime /> <DeviceUptime />
</YStack> </YStack>
<YStack space={'$4'}> <YStack space={'$4'}>
<XStack space="$4" > <XStack space="$4" flexWrap="wrap">
<StorageCard maxStorage={100} storage={82} /> <StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} /> <CPUCard load={[12, 31, 3, 2, 24, 98]} />
</XStack> </XStack>
<XStack space="$4" > <XStack space="$4" flexWrap="wrap">
<MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} /> <MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
<NetworkCard <NetworkCard
downloadRate={[12, 31, 22, 12, 23, 23, 90]} downloadRate={[12, 31, 22, 12, 23, 23, 90]}
@ -62,8 +62,7 @@ const Dashboard = () => {
<RightSidebar /> <RightSidebar />
</XStack> </XStack>
) )
} }
export default Dashboard export default Dashboard;