Fixed issues from pull request

frontend/src/components/Header.js

@@ -5,8 +5,6 @@ import {Link} from 'react-router-dom';
 
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-
-
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import Button from '@material-ui/core/Button';
@@ -15,13 +13,14 @@ import PolymerIcon from '@material-ui/icons/Polymer';
 import AppsIcon from '@material-ui/icons/Apps';
 import DescriptionIcon from '@material-ui/icons/Description';
 import Grid from '@material-ui/core/Grid';
+import { useTheme } from '@material-ui/core/styles';
 
 const hoverColor = "#f85a3e"
 const hoverOutColor = "#e8eaf6"
 
 const Header = props => {
-
-  const { globalUrl, isLoggedIn, removeCookie, homePage, isLoaded } = props;
+  const { globalUrl, isLoggedIn, removeCookie, homePage, isLoaded, userdata } = props;
+	const theme = useTheme();
 
 	const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
 	const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
@@ -206,14 +205,14 @@ const Header = props => {
 								}}
 								value={userdata.selected_org}
 								fullWidth
-								style={{backgroundColor: surfaceColor, color: "white", height: "50px"}}
+								style={{backgroundColor: theme.palette.surfaceColor, color: "white", height: "50px"}}
 								onChange={(e) => {
 									console.log("SET ORG TO ", e.target.value)
 								}}
 								>
 								{userdata.orgs.map(data => {
 									return (
-										<MenuItem key={data.id} style={{backgroundColor: inputColor, color: "white"}} value={data}>
+										<MenuItem key={data.id} style={{backgroundColor: theme.palette.inputColor, color: "white"}} value={data}>
 											{data.name}
 										</MenuItem>
 									)