From b4096405187b7df21896305a796d3958280ba4cd Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 19 Sep 2023 18:20:23 +0300
Subject: [PATCH] Update SyncStatus design from new figma design

---
 .../SyncStatusCard/SyncCardContent.tsx        | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/pages/Dashboard/SyncStatusCard/SyncCardContent.tsx b/src/pages/Dashboard/SyncStatusCard/SyncCardContent.tsx
index f8f49042..04c11cf9 100644
--- a/src/pages/Dashboard/SyncStatusCard/SyncCardContent.tsx
+++ b/src/pages/Dashboard/SyncStatusCard/SyncCardContent.tsx
@@ -5,6 +5,8 @@ import { CSSProperties } from 'react'
 
 import { formatNumberWithComa } from '../../../utilities'
 import IconText from '../../../components/General/IconText'
+import Icon from '../../../components/General/Icon'
+import StandardGauge from '../../../components/Charts/StandardGauge'
 
 type SyncCardContentProps = {
   title: string
@@ -12,7 +14,20 @@ type SyncCardContentProps = {
   total: number
   isTop?: boolean
 }
-
+const data = [
+  {
+    id: 'storage',
+    label: 'Used',
+    value: 132156,
+    color: '#ff6161',
+  },
+  {
+    id: 'storage',
+    label: 'Free',
+    value: 200000,
+    color: '#E7EAEE',
+  },
+]
 const SyncCardContent = ({ title, value, total, isTop }: SyncCardContentProps) => {
   const style: CSSProperties = {}
 
@@ -31,6 +46,17 @@ const SyncCardContent = ({ title, value, total, isTop }: SyncCardContentProps) =
           <Text size={15} weight={'semibold'} color="#647084">
             {title}
           </Text>
+          <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+            <Icon src="./icons/vector.svg" height={46} width={93} />
+            <Stack
+              style={{
+                height: '115px',
+                width: '115px',
+              }}
+            >
+              <StandardGauge data={data} />
+            </Stack>
+          </XStack>
         </Stack>
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$3'} style={{ padding: '12px 16px' }}>