feat(validator peers cards): implement new validator peers cards

src/pages/ValidatorManagement/ManageValidator/ValidatorDataCard.tsx

@@ -1,30 +1,40 @@
 import { Text } from '@status-im/components'
-import { Stack, YStack } from 'tamagui'
+import { Stack, XStack, YStack } from 'tamagui'
+import Icon from '../../../components/General/Icon'
 
 type ValidatorDataCardProps = {
   title: string
   value: string
+  iconPath: string
 }
 
-const ValidatorDataCard = ({ title, value }: ValidatorDataCardProps) => {
+const ValidatorDataCard = ({
+  title,
+  value,
+  iconPath,
+}: ValidatorDataCardProps) => {
   return (
-    <Stack
+    <XStack
       style={{
         border: '0.5px solid #DCE0E5',
         flexGrow: '1',
         borderRadius: '16px',
         padding: '10px',
+        alignContent: 'center',
+        alignItems: 'center',
       }}
+      space="$3"
     >
+      <Icon src={`/icons/${iconPath}`} width={35} height={35}></Icon>
       <YStack>
-        <Text size={15} weight={'semibold'}>
+        <Text size={13} weight={'semibold'} color="#647084">
           {title}
         </Text>
-        <Text size={27} weight={'semibold'}>
+        <Text size={19} weight={'semibold'}>
           {value}
         </Text>
       </YStack>
-    </Stack>
+    </XStack>
   )
 }
 

src/pages/ValidatorManagement/ManageValidator/ValidatorDataCards.tsx

@@ -15,11 +15,14 @@ const ValidatorDataCards = () => {
       }}
     >
       <ValidatorPeersCard title="Peers" value="67"></ValidatorPeersCard>
-      <ValidatorDataCard title="Blocks" value="1" />
-      <ValidatorDataCard title="Attestations" value="1452" />
-      <ValidatorDataCard title="Syncs" value="45" />
-      <ValidatorDataCard title="Deposits" value="1" />
-      <ValidatorDataCard title="Withdrawals" value="0" />
+      <ValidatorDataCard title="Blocks" value="1" iconPath="ghost.png" />
+      <ValidatorDataCard
+        title="Attestations"
+        value="1452"
+        iconPath="rubiks-cube.png"
+      />
+      <ValidatorDataCard title="Syncs" value="45" iconPath="pacman.png" />
+      <ValidatorDataCard title="Deposits" value="1" iconPath="toaster.png" />
     </Stack>
   )
 }

src/pages/ValidatorManagement/ManageValidator/ValidatorPeersCard.tsx

@@ -47,7 +47,7 @@ const ValidatorPeersCard = ({ title, value }: ValidatorPeersCardProps) => {
           <ValidatorPeersPieChart data={PeersPieData} />
         </Stack>
         <YStack>
-          <Text size={15} weight={'semibold'}>
+          <Text size={13} weight={'semibold'} color="#647084">
             {title}
           </Text>
           <Text size={27} weight={'semibold'}>