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

@@ -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,
+    },
 }));

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>
                             }

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],
+    },
+}));

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}