From 59362dc5ef69b5ddfaafda5a5ae666a3190586b8 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Sat, 21 Oct 2023 19:33:12 +0300
Subject: [PATCH] Add grids

---
 src/pages/Dashboard/DashboardContent.tsx | 49 ++++++++++++++++--------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx
index ddf17498..4cea519c 100644
--- a/src/pages/Dashboard/DashboardContent.tsx
+++ b/src/pages/Dashboard/DashboardContent.tsx
@@ -62,28 +62,43 @@ const DashboardContent = () => {
           gap: '16px',
         }}
       >
-        <YStack space={'4$'}>
-          <XStack flexWrap="wrap" space={'$4'}>
+        <YStack
+          style={{
+            display: 'grid',
+            gridTemplateColumns: windowWidth < 1300 ? '1fr' : '1fr 1fr',
+            gridAutoFlow: 'row',
+            gap: '16px',
+            marginTop: windowWidth < 1300 ? '50px' : 0,
+          }}
+        >
+          <XStack style={{ gridColumn: '1 / span 2' }}>
             <ConsensusUptimeCard />
             <ExecutionUptime />
           </XStack>
-          <DeviceUptime />
-        </YStack>
-        <YStack space={'$4'}>
-          <XStack flexWrap="wrap" space={'$4'}>
-            <StorageCard maxStorage={100} storage={82} />
-            <CPUCard load={[12, 31, 3, 2, 24, 98]} />
-          </XStack>
-          <XStack flexWrap="wrap" space={'$4'}>
-            <MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
-            <NetworkCard
-              downloadRate={[12, 31, 22, 12, 23, 23, 90]}
-              uploadRate={[31, 22, 32, 132, 32, 45, 65]}
-            />
-          </XStack>
+          <Stack style={{ gridColumn: '1 / span 2' }}>
+            <DeviceUptime />
+          </Stack>
         </YStack>
+
+        <Stack
+          style={{
+            display: 'grid',
+            gridTemplateColumns: windowWidth < 1300 ? '1fr' : '1fr 1fr',
+            gap: '16px',
+            marginTop: windowWidth < 1300 ? '50px' : 0,
+          }}
+        >
+          <StorageCard maxStorage={100} storage={82} />
+          <CPUCard load={[12, 31, 3, 2, 24, 98]} />
+          <MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
+          <NetworkCard
+            downloadRate={[12, 31, 22, 12, 23, 23, 90]}
+            uploadRate={[31, 22, 32, 132, 32, 45, 65]}
+          />
+          {/* </YStack> */}
+        </Stack>
       </Stack>
-    </YStack>
+    </YStack >
   )
 }