Use LinkText in external and internal links

4 files changed, 24 insertions, 25 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
index 0acba13623..4f160ad64d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
@@ -1,19 +1,13 @@
 import { useCallback } from 'react';
-import styled from 'styled-components';
 
 import { Url } from '../../shared/constants';
 import { useAppContext } from '../context';
 import { Link, LinkProps } from '../lib/components';
 
-export type ExternalLinkProps = Omit<LinkProps<'a'>, 'href' | 'as'> & {
+export type ExternalLinkProps = Omit<LinkProps, 'href' | 'as'> & {
   to: Url;
 };
 
-const StyledLink = styled(Link)`
-  display: inline-flex;
-  width: fit-content;
-`;
-
 function ExternalLink({ to, onClick, ...props }: ExternalLinkProps) {
   const { openUrl } = useAppContext();
   const navigate = useCallback(
@@ -26,10 +20,11 @@ function ExternalLink({ to, onClick, ...props }: ExternalLinkProps) {
     },
     [onClick, openUrl, to],
   );
-  return <StyledLink href="" onClick={navigate} {...props} />;
+  return <Link href="" onClick={navigate} {...props} />;
 }
 
 const ExternalLinkNamespace = Object.assign(ExternalLink, {
+  Text: Link.Text,
   Icon: Link.Icon,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx
index 70f8b7c496..ba6b32280e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/InternalLink.tsx
@@ -4,11 +4,11 @@ import { Link, LinkProps } from '../lib/components';
 import { useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 
-export type InternalLinkProps = Omit<LinkProps<'a'>, 'href' | 'as'> & {
+export type InternalLinkProps = Omit<LinkProps, 'href' | 'as'> & {
   to: RoutePath;
 };
 
-export function InternalLink({ to, onClick, ...props }: InternalLinkProps) {
+function InternalLink({ to, onClick, ...props }: InternalLinkProps) {
   const history = useHistory();
   const navigate = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement>) => {
@@ -22,3 +22,10 @@ export function InternalLink({ to, onClick, ...props }: InternalLinkProps) {
   );
   return <Link href="" onClick={navigate} {...props} />;
 }
+
+const InternalLinkNamespace = Object.assign(InternalLink, {
+  Text: Link.Text,
+  Icon: Link.Icon,
+});
+
+export { InternalLinkNamespace as InternalLink };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
index 0a43452513..71045a2bfd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 
 import { InAppNotificationSubtitle } from '../../shared/notifications';
 import { LabelTiny } from '../lib/components';
@@ -11,10 +10,6 @@ export type NotificationSubtitleProps = {
   subtitle?: string | InAppNotificationSubtitle[];
 };
 
-const StyledExternalLink = styled(ExternalLink)`
-  display: flex;
-`;
-
 const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
   const content = formatHtml(subtitle.content);
   if (subtitle.action) {
@@ -22,15 +17,15 @@ const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
       case 'navigate-internal':
         return (
           <InternalLink variant="labelTiny" {...subtitle.action.link}>
-            {content}
+            <InternalLink.Text>{content}</InternalLink.Text>
           </InternalLink>
         );
       case 'navigate-external':
         return (
-          <StyledExternalLink variant="labelTiny" {...subtitle.action.link}>
-            {content}
-            <ExternalLink.Icon icon="external" size="small" />
-          </StyledExternalLink>
+          <ExternalLink variant="labelTiny" {...subtitle.action.link}>
+            <ExternalLink.Text>{content}</ExternalLink.Text>
+            <ExternalLink.Icon icon="external" />
+          </ExternalLink>
         );
       default:
         break;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
index 3de932bc86..9e3acf985e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -758,11 +758,13 @@ function TunnelProtocolSetting() {
             </Cell.CellFooterText>
           </AriaDescription>
           <ExternalLink variant="labelTiny" to={urls.removingOpenVpnBlog}>
-            {sprintf(
-              // TRANSLATORS: Link in tunnel protocol selector footer to blog post
-              // TRANSLATORS: about OpenVPN support ending.
-              messages.pgettext('vpn-settings-view', 'Read more'),
-            )}
+            <ExternalLink.Text>
+              {sprintf(
+                // TRANSLATORS: Link in tunnel protocol selector footer to blog post
+                // TRANSLATORS: about OpenVPN support ending.
+                messages.pgettext('vpn-settings-view', 'Read more'),
+              )}
+            </ExternalLink.Text>
             <ExternalLink.Icon icon="external" size="small" />
           </ExternalLink>
         </Cell.CellFooter>