chore: link changes

src/components/link/Link.tsx

@@ -11,21 +11,17 @@ interface StyledProps {
 
 const styledCss = css`
     color: ${({ fontColor }: StyledProps) => fontColor ?? textColor};
-    cursor: pointer;
-    padding: 0 2px;
-    background: linear-gradient(
-        to bottom,
-        ${({ underline }: StyledProps) => underline ?? linkHighlight} 0%,
-        ${({ underline }: StyledProps) => underline ?? linkHighlight} 100%
-    );
-    background-position: 0 100%;
-    background-size: 2px 2px;
-    background-repeat: repeat-x;
     text-decoration: none;
-    transition: background-size 0.5s;
 
     :hover {
-        background-size: 4px 50px;
+        background: linear-gradient(
+            to bottom,
+            ${({ underline }: StyledProps) => underline ?? linkHighlight} 0%,
+            ${({ underline }: StyledProps) => underline ?? linkHighlight} 100%
+        );
+        background-position: 0 100%;
+        background-size: 2px 2px;
+        background-repeat: repeat-x;
     }
 `;
 

src/styles/Themes.ts

@@ -69,7 +69,7 @@ export const burgerColor = theme('mode', {
 });
 
 export const linkHighlight = theme('mode', {
-    light: fontColors.blue2,
+    light: fontColors.blue3,
     dark: fontColors.blue3,
 });
 

src/views/other/privacy/PrivacyView.tsx

@@ -6,7 +6,7 @@ import { ContactSection } from '../ContactSection';
 import { Link } from 'components/link/Link';
 
 export const PrivacyView = () => {
-    const props = { color: fontColors.black, underline: fontColors.blue2 };
+    const props = { color: fontColors.blue2, underline: fontColors.blue2 };
 
     const renderLinks = (terms: string, privacy: string) => (
         <>
@@ -127,14 +127,14 @@ export const PrivacyView = () => {
                     to their policies when interacting with them.
                 </Text>
                 <BulletPoint>
-                    <b>Earn.com's Bitcoin Fee API</b> - Earn.com's
+                    <b>Earn.com's Bitcoin Fee API</b> - Earn.com's{' '}
                     {renderLinks(
                         'https://earn.com/privacy/',
                         'https://earn.com/terms-of-use/',
                     )}
                 </BulletPoint>
                 <BulletPoint>
-                    <b>Blockchain Explorer and Price API</b> - Blockchain's
+                    <b>Blockchain Explorer and Price API</b> - Blockchain's{' '}
                     {renderLinks(
                         'https://www.blockchain.com/legal/privacy',
                         'https://www.blockchain.com/legal/terms',

src/views/other/terms/TermsView.tsx

@@ -6,6 +6,8 @@ import { ContactSection } from '../ContactSection';
 import { Link } from 'components/link/Link';
 
 export const TermsView = () => {
+    const props = { color: fontColors.blue2, underline: fontColors.blue2 };
+
     return (
         <>
             <Section color={themeColors.blue3} padding={'40px 0 64px'}>
@@ -18,11 +20,7 @@ export const TermsView = () => {
                 <Question>1. Terms</Question>
                 <Text>
                     ThunderHub ("us", "we", or "our") provides the website{' '}
-                    <Link
-                        href={'https://thunderhub.io'}
-                        color={fontColors.black}
-                        underline={fontColors.blue2}
-                    >
+                    <Link href={'https://thunderhub.io'} {...props}>
                         https://thunderhub.io
                     </Link>{' '}
                     (the "Site"). Your use of or access to the site is subject
@@ -83,11 +81,7 @@ export const TermsView = () => {
                     and is hereby incorporated by this reference into these
                     Terms. You agree to the collection, use, storage, and
                     disclosure of your data in accordance with our{' '}
-                    <Link
-                        to={'/privacy'}
-                        color={fontColors.black}
-                        underline={fontColors.blue2}
-                    >
+                    <Link to={'/privacy'} {...props}>
                         Privacy Policy
                     </Link>
                     .