Use ExternalLink icon in NotificationSubtitle

1 files changed, 6 insertions, 7 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
index fc5a4600d1..68d2572a62 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { InAppNotificationSubtitle } from '../../shared/notifications';
-import { Icon, LabelTiny } from '../lib/components';
+import { LabelTiny } from '../lib/components';
 import { Colors } from '../lib/foundations';
 import { formatHtml } from '../lib/html-formatter';
 import { ExternalLink } from './ExternalLink';
@@ -12,9 +12,8 @@ export type NotificationSubtitleProps = {
   subtitle?: string | InAppNotificationSubtitle[];
 };
 
-const StyledIcon = styled(Icon)`
-  display: inline-flex;
-  vertical-align: middle;
+const StyledExternalLink = styled(ExternalLink)`
+  display: flex;
 `;
 
 const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
@@ -29,10 +28,10 @@ const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
         );
       case 'navigate-external':
         return (
-          <ExternalLink variant="labelTiny" {...subtitle.action.link}>
+          <StyledExternalLink variant="labelTiny" {...subtitle.action.link}>
             {content}
-            <StyledIcon icon="external" size="small" />
-          </ExternalLink>
+            <ExternalLink.Icon icon="external" size="small" />
+          </StyledExternalLink>
         );
       default:
         break;