feat: replace all links with arrows

src/pages/ValidatorOnboarding/Activation/Activation.tsx

@@ -3,8 +3,7 @@ import { XStack, Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import Confetti from 'react-confetti'
 import ActivationCard from './ActivationCard'
-import { Link } from 'react-router-dom'
-import { ArrowLeftIcon } from '@status-im/icons'
+import LinkWithArrow from '../../../components/General/LinkWithArrow'
 
 const styles = {
   confettiContainer: {
@@ -76,16 +75,12 @@ const Activation = () => {
             </XStack>
           </YStack>
         </YStack>
-        <Stack style={{ maxWidth: 'fit-content', marginTop: '50px' }}>
-          <Text size={15}>
-            <XStack space={'$1'} style={{ alignItems: 'center' }}>
-              <ArrowLeftIcon size={16} color="#2A4CF4" />
-              <Link style={{ color: '#2A4CF4' }} to={'/'}>
-                Edit Validators
-              </Link>
-            </XStack>
-          </Text>
-        </Stack>
+        <LinkWithArrow
+          text="Edit Validators"
+          to="/"
+          arrowLeft={true}
+          style={{ marginTop: '44px', marginBottom: '88px' }}
+        />
       </YStack>
     </Stack>
   )

src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx

@@ -1,10 +1,8 @@
-import { Separator, Stack, XStack, YStack } from 'tamagui'
-import { Text } from '@status-im/components'
-import { ArrowRightIcon } from '@status-im/icons'
-import { Link } from 'react-router-dom'
+import { Separator, YStack } from 'tamagui'
 
 import SetupRow from './SetupRow'
 import WithdrawalAddress from './WithdrawalAddress'
+import LinkWithArrow from '../../../components/General/LinkWithArrow'
 
 const ClientSetup = () => {
   return (
@@ -12,16 +10,12 @@ const ClientSetup = () => {
       <SetupRow title={'Setup up Validators'} />
       <Separator borderColor={'#F0F2F5'} />
       <WithdrawalAddress title={'Withdrawal address'} />
-      <Stack style={{ maxWidth: 'fit-content', marginTop: '50px' }}>
-        <Text size={15}>
-          <XStack space={'$1'} style={{ alignItems: 'center' }}>
-            <Link style={{ color: '#2A4CF4' }} to={'/'}>
-              Advanced Recovery Method
-            </Link>
-            <ArrowRightIcon size={16} color="#2A4CF4" />
-          </XStack>
-        </Text>
-      </Stack>
+      <LinkWithArrow
+        text="Advanced Recovery Method"
+        to={'/'}
+        arrowRight={true}
+        style={{ marginBottom: '50px' }}
+      />
     </YStack>
   )
 }

src/pages/ValidatorOnboarding/Overview/Overview.tsx

@@ -23,7 +23,7 @@ const Overview = () => {
           by proof-of-stake validators. By running a validator, you'll be helping to secure the
           Ethereum network.
         </Text>
-        <LinkWithArrow text="Learn more" to={'/'} arrowRight={true} />
+        <LinkWithArrow text="Learn more" to={'/'} arrowRight={true} style={{ margin: '2% 0 4%' }} />
         <XStack space={'$5'}>
           <OverviewCard text={'Current APR'} value={'4.40%'} />
           <OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />