updated navbar theme selection

frontend/src/components/GroupManagementPage/AutocompletedUserSelect.jsx

@@ -44,8 +44,6 @@ const AutocompletedUserSelect = ({
     return await autocomplete.findUsersByPartialName(inputValue)
   }
 
-  const isDark = muiTheme === 'dark'
-
   return (
     <AsyncSelect
       cacheOptions

frontend/src/components/common/NavigationBar.jsx

@@ -11,6 +11,8 @@ import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
 import AccountCircle from '@material-ui/icons/AccountCircle'
 import GroupIcon from '@material-ui/icons/Group'
+import Brightness4RoundedIcon from '@material-ui/icons/Brightness4Rounded';
+import Brightness7RoundedIcon from '@material-ui/icons/Brightness7Rounded';
 import NavigationMenu from './NavigationMenu'
 import {
   regularItems,
@@ -141,6 +143,20 @@ const NavigationBar = ({ group, user, loginUser, initializeMyGroup, fetchRegistr
     localStorage.setItem('theme', theme)
   }
 
+  const ThemeSelection = () => (
+    <Button
+      variant='outlined'
+      style={{ color: '#323232', marginLeft: '5px', borderColor: '#c2a628' }}
+      onClick={() => switchTheme(theme === 'dark' ? 'light' : 'dark')}
+    >
+      {theme === 'dark'
+        ? <Brightness7RoundedIcon />
+        : <Brightness4RoundedIcon />
+      }
+      Theme
+    </Button>
+  )
+
   return (
     <div className="navigation-bar-container">
       <AppBar position="static">
@@ -156,18 +172,7 @@ const NavigationBar = ({ group, user, loginUser, initializeMyGroup, fetchRegistr
           </Typography>
           {select_role}
           {loggedIn}
-          <label htmlFor="theme-switch">
-            theme
-            <select
-              id="theme-switch"
-              value={theme}
-              onChange={e => switchTheme(e.target.value)}
-            >
-              <option value="device"> device </option>
-              <option value="light"> light </option>
-              <option value="dark"> dark </option>
-            </select>
-          </label>
+          <ThemeSelection />
           <Button
             className="navigation-bar-logout-button"
             style={{ marginLeft: '10px', color: '#323232', borderColor: '#c2a628' }}

frontend/src/context/ColorModeContext.js

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
 export const ColorModeContext = createContext({
-  mode: 'device',
+  mode: 'light',
   setMode: () => {}
 })

frontend/src/index.jsx

@@ -7,31 +7,26 @@ import store from './reducers/store'
 import { MuiThemeProvider, createTheme } from '@material-ui/core/styles'
 import amber from '@material-ui/core/colors/amber'
 import CssBaseline from '@material-ui/core/CssBaseline'
-import useMediaQuery from '@material-ui/core/useMediaQuery'
 import { ColorModeContext } from './context/ColorModeContext'
-import CustomerReviewPage from './components/CustomerReviewPage'
 
 const getInitialMode = () => {
   const stored = localStorage.getItem('theme')
-  return stored ? stored : 'device'
+  return stored ? stored : 'light'
 }
 
 const Root = () => {
-  const themePreference = useMediaQuery('(prefers-color-scheme: dark)')
   const [themeMode, setThemeMode] = useState(getInitialMode)
-
-  const effectiveDark =
-    themeMode === 'device' ? themePreference : themeMode === 'dark'
+  const isDark =themeMode === 'dark'
 
   const theme = createTheme({
     palette: {
-      type: effectiveDark ? 'dark' : 'light',
+      type: isDark ? 'dark' : 'light',
       primary: {
         main: '#fdd835',
       },
       secondary: amber,
       text: {
-        primary: effectiveDark ? '#ffffff' : '#4d4d4d',
+        primary: isDark ? '#ffffff' : '#4d4d4d',
       },
     },
     typography: {
@@ -60,32 +55,32 @@ const Root = () => {
     },
     custom: {
       chartTooltip: {
-        background: effectiveDark ? '#202020' : '#ffffff',
-        border: effectiveDark ? '#73292c' : '#d88488',
-        shadow: effectiveDark
+        background: isDark ? '#202020' : '#ffffff',
+        border: isDark ? '#73292c' : '#d88488',
+        shadow: isDark
           ? '1px 1px 2px #73292c'
           : '1px 1px 2px #d88488',
       },
       chartAxis: {
-        stroke: effectiveDark ? '#ffffff' : '#4d4d4d',
+        stroke: isDark ? '#ffffff' : '#4d4d4d',
       },
     },
     overrides: {
       MuiTableCell: {
         head: {
-          backgroundColor: effectiveDark
+          backgroundColor: isDark
             ? 'rgba(255,255,255,0.12)'
             : 'rgba(0,0,0,0.02)',
         },
         body: {
-          backgroundColor: effectiveDark
+          backgroundColor: isDark
             ? 'rgba(255,255,255,0.03)'
             : 'rgba(0,0,0,0.01)',
         },
       },
       MuiTableRow: {
         '&:hover': {
-          backgroundColor: effectiveDark
+          backgroundColor: isDark
             ? 'rgba(255,255,255,0.08)'
             : 'rgba(0,0,0,0.04)',
         },