Add hover effect on navigation bar close and back buttons

3 files changed, 20 insertions, 6 deletions

diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 2d09759be3..9569dd187e 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -96,8 +96,8 @@ export function HeaderBarSettingsButton() {
         height={24}
         width={24}
         source="icon-settings"
-        tintColor={'rgba(255, 255, 255, 0.8)'}
-        tintHoverColor={'rgba(255, 255, 255, 1.0)'}
+        tintColor={colors.white80}
+        tintHoverColor={colors.white}
       />
     </HeaderBarSettingsButtonContainer>
   );
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index 922c7c3c7e..7d6e5a0714 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
+import { colors } from '../../config.json';
 import CustomScrollbars, { IScrollEvent } from './CustomScrollbars';
 import {
   StyledBackBarItemButton,
@@ -231,7 +232,16 @@ export function CloseBarItem(props: ICloseBarItemProps) {
   // Use the arrow down icon on Linux, to avoid confusion with the close button in the window
   // title bar.
   const iconName = process.platform === 'linux' ? 'icon-close-down' : 'icon-close';
-  return <StyledCloseBarItemIcon height={24} width={24} source={iconName} onClick={props.action} />;
+  return (
+    <StyledCloseBarItemIcon
+      height={24}
+      width={24}
+      source={iconName}
+      onClick={props.action}
+      tintColor={colors.white60}
+      tintHoverColor={colors.white80}
+    />
+  );
 }
 
 interface IBackBarItemProps {
@@ -242,7 +252,7 @@ interface IBackBarItemProps {
 export function BackBarItem(props: IBackBarItemProps) {
   return (
     <StyledBackBarItemButton onClick={props.action}>
-      <StyledBackBarItemIcon source="icon-back" />
+      <StyledBackBarItemIcon source="icon-back" tintColor={colors.white60} />
       <StyledBackBarItemLabel>{props.children}</StyledBackBarItemLabel>
     </StyledBackBarItemButton>
   );
diff --git a/gui/src/renderer/components/NavigationBarStyles.tsx b/gui/src/renderer/components/NavigationBarStyles.tsx
index e19f672e74..21cea31060 100644
--- a/gui/src/renderer/components/NavigationBarStyles.tsx
+++ b/gui/src/renderer/components/NavigationBarStyles.tsx
@@ -66,7 +66,6 @@ export const StyledTitleBarItemMeasuringLabel = styled(StyledTitleBarItemLabel)(
 
 export const StyledCloseBarItemIcon = styled(ImageView)({
   flex: 0,
-  opacity: 0.6,
 });
 
 export const StyledBackBarItemButton = styled.button({
@@ -83,8 +82,10 @@ export const StyledBackBarItemButton = styled.button({
 });
 
 export const StyledBackBarItemIcon = styled(ImageView)({
-  opacity: 0.6,
   marginRight: '8px',
+  [StyledBackBarItemButton + ':hover &']: {
+    backgroundColor: colors.white80,
+  },
 });
 
 export const StyledBackBarItemLabel = styled.span({
@@ -93,4 +94,7 @@ export const StyledBackBarItemLabel = styled.span({
   fontWeight: 600,
   color: colors.white60,
   whiteSpace: 'nowrap',
+  [StyledBackBarItemButton + ':hover &']: {
+    color: colors.white80,
+  },
 });