diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2023-10-27 15:48:32 +0200 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2023-10-27 15:48:32 +0200 |
| commit | 6dfbe525f746d687dee6406c617d2ea18e23e49f (patch) | |
| tree | 0c8f56f82139b1f1ee08673250f2dc48231bf81e | |
| parent | 7e9bb04524cfc2520a56295e985a58a6542cabca (diff) | |
| download | mullvadvpn-6dfbe525f746d687dee6406c617d2ea18e23e49f.tar.xz mullvadvpn-6dfbe525f746d687dee6406c617d2ea18e23e49f.zip | |
Increase hitarea of settings and account icons in headerbar
| -rw-r--r-- | gui/src/renderer/components/HeaderBar.tsx | 18 |
1 files changed, 12 insertions, 6 deletions
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx index 3577161261..a5c3969f08 100644 --- a/gui/src/renderer/components/HeaderBar.tsx +++ b/gui/src/renderer/components/HeaderBar.tsx @@ -35,7 +35,7 @@ interface IHeaderBarContainerProps { } const HeaderBarContainer = styled.header({}, (props: IHeaderBarContainerProps) => ({ - padding: '15px 16px 0px', + padding: '15px 11px 0px 16px', minHeight: props.accountInfoVisible ? '80px' : '68px', height: props.accountInfoVisible ? '80px' : '68px', backgroundColor: headerBarStyleColorMap[props.barStyle ?? HeaderBarStyle.default], @@ -151,16 +151,22 @@ function HeaderBarDeviceInfo() { const HeaderBarSettingsButtonContainer = styled.button({ cursor: 'default', - padding: 0, - marginLeft: 8, + padding: '5px', + marginLeft: '3px', backgroundColor: 'transparent', border: 'none', }); const HeaderBarAccountButtonContainer = styled(HeaderBarSettingsButtonContainer)({ - marginRight: '16px', + marginRight: '11px', }); +const StyledHeaderBarImageView = styled(ImageView)((props) => ({ + [`${HeaderBarSettingsButtonContainer}:hover &&`]: { + backgroundColor: props.tintHoverColor, + }, +})); + interface IHeaderBarSettingsButtonProps { disabled?: boolean; } @@ -178,7 +184,7 @@ export function HeaderBarSettingsButton(props: IHeaderBarSettingsButtonProps) { <HeaderBarSettingsButtonContainer onClick={openSettings} aria-label={messages.gettext('Settings')}> - <ImageView + <StyledHeaderBarImageView height={24} width={24} source="icon-settings" @@ -201,7 +207,7 @@ export function HeaderBarAccountButton() { onClick={openAccount} data-testid="account-button" aria-label={messages.gettext('Account settings')}> - <ImageView + <StyledHeaderBarImageView height={24} width={24} source="icon-account" |