From 6a18bc817a14da33a8686d4c6b0fe783acf0d722 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 14 Aug 2023 11:29:04 +0300
Subject: [PATCH] Fix Network error handling

---
 src/components/DeviceMemoryHealth.tsx         |  2 +-
 src/components/DeviceNetworkHealth.tsx        | 21 +++++++++++++++----
 .../DeviceHealthCheck/DeviceHealthCheck.tsx   |  2 +-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/DeviceMemoryHealth.tsx b/src/components/DeviceMemoryHealth.tsx
index b7012b22..449331d3 100644
--- a/src/components/DeviceMemoryHealth.tsx
+++ b/src/components/DeviceMemoryHealth.tsx
@@ -35,7 +35,7 @@ const DeviceMemory = ({ currentMemory, maxMemory }: DeviceMemoryProps) => {
   const currentLoad =
     chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
 
-  const message = currentLoad < 80 ? 'Good' : 'Poor'
+  const message = currentLoad < maxMemory ? 'Good' : 'Poor'
 
   return (
     <ShadowBox
diff --git a/src/components/DeviceNetworkHealth.tsx b/src/components/DeviceNetworkHealth.tsx
index 0af992e1..657f9270 100644
--- a/src/components/DeviceNetworkHealth.tsx
+++ b/src/components/DeviceNetworkHealth.tsx
@@ -1,7 +1,7 @@
 import StandartLineChart from './StandardLineChart'
 import IconText from './IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
-import { Shadow as ShadowBox } from '@status-im/components'
+import { Shadow as ShadowBox, Text } from '@status-im/components'
 
 type DataPoint = {
   x: number
@@ -40,10 +40,19 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
   const currentLoad =
     chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
 
-  const message = currentLoad < 80 ? 'Good' : 'Poor'
+  const message = currentLoad > 60 ? 'Good' : 'Poor'
 
   return (
-    <ShadowBox variant="$2" style={{ width: '284px', height: '136px', borderRadius: '16px' }}>
+    <ShadowBox
+      variant="$2"
+      style={{
+        width: '284px',
+        height: '136px',
+        borderRadius: '16px',
+        border: message === 'Poor' ? '1px solid  #D92344' : 'none',
+        backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
+      }}
+    >
       <YStack>
         <XStack
           justifyContent="space-between"
@@ -69,7 +78,11 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
           <IconText icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}>
             {message}
           </IconText>
-          {/* <Text color={'#E95460'}>This is additional text</Text>  */}
+          {message === 'Poor' && (
+            <Text size={13} color="#E95460">
+              {((currentLoad / 60) * 100).toFixed(0)}% Uttilization
+            </Text>
+          )}
         </XStack>
       </YStack>
     </ShadowBox>
diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
index 1b4debd9..a1d7131f 100644
--- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
+++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
@@ -44,7 +44,7 @@ const DeviceHeanlthCheckContent = () => {
           <DeviceCPULoad load={[12, 123, 4]} />
         </XStack>
         <XStack space={'$4'}>
-          <DeviceMemory currentMemory={[25, 31, 5, 14, 20,81]} maxMemory={78} />
+          <DeviceMemory currentMemory={[25, 31, 5, 14, 20,81]} maxMemory={38} />
           <DeviceNetworkHealth uploadRate={[1, 4, 23, 11]} downloadRate={[20, 3, 40, 56]} />
         </XStack>
         <HealthInfoSection