From 1ce402491d93ec5bed1a21f799f702772c1f8bf2 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 25 Aug 2023 12:24:43 +0300
Subject: [PATCH] feat: add cards and styling

---
 .../ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx   | 2 +-
 .../KeyGeneration/KeyGenerationHeader.tsx                 | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 69416dd2..f13885a1 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -3,7 +3,7 @@ import KeyGenerationHeader from './KeyGenerationHeader'
 
 const KeyGeneration = () => {
   return (
-    <YStack space={'$2'}>
+    <YStack space={'$2'} style={{ width: '100%' }}>
       <KeyGenerationHeader />
     </YStack>
   )
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx
index 6e15f796..c38e5226 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx
@@ -1,16 +1,16 @@
 import { Text } from '@status-im/components'
 import { XStack } from 'tamagui'
-// import SyncCard from './SyncCard'
+import SyncCard from './SyncCard'
 
 const KeyGenerationHeader = () => {
   return (
-    <XStack justifyContent="space-between">
+    <XStack style={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}>
       <Text size={27} weight={'semibold'}>
         Key Generation
       </Text>
       <XStack space={'$2'}>
-        {/* <SyncCard synced={123.524} total={172.503} />
-        <SyncCard synced={123.524} total={172.503} /> */}
+        <SyncCard synced={123.524} total={172.503} title="Execution Sync Status" />
+        <SyncCard synced={123.524} total={172.503} title="Consensus Sync Status" />
       </XStack>
     </XStack>
   )