feat: link with arrows clickable and reduced

src/components/General/LinkWithArrow.tsx

@@ -1,6 +1,5 @@
-import { Text } from '@status-im/components'
-import { Link } from 'react-router-dom'
-import { Stack, XStack } from 'tamagui'
+import { Link, useNavigate } from 'react-router-dom'
+import { XStack } from 'tamagui'
 import { ArrowLeftIcon, ArrowRightIcon } from '@status-im/icons'
 
 type LinkWithArrowProps = {
@@ -12,18 +11,29 @@ type LinkWithArrowProps = {
 }
 
 const LinkWithArrow = ({ text, to, arrowLeft, arrowRight, style }: LinkWithArrowProps) => {
+  const navigate = useNavigate()
+
+  const navigateHandler = () => {
+    navigate(to)
+  }
+
   return (
-    <Stack style={{ maxWidth: 'fit-content', ...style }}>
-      <Text size={15}>
-        <XStack space={'$1'} style={{ alignItems: 'center' }}>
-          {arrowLeft && <ArrowLeftIcon size={16} color="#2A4CF4" />}
-          <Link style={{ color: '#2A4CF4' }} to={to}>
-            {text}
-          </Link>
-          {arrowRight && <ArrowRightIcon size={16} color="#2A4CF4" />}
-        </XStack>
-      </Text>
-    </Stack>
+    <XStack
+      space={'$1.5'}
+      style={{
+        alignItems: 'center',
+        maxWidth: 'fit-content',
+        cursor: 'pointer',
+        ...style,
+      }}
+      onClick={navigateHandler}
+    >
+      {arrowLeft && <ArrowLeftIcon size={20} color="#2A4CF4" />}
+      <Link style={{ color: '#2A4CF4', marginBottom: '2px' }} to={to}>
+        {text}
+      </Link>
+      {arrowRight && <ArrowRightIcon size={20} color="#2A4CF4" />}
+    </XStack>
   )
 }