diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx | 23 |
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> ); } |