diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx | 13 |
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; |