Merge pull request #1404 from hackforla/1401-fe-update-color-of-repor…

…ts-dropdown

1401 fe update color of reports dropdown

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 => ({
@@ -37,10 +37,13 @@ const useStyles = makeStyles(theme => ({
     fontWeight: theme.typography.fontWeightBold,
     flexGrow: 1,
   },
+  menuPaper: {
+    backgroundColor: colors.textPrimaryDark,
+  },
 }));
 
 const activeStyle = {
-  borderBottom: '1px solid yellow',
+  borderBottom: `1px solid ${colors.primaryFocus}`,
 };
 
 // TODO: links/routing, mobile
@@ -83,6 +86,7 @@ const Header = () => {
             vertical: 'bottom',
             horizontal: 'left',
           }}
+          classes={{ paper: classes.menuPaper }}
         >
           <Link to="/reports/overview-combined">
             <MenuItem onClick={handleClose}>