Add hover and active colors to Link component

5 files changed, 49 insertions, 26 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx
index 625c851296..ac064773f2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-import { Colors, colors, Radius, Typography } from '../../foundations';
-import { PolymorphicProps, TransientProps } from '../../types';
+import { Colors, colors, Typography } from '../../foundations';
+import { PolymorphicProps } from '../../types';
 import { LinkIcon, LinkText, StyledIcon as StyledLinkIcon, StyledLinkText } from './components';
-import { useHoverColor } from './hooks';
+import { useStateColors } from './hooks';
 import { LinkProvider } from './LinkContext';
 
 type LinkBaseProps = {
@@ -14,11 +14,12 @@ type LinkBaseProps = {
 
 export type LinkProps<T extends React.ElementType = 'a'> = PolymorphicProps<T, LinkBaseProps>;
 
-const StyledLink = styled.a<
-  TransientProps<LinkProps> & {
-    $hoverColor?: Colors;
-  }
->(({ $hoverColor }) => {
+const StyledLink = styled.a<{
+  $hoverColor: Colors;
+  $activeColor: Colors;
+}>(({ $hoverColor, $activeColor }) => {
+  const hoverColor = colors[$hoverColor];
+  const activeColor = colors[$activeColor];
   return css`
     cursor: default;
     text-decoration: none;
@@ -26,17 +27,22 @@ const StyledLink = styled.a<
     width: fit-content;
 
     &&:hover > ${StyledLinkText} {
-      text-decoration-line: underline;
-      text-underline-offset: 2px;
-      color: ${$hoverColor};
+      color: ${hoverColor};
+    }
+
+    &&:active > ${StyledLinkText} {
+      color: ${activeColor};
     }
 
     &&:focus-visible > ${StyledLinkText} {
-      border-radius: ${Radius.radius4};
       outline: 2px solid ${colors.white};
       outline-offset: 2px;
     }
 
+    &&:disabled > ${StyledLinkText} {
+      color: ${colors.whiteAlpha40};
+    }
+
     > ${StyledLinkIcon}:first-child:not(:only-child) {
       margin-right: 2px;
     }
@@ -52,10 +58,10 @@ function Link<T extends React.ElementType = 'a'>({
   children,
   ...props
 }: LinkProps<T>) {
-  const hoverColor = useHoverColor(color);
+  const { hover, active } = useStateColors(color);
   return (
     <LinkProvider variant={variant} color={color}>
-      <StyledLink $hoverColor={hoverColor} {...props}>
+      <StyledLink $hoverColor={hover} $activeColor={active} draggable={false} {...props}>
         {children}
       </StyledLink>
     </LinkProvider>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkText.tsx
index c8c1ff8baa..26acb87e15 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkText.tsx
@@ -5,7 +5,10 @@ import { useLinkContext } from '../LinkContext';
 
 export type LinkTextProps = TextProps;
 
-export const StyledLinkText = styled(Text)``;
+export const StyledLinkText = styled(Text)`
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+`;
 
 export function LinkText(props: LinkTextProps) {
   const { variant, color } = useLinkContext();
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/index.ts
index 4f17d940a4..700c211e5c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/index.ts
@@ -1 +1 @@
-export * from './use-hover-color';
+export * from './use-state-colors';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/use-hover-color.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/use-hover-color.ts
deleted file mode 100644
index f62f26a6fe..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/use-hover-color.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Colors } from '../../../foundations';
-
-export const useHoverColor = (color: Colors | undefined) => {
-  switch (color) {
-    case 'whiteAlpha60':
-      return 'white';
-    default:
-      return undefined;
-  }
-};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/use-state-colors.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/use-state-colors.ts
new file mode 100644
index 0000000000..5dcd689bf0
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/hooks/use-state-colors.ts
@@ -0,0 +1,24 @@
+import { Colors } from '../../../foundations';
+
+const colorMap: Record<
+  Extract<Colors, 'white' | 'whiteAlpha60'>,
+  {
+    hover: Colors;
+    active: Colors;
+  }
+> = {
+  whiteAlpha60: { hover: 'chalk', active: 'white' },
+  white: { hover: 'chalk', active: 'whiteAlpha60' },
+} as const;
+
+export const useStateColors = (
+  color: Colors | undefined,
+): {
+  hover: Colors;
+  active: Colors;
+} => {
+  if (color === 'white' || color === 'whiteAlpha60') {
+    return colorMap[color];
+  }
+  return colorMap.white;
+};