From 9ff09dedba08613698b59fc100416e3f5b00e36e Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 21 Aug 2023 12:34:51 +0300
Subject: [PATCH] feat: replace alert and check circle

---
 public/icons/alert.png                        | Bin 499 -> 0 bytes
 public/icons/check-circle.png                 | Bin 446 -> 0 bytes
 src/components/Charts/DeviceCPULoad.tsx       |   5 +++--
 src/components/Charts/DeviceMemoryHealth.tsx  |   5 ++++-
 src/components/Charts/DeviceNetworkHealth.tsx |   5 ++++-
 src/components/Charts/DeviceStorageHealth.tsx |   3 ++-
 6 files changed, 13 insertions(+), 5 deletions(-)
 delete mode 100644 public/icons/alert.png
 delete mode 100644 public/icons/check-circle.png

diff --git a/public/icons/alert.png b/public/icons/alert.png
deleted file mode 100644
index 149dff5bf29fc95b53ace2e8d63704833422f3eb..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 499
zcmV<P0Sx|$P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0f<RNK~#7FjZ?u*
z!$1(6Jtv5#KM3+7C8PtA3OK+>{5V7b&_PTGPyyymB-}xu13E}PC?X&^{CMPi?3yGv
zwqvo9b-umbx!svPpvETJv`5<bbum;*3QSiyoD)Giz+VK-;1FAjn^qi+^YJRbc@Ip;
zj-ey?3S_oYuPq-DX~zeufe~L2R#qU%yt$I#oyYqZRJFv_dBBqe?plK=TmekZOk2${
zQbgT+@-#5Rl-IpM)LUzjt7LzVL7uY~Jc~Z}7!_}J(tE)qiI-S-`s2VsD@9SMX2Ogd
z#wEYQ1E1*(AYqw=?S@t5zzvo*@yd&z9AECM?`_oUOyxF~HcRbS_QPZ)pTWf;{%Jxa
ztCq-r#sTXdTR2k;oSvG_+lkRdzeh|U57r7G6;c2#$oW9$&~FkBinp`hq&$^bi_3$L
z!1P($YyOTFQdO2NgT$oY?hc}LfE-B3(nXfIs`;;ksfSL3GTo(}aG6{J$ZnCT<iTQ)
pwa3I|$1*FM#=O$xDT~&1F+UdIp!NlUt<wMi002ovPDHLkV1jUv*8~6n

diff --git a/public/icons/check-circle.png b/public/icons/check-circle.png
deleted file mode 100644
index e42c84fb9ad1e977553e23688b6101bda183c38c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 446
zcmV;v0YUzWP)<h;3K|Lk000e1NJLTq000mG000pP1^@s6)UPbW00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0aHmtK~#7Ft&_1%
z!!Qs)?+if#LFvQ-gT>UbBMeB%#K3@%SSpa9U(j#h4`71LWk5^_7@3H~4|HTfm_G=x
zrIL@kwuwxXgi7=l%g()L`z{9fXJFZ)zBgKd+6PB%o+hBsI&hEnplfRdEe3~#1_;73
zF#+_QqBCEF1^Ah>G}HtkScep45|w?J1|IFmIf`?&G0j}Cd1p?ifqzLFs+S7@u~!E)
zf(5wTj$mVH*^^Kx<NU<fu7huOcBO#uIZVA{Kq%Kx(lQ^AU9PqwSYgnIk6xbO+ZTvq
zEm)NkB>v(TC#|zYKxt7GEb+c~{GqrV31`N>K!CqsA{gW~AjCK;iZ2mC89Xilp36Au
z0{^BLJlNt@s$dq|x5Ja`Tp-s7Qi_U_D%g#4As0xzcDi;V>DSP)z_wHJ7W`=48l49G
o8j&<ln_Q#;EzUhi)nV5015u2h-$(!Ho&W#<07*qoM6N<$g1jlU4gdfE

diff --git a/src/components/Charts/DeviceCPULoad.tsx b/src/components/Charts/DeviceCPULoad.tsx
index e481b904..9d4b6821 100644
--- a/src/components/Charts/DeviceCPULoad.tsx
+++ b/src/components/Charts/DeviceCPULoad.tsx
@@ -2,6 +2,7 @@ import StandartLineChart from './StandardLineChart'
 import IconText from '../General/IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 import { Shadow, Text } from '@status-im/components'
+import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
 
 type DataPoint = {
   x: number
@@ -49,7 +50,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
           justifyContent="space-between"
           style={{
             padding: '8px 16px',
-            position: 'relative', // Make XStack a positioning context
+            position: 'relative',
           }}
         >
           <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
@@ -67,7 +68,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
           <IconText
-            icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}
+            icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
             weight={'semibold'}
           >
             {message}
diff --git a/src/components/Charts/DeviceMemoryHealth.tsx b/src/components/Charts/DeviceMemoryHealth.tsx
index 444674c8..1dbfc560 100644
--- a/src/components/Charts/DeviceMemoryHealth.tsx
+++ b/src/components/Charts/DeviceMemoryHealth.tsx
@@ -3,6 +3,7 @@ import StandartLineChart from './StandardLineChart'
 import IconText from '../General/IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 import { Shadow as ShadowBox, Text } from '@status-im/components'
+import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
 
 type DataPoint = {
   x: number
@@ -70,7 +71,9 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
         </XStack>
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}>
+          <IconText
+            icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
+          >
             {message}
           </IconText>
           {message === 'Poor' && (
diff --git a/src/components/Charts/DeviceNetworkHealth.tsx b/src/components/Charts/DeviceNetworkHealth.tsx
index 2dbfdb51..3604fb8b 100644
--- a/src/components/Charts/DeviceNetworkHealth.tsx
+++ b/src/components/Charts/DeviceNetworkHealth.tsx
@@ -2,6 +2,7 @@ import StandartLineChart from './StandardLineChart'
 import IconText from '../General/IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 import { Shadow as ShadowBox, Text } from '@status-im/components'
+import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
 
 type DataPoint = {
   x: number
@@ -75,7 +76,9 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
         </XStack>
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}>
+          <IconText
+            icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
+          >
             {message}
           </IconText>
           {message === 'Poor' && (
diff --git a/src/components/Charts/DeviceStorageHealth.tsx b/src/components/Charts/DeviceStorageHealth.tsx
index 6c6da6c5..4ff8ccca 100644
--- a/src/components/Charts/DeviceStorageHealth.tsx
+++ b/src/components/Charts/DeviceStorageHealth.tsx
@@ -2,6 +2,7 @@ import IconText from '../General/IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 import StandardGauge from './StandardGauge'
 import { Shadow, Text } from '@status-im/components'
+import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
 interface DeviceStorageHealthProps {
   storage: number
   maxStorage: number
@@ -69,7 +70,7 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
           <IconText
-            icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}
+            icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
             weight={'semibold'}
           >
             {message}