add texts and style

src/pages/ValidatorOnboarding/Overview.tsx

@@ -23,25 +23,31 @@ const Overview = () => {
             Becoming a validator is a big responsibility with important preparation steps. Only
             start the deposit process when youre ready.
           </Text>
-          <Text size={15} color="#939BA1">
+          <Text size={19} color="#939BA1" type={''}>
             By running a validator, you'll be responsible for securing the network and receive
             continuous payouts for actions that help the network reach consensus.
           </Text>
-          <Text size={15} color="#939BA1">
+          <Text size={19} color="#939BA1">
             Since the successful transition to proof-of-stake via The Merge, Ethereum is fully
             secured by proof-of-stake validators. By running a validator, you'll be helping to
             secure the Ethereum network.
           </Text>
           <Text size={13}>
-            <Link to={'www.youtube.com'}> Learn more</Link>
+            <Link to={'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}> Learn more</Link>
           </Text>
-          <XStack style={{ justifyContent: 'space-between', width: '170%', height: '100px' }}>
+          <XStack
+            style={{
+              justifyContent: 'space-between',
+              width: '180%',
+              height: '100px',
+              marginTop: '200px',
+            }}
+          >
             <YStack
               style={{
                 borderRadius: '16px',
                 border: '1px solid rgba(0, 0, 0, 0.15)',
-                width: '335px',
+                width: '305px',
-
                 padding: '8px 16px',
                 backgroundColor: '#FFF',
               }}
@@ -50,7 +56,7 @@ const Overview = () => {
                 Current APR
               </Text>
               <Text size={27} color="blue" weight={'semibold'}>
-                afasfa
+                4.40%
               </Text>
             </YStack>
             <YStack
@@ -58,50 +64,47 @@ const Overview = () => {
                 borderRadius: '16px',
                 border: '1px solid rgba(0, 0, 0, 0.15)',
                 backgroundColor: '#FFF',
-                width: '335px',
+                width: '305px',
-
                 padding: '8px 16px',
               }}
             >
               <Text size={19} weight={'semibold'}>
-                Current APR
+                Total ETH Staked
               </Text>
               <Text size={27} color="blue" weight={'semibold'}>
-                afasfa
+                19,451,123
               </Text>
             </YStack>
             <YStack
               style={{
                 borderRadius: '16px',
                 border: '1px solid rgba(0, 0, 0, 0.15)',
-                width: '335px',
+                width: '305px',
-
                 backgroundColor: '#FFF',
                 padding: '8px 16px',
               }}
             >
               <Text size={19} weight={'semibold'}>
-                Current APR
+                Estimated Activation Time
               </Text>
               <Text size={27} color="blue" weight={'semibold'}>
-                afasfa
+                32 Days
               </Text>
             </YStack>
             <YStack
               style={{
                 borderRadius: '16px',
                 border: '1px solid rgba(0, 0, 0, 0.15)',
-                width: '335px',
+                width: '305px',
-
                 backgroundColor: '#FFF',
                 padding: '8px 16px',
               }}
             >
               <Text size={19} weight={'semibold'}>
-                Current APR
+                Validator Queue
               </Text>
               <Text size={27} color="blue" weight={'semibold'}>
-                afasfa
+                92603
               </Text>
             </YStack>
           </XStack>