From 60c08348e57a307c56b8ea912732dd9f9121e3fc Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 15 Aug 2023 11:03:16 +0300
Subject: [PATCH] improve css

---
 src/components/SyncStatusCardConsensus.tsx | 26 +++++++++---------
 src/components/SyncStatusCardExecution.tsx | 32 +++++++++++-----------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/SyncStatusCardConsensus.tsx b/src/components/SyncStatusCardConsensus.tsx
index edaae599..582d8649 100644
--- a/src/components/SyncStatusCardConsensus.tsx
+++ b/src/components/SyncStatusCardConsensus.tsx
@@ -44,21 +44,21 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
             height: '155px',
           }}
         >
-          <Stack
-            style={{
-              position: 'absolute',
-              right: '44px',
-              height: '115px',
-              width: '115px',
-            }}
-          >
-            <StandardGauge data={data()} />
-          </Stack>
-          <YStack space={'$3'}>
-            <Text size={13} color="#84888e" weight={'semibold'}>
+          <YStack space={'$3'} style={{ width: '100%' }}>
+            <Text size={15} color="#84888e" weight={'semibold'}>
               Execution Client
             </Text>
-            <Icon src="/icons/vector.svg" height={46} width={93} marginTop={'30px'} />
+            <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>
           </YStack>
         </XStack>
 
diff --git a/src/components/SyncStatusCardExecution.tsx b/src/components/SyncStatusCardExecution.tsx
index 34a49f3c..fd6f8daa 100644
--- a/src/components/SyncStatusCardExecution.tsx
+++ b/src/components/SyncStatusCardExecution.tsx
@@ -1,5 +1,5 @@
 import IconText from './IconText'
-import { Paragraph, Separator, Stack, XStack, YStack } from 'tamagui'
+import { Separator, Stack, XStack, YStack } from 'tamagui'
 import StandardGauge from './StandardGauge'
 import { Shadow, Text } from '@status-im/components'
 interface DeviceStorageHealthProps {
@@ -43,23 +43,23 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
             height: '155px',
           }}
         >
-          <Stack
-            style={{
-              position: 'absolute',
-              right: '44px',
-              height: '115px',
-              width: '115px',
-            }}
-          >
-            <StandardGauge data={data()} />
-          </Stack>
-          <YStack space={'$3'}>
-            <Text size={13} color="#84888e" weight={'semibold'}>
+          <YStack space={'$3'} style={{ width: '100%' }}>
+            <Text size={15} color="#84888e" weight={'semibold'}>
               Execution Client
             </Text>
-            <Text color={'#09101C'} size={27} weight={'semibold'}  marginTop={'30px'}>
-              Geth
-            </Text>
+            <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+              <Text color={'#09101C'} size={27} weight={'semibold'}>
+                Geth
+              </Text>
+              <Stack
+                style={{
+                  height: '115px',
+                  width: '115px',
+                }}
+              >
+                <StandardGauge data={data()} />
+              </Stack>
+            </XStack>
           </YStack>
         </XStack>