Add upgrade indicator to main menu setting button

1 files changed, 22 insertions, 1 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx
index 755350f18d..a174d58797 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx
@@ -1,14 +1,28 @@
 import { useCallback } from 'react';
+import styled from 'styled-components';
 
 import { messages } from '../../../../shared/gettext';
 import { IconButton, IconButtonProps, MainHeader } from '../../../lib/components';
+import { Dot } from '../../../lib/components/dot';
 import { TransitionType, useHistory } from '../../../lib/history';
 import { RoutePath } from '../../../lib/routes';
+import { useSelector } from '../../../redux/store';
 
 export type MainHeaderSettingsButtonProps = Omit<IconButtonProps, 'icon'>;
 
+const StyledDot = styled(Dot)`
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+
+const StyledDiv = styled.div`
+  position: relative;
+`;
+
 export function AppMainHeaderSettingsButton(props: MainHeaderSettingsButtonProps) {
   const history = useHistory();
+  const suggestedUpgrade = useSelector((state) => state.version.suggestedUpgrade);
 
   const openSettings = useCallback(() => {
     if (!props.disabled) {
@@ -18,7 +32,14 @@ export function AppMainHeaderSettingsButton(props: MainHeaderSettingsButtonProps
 
   return (
     <MainHeader.IconButton onClick={openSettings} aria-label={messages.gettext('Settings')}>
-      <IconButton.Icon icon="settings-filled" />{' '}
+      {suggestedUpgrade ? (
+        <StyledDiv>
+          <IconButton.Icon icon="settings-partial" />
+          <StyledDot variant="warning" size="tiny" />
+        </StyledDiv>
+      ) : (
+        <IconButton.Icon icon="settings-filled" />
+      )}
     </MainHeader.IconButton>
   );
 }