From 03e04e7c3140cec36a510efc8c8635b08c361da6 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Fri, 22 Apr 2022 12:12:06 +0200
Subject: [PATCH] refactor: unify header icons (#897)

* refactor: unify header icon colors

* refactor: add a chevron for the settings menu
---
 frontend/src/component/menu/Header/Header.styles.ts       | 8 +++++++-
 frontend/src/component/menu/Header/Header.tsx             | 8 ++++++--
 .../src/component/user/UserProfile/UserProfile.styles.ts  | 7 +++++--
 frontend/src/component/user/UserProfile/UserProfile.tsx   | 2 +-
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/menu/Header/Header.styles.ts b/frontend/src/component/menu/Header/Header.styles.ts
index f2cdd17ae3..4959b6453c 100644
--- a/frontend/src/component/menu/Header/Header.styles.ts
+++ b/frontend/src/component/menu/Header/Header.styles.ts
@@ -13,7 +13,7 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         justifyContent: 'center',
         marginLeft: '1.5rem',
-        ['& a']: {
+        '& a': {
             textDecoration: 'none',
             color: 'inherit',
             marginRight: '1.5rem',
@@ -81,4 +81,10 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         color: '#000',
     },
+    icon: {
+        color: theme.palette.grey[600],
+    },
+    wideButton: {
+        borderRadius: 100,
+    },
 }));
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index ecddde0b31..a185609005 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -109,7 +109,7 @@ const Header = () => {
                             onClick={e => setAnchorElAdvanced(e.currentTarget)}
                         >
                             Configure
-                            <KeyboardArrowDown />
+                            <KeyboardArrowDown className={styles.icon} />
                         </button>
                         <NavigationMenu
                             id="settings-navigation"
@@ -126,7 +126,7 @@ const Header = () => {
                                 target="_blank"
                                 rel="noopener noreferrer"
                             >
-                                <MenuBookIcon />
+                                <MenuBookIcon className={styles.icon} />
                             </IconButton>
                         </Tooltip>
                         <ConditionallyRender
@@ -137,8 +137,12 @@ const Header = () => {
                                         onClick={e =>
                                             setAnchorEl(e.currentTarget)
                                         }
+                                        className={styles.wideButton}
                                     >
                                         <SettingsIcon />
+                                        <KeyboardArrowDown
+                                            className={styles.icon}
+                                        />
                                     </IconButton>
                                 </Tooltip>
                             }
diff --git a/frontend/src/component/user/UserProfile/UserProfile.styles.ts b/frontend/src/component/user/UserProfile/UserProfile.styles.ts
index cb31099887..3bb8d8d7a8 100644
--- a/frontend/src/component/user/UserProfile/UserProfile.styles.ts
+++ b/frontend/src/component/user/UserProfile/UserProfile.styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles';
 
-export const useStyles = makeStyles({
+export const useStyles = makeStyles(theme => ({
     userProfileMenu: {
         display: 'flex',
     },
@@ -11,4 +11,7 @@ export const useStyles = makeStyles({
         color: 'inherit',
         padding: '0.2rem 1rem',
     },
-});
+    icon: {
+        color: theme.palette.grey[600],
+    },
+}));
diff --git a/frontend/src/component/user/UserProfile/UserProfile.tsx b/frontend/src/component/user/UserProfile/UserProfile.tsx
index 37df37f8ab..d801e85809 100644
--- a/frontend/src/component/user/UserProfile/UserProfile.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfile.tsx
@@ -74,7 +74,7 @@ const UserProfile = ({
                         src={imageUrl}
                         data-testid={HEADER_USER_AVATAR}
                     />
-                    <KeyboardArrowDownIcon />
+                    <KeyboardArrowDownIcon className={styles.icon} />
                 </Button>
                 <UserProfileContent
                     showProfile={showProfile}