theme change is now in user settings

src/common/ResponsiveTable.tsx

@@ -52,10 +52,10 @@ const useStyles = makeStyles((theme: Theme) => {
     },
     rowHover: {
       cursor: "pointer",
-      // "&:hover": {
-      //   backgroundColor: !isMobile && "rgba(150, 150, 150, 0.15)",
-      // }
-    }
+      "&:hover": {
+        backgroundColor: "rgba(150, 150, 150, 0.15)",
+      }
+    },
   })},
 );
 
@@ -314,7 +314,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
       </Box>
       {rows.map((row, index) => {
         return (
-          <Card className={classNames(classes.card, onRowClick&&classes.rowHover)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
+          <Card className={classNames(classes.card)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
             {renderMobileRow(row)}
             {renderGutter &&
               <>

src/user/UserMenu.tsx

@@ -226,12 +226,12 @@ export default function UserMenu() {
           </ListItemIcon>
           <ListItemText primary="User Settings" />
         </MenuItem>
-        <MenuItem onClick={toggleMode} aria-label="Toggle Theme" dense>
+        {/* <MenuItem onClick={toggleMode} aria-label="Toggle Theme" dense>
           <ListItemIcon>
             <ThemeIcon />
           </ListItemIcon>
           <ListItemText primary="Toggle Theme" />
-        </MenuItem>
+        </MenuItem> */}
         {hasTeams && (
           <MenuItem onClick={openTeamDialog} aria-label="Open Team Menu" dense>
             <ListItemIcon>

src/user/UserSettings.tsx

@@ -8,8 +8,9 @@ import {
   Notifications as NotificationsIcon, 
   Email as EmailIcon,
   Textsms as TextIcon,
+  Contrast,
 } from "@mui/icons-material";
-import { AppBar, Box, Button, Checkbox, CircularProgress, Collapse, Divider, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Radio, RadioGroup, TextField, Theme, Toolbar, Tooltip, Typography } from "@mui/material";
+import { AppBar, Box, Button, Checkbox, CircularProgress, Collapse, Divider, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Radio, RadioGroup, TextField, Theme, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography } from "@mui/material";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import UserAvatar from "./UserAvatar";
 import { useGlobalState, useUserAPI } from "providers";
@@ -24,6 +25,8 @@ import {Option as OptionType} from "common/SearchSelect";
 import moment from "moment";
 import { IconPicker } from "common/IconPicker";
 import { MuiTelInput } from "mui-tel-input";
+import { useThemeMode } from "theme/AppThemeProvider";
+import ContractsIcon from "products/CommonIcons/contractIcon";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -61,6 +64,7 @@ interface Props {
 }
 
 export default function UserSettings(props: Props) {
+  const themeMode = useThemeMode()
   const { isOpen, closeDialogCallback } = props;
   const [globalState, dispatch] = useGlobalState()
   const [sharing, setSharing] = useState(false)
@@ -73,6 +77,7 @@ export default function UserSettings(props: Props) {
   const [avatarExpanded, setAvatarExpanded] = useState<boolean>(false);
   const [notificationsExpanded, setNotificationsExpanded] = useState<boolean>(false);
   const [avatarUrl, setAvatarUrl] = useState<string>("");
+  const [themeValue, setThemeValue] = useState<"light" | "dark" | "system">(themeMode.mode)
 
   useEffect(() => {
     function changeIcon(icon: string | undefined) {
@@ -350,9 +355,46 @@ export default function UserSettings(props: Props) {
     return <IconPicker url={user.settings.avatar} setUrl={setAvatarUrl} id={user.settings.id} />;
   };
 
+  const handleChange = (event: React.MouseEvent<HTMLElement>, nextView: "light" | "dark" | "system") => {
+    event.preventDefault()
+    themeMode.setMode(nextView)
+  };
+
+  const themeToggle = () => {
+    return (
+      <ToggleButtonGroup
+        value={themeMode.mode}
+        exclusive
+        onChange={handleChange}
+        size="small"
+        sx={{margin:-1}}
+      >
+        <ToggleButton value="light">
+          light
+        </ToggleButton>
+        <ToggleButton value="system">
+          system
+        </ToggleButton>
+        <ToggleButton value="dark">
+          dark
+        </ToggleButton>
+      </ToggleButtonGroup>
+    )
+  }
+
   const settingsList = () => {
     return (
       <List disablePadding>
+        <ListItem >
+          <ListItemIcon>
+            <Contrast />
+          </ListItemIcon>
+          <ListItemText primary={"Theme"} />
+          {themeToggle()}
+        </ListItem>
+
+        <Divider />
+
         <ListItemButton onClick={() => setProfileExpanded(!profileExpanded)}>
           <ListItemIcon>
             <AccountBox />