From 5cdb4d247b0e5d5f71c4a02412b2f5cbab7dde73 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 19 Sep 2023 11:35:01 +0300
Subject: [PATCH] Update NetworkCard  with use of DashboardCardWrapper

---
 src/pages/Dashboard/Dashboard.tsx             |  4 ++--
 src/pages/Dashboard/MemoryCard/MemoryCard.tsx |  5 +----
 .../Dashboard/NetworkCard/NetworkCard.tsx     | 22 +++++++++----------
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 8ca81af8..3ad43bb3 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -47,8 +47,8 @@ const Dashboard = () => {
               <XStack space="$4">
                 <MemoryCard currentMemory={[21, 33, 3, 42,35]} maxMemory={50} />
                 <NetworkCard
-                  downloadRate={[12, 31, 2, 12, 3, 23]}
-                  uploadRate={[31, 12, 3, 13, 3]}
+                  downloadRate={[12, 31, 2, 12, 3, 23,90]}
+                  uploadRate={[31, 12, 3, 13, 3,45,65]}
                 />
               </XStack>
             </YStack>
diff --git a/src/pages/Dashboard/MemoryCard/MemoryCard.tsx b/src/pages/Dashboard/MemoryCard/MemoryCard.tsx
index bb1db19d..7bb29a51 100644
--- a/src/pages/Dashboard/MemoryCard/MemoryCard.tsx
+++ b/src/pages/Dashboard/MemoryCard/MemoryCard.tsx
@@ -41,16 +41,13 @@ const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => {
   const message = currentLoad < maxMemory ? 'Good' : 'Poor'
 
   return (
-    <DashboardCardWrapper  padding='0'>
-
-
+    <DashboardCardWrapper padding='0'>
       <YStack style={{
         width: '284px',
         height: '136px',
         borderRadius: '16px',
         border: message === 'Poor' ? '1px solid  #D92344' : 'none',
         backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
-
       }}>
         <XStack
           justifyContent="space-between"
diff --git a/src/pages/Dashboard/NetworkCard/NetworkCard.tsx b/src/pages/Dashboard/NetworkCard/NetworkCard.tsx
index eae40b6f..8954b7a9 100644
--- a/src/pages/Dashboard/NetworkCard/NetworkCard.tsx
+++ b/src/pages/Dashboard/NetworkCard/NetworkCard.tsx
@@ -4,6 +4,7 @@ import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
 
 import StandartLineChart from '../../../components/Charts/StandardLineChart'
 import IconText from '../../../components/General/IconText'
+import DashboardCardWrapper from '../DashboardCardWrapper'
 
 type DataPoint = {
   x: number
@@ -40,24 +41,23 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
       })),
     },
   ]
-  
+
   const currentLoad =
     chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
 
   const message = currentLoad > 60 ? 'Good' : 'Poor'
 
   return (
-    <ShadowBox
-      variant="$2"
-      style={{
+    <DashboardCardWrapper padding='0'>
+
+
+      <YStack style={{
         width: '284px',
         height: '136px',
         borderRadius: '16px',
         border: message === 'Poor' ? '1px solid  #D92344' : 'none',
         backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
-      }}
-    >
-      <YStack>
+      }}>
         <XStack
           justifyContent="space-between"
           style={{
@@ -65,9 +65,9 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
             position: 'relative',
           }}
         >
-          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
+          <Stack style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
             <StandartLineChart data={chartData} />
-          </div>
+          </Stack>
           <YStack space={'$3'} width={'100%'}>
             <XStack justifyContent="space-between" width={'100%'}>
               <Stack>
@@ -90,7 +90,7 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
           </YStack>
         </XStack>
         <Separator borderColor={'#e3e3e3'} />
-        <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
+        <XStack space={'$4'} style={{ padding: '10px 16px 25px 16px' }}>
           <IconText
             icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
           >
@@ -103,7 +103,7 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
           )}
         </XStack>
       </YStack>
-    </ShadowBox>
+    </DashboardCardWrapper>
   )
 }