From b8f2142c90024b6d38551a185f6de5d23d4c51ac Mon Sep 17 00:00:00 2001
From: jekijo <123jkjones@gmail.com>
Date: Thu, 13 Oct 2022 12:07:54 -0700
Subject: [PATCH 1/3] updated yellow underline

---
 client/components/Header.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/Header.jsx b/client/components/Header.jsx
index 743f8c059..eee60e1f7 100644
--- a/client/components/Header.jsx
+++ b/client/components/Header.jsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const activeStyle = {
-  borderBottom: '1px solid yellow',
+  borderBottom: '1px solid #FFB100',
 };
 
 // TODO: links/routing, mobile

From 1c31c64fc8c98e9afb63adc9fd251471aa78029c Mon Sep 17 00:00:00 2001
From: jekijo <123jkjones@gmail.com>
Date: Thu, 13 Oct 2022 12:46:53 -0700
Subject: [PATCH 2/3] updated reports dropdown color

---
 client/components/Header.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/components/Header.jsx b/client/components/Header.jsx
index eee60e1f7..07156b73a 100644
--- a/client/components/Header.jsx
+++ b/client/components/Header.jsx
@@ -34,6 +34,9 @@ const useStyles = makeStyles(theme => ({
     fontWeight: 'bold',
     letterSpacing: '4px',
   },
+  menuPaper: {
+    backgroundColor: '#0F181F',
+  },
 }));
 
 const activeStyle = {
@@ -80,6 +83,7 @@ const Header = () => {
             vertical: 'bottom',
             horizontal: 'left',
           }}
+          classes={{ paper: classes.menuPaper }}
         >
           <Link to="/reports/dashboards/overview_combined" className={classes.link}>
             <MenuItem onClick={handleClose} button className={classes.button}>

From bc97f498710115eddb26ff6894c7a43adeaf0e54 Mon Sep 17 00:00:00 2001
From: Edwin J <hungrylulu8@gmail.com>
Date: Mon, 17 Oct 2022 12:48:14 -0700
Subject: [PATCH 3/3] replaced harcoded hex color values with constants defined
 in @theme/colors

---
 client/components/Header.jsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/components/Header.jsx b/client/components/Header.jsx
index 35be9f564..5336b1205 100644
--- a/client/components/Header.jsx
+++ b/client/components/Header.jsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { NavLink, Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import {
-  AppBar,
-  Button,
-  Toolbar,
-  Typography,
-  Menu,
-  MenuItem,
-} from '@material-ui/core';
+import AppBar from '@material-ui/core/AppBar';
+import Button from '@material-ui/core/Button';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
 import fonts from '@theme/fonts';
+import colors from '@theme/colors';
 
 // Header should make use of style overrides to look the same regardless of light/dark theme.
 const useStyles = makeStyles(theme => ({
@@ -38,12 +38,12 @@ const useStyles = makeStyles(theme => ({
     flexGrow: 1,
   },
   menuPaper: {
-    backgroundColor: '#0F181F',
+    backgroundColor: colors.textPrimaryDark,
   },
 }));
 
 const activeStyle = {
-  borderBottom: '1px solid #FFB100',
+  borderBottom: `1px solid ${colors.primaryFocus}`,
 };
 
 // TODO: links/routing, mobile