diff options
| author | Oliver <oliver@mohlin.dev> | 2025-09-10 16:06:43 +0200 |
|---|---|---|
| committer | Tobias Järvelöv <tobias.jarvelov@mullvad.net> | 2025-09-11 09:25:55 +0200 |
| commit | cf026ee0306eee2a9d6c3afe3fde0735565b383c (patch) | |
| tree | 256c461cbb139d8d21061b4bd4632458d1c097f1 /desktop | |
| parent | e7a354653785e857e42b8c635780b817500e5281 (diff) | |
| download | mullvadvpn-cf026ee0306eee2a9d6c3afe3fde0735565b383c.tar.xz mullvadvpn-cf026ee0306eee2a9d6c3afe3fde0735565b383c.zip | |
Update Link default color to chalk
Diffstat (limited to 'desktop')
4 files changed, 8 insertions, 12 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx index 204da6fabc..837b0701cf 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx @@ -32,11 +32,7 @@ const formatSubtitle = (subtitle: InAppNotificationSubtitle) => { ); case 'run-function': return ( - <StyledLink - forwardedAs="button" - color="white" - variant="labelTiny" - {...subtitle.action.button}> + <StyledLink forwardedAs="button" variant="labelTiny" {...subtitle.action.button}> <StyledLink.Text>{content}</StyledLink.Text> </StyledLink> ); 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 ac064773f2..747eff06ed 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 @@ -53,7 +53,7 @@ const StyledLink = styled.a<{ }); function Link<T extends React.ElementType = 'a'>({ - color, + color = 'chalk', variant, children, ...props diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkIcon.tsx index 3a82f11a4d..6b4ac8f4f0 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkIcon.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/components/LinkIcon.tsx @@ -11,5 +11,5 @@ export const StyledIcon = styled(Icon)` `; export function LinkIcon({ ...props }: LinkIconProps) { - return <StyledIcon size="small" {...props} />; + return <StyledIcon size="small" color="chalk" {...props} />; } 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 index 5dcd689bf0..b1a7426e14 100644 --- 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 @@ -1,14 +1,14 @@ import { Colors } from '../../../foundations'; const colorMap: Record< - Extract<Colors, 'white' | 'whiteAlpha60'>, + Extract<Colors, 'chalk'> | 'default', { hover: Colors; active: Colors; } > = { - whiteAlpha60: { hover: 'chalk', active: 'white' }, - white: { hover: 'chalk', active: 'whiteAlpha60' }, + chalk: { hover: 'whiteAlpha60', active: 'whiteAlpha20' }, + default: { hover: 'whiteAlpha60', active: 'whiteAlpha20' }, } as const; export const useStateColors = ( @@ -17,8 +17,8 @@ export const useStateColors = ( hover: Colors; active: Colors; } => { - if (color === 'white' || color === 'whiteAlpha60') { + if (color === 'chalk') { return colorMap[color]; } - return colorMap.white; + return colorMap.default; }; |