Fixed code that didn't meet the eslint rule.

ui/src/AppMenu.tsx

@@ -15,8 +15,10 @@ import React from "react";
 import { LoginState } from "./App";
 import Box from "@mui/material/Box";
 import { CurrentMode, useThemeMode } from "./components/ThemeMode";
-import { Brightness2, Brightness7, BrightnessAuto } from "@mui/icons-material";
-import { Tooltip } from "@mui/material";
+import Brightness2 from "@mui/icons-material/Brightness2";
+import Brightness7 from "@mui/icons-material/Brightness7";
+import BrightnessAuto from "@mui/icons-material/BrightnessAuto";
+import Tooltip from "@mui/material/Tooltip";
 
 interface Props {
   loginState: LoginState;

ui/src/List/DisplaySelector.tsx

@@ -9,7 +9,7 @@ import FormControl from "@mui/material/FormControl";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import { CardContent } from "@mui/material";
+import CardContent from "@mui/material/CardContent/CardContent";
 
 interface Props {
   split90k?: number;

ui/src/List/StreamMultiSelector.tsx

@@ -7,7 +7,7 @@ import Card from "@mui/material/Card";
 import { Camera, Stream, StreamType } from "../types";
 import Checkbox from "@mui/material/Checkbox";
 import { ToplevelResponse } from "../api";
-import { CardContent } from "@mui/material";
+import CardContent from "@mui/material/CardContent/CardContent";
 
 interface Props {
   toplevel: ToplevelResponse;

ui/src/List/TimerangeSelector.tsx

@@ -67,7 +67,7 @@ import RadioGroup from "@mui/material/RadioGroup";
 import { TimePicker, TimePickerProps } from "@mui/x-date-pickers/TimePicker";
 import Collapse from "@mui/material/Collapse";
 import Box from "@mui/material/Box";
-import { CardContent } from "@mui/material";
+import CardContent from "@mui/material/CardContent/CardContent";
 
 interface Props {
   selectedStreams: Set<Stream>;

ui/src/Live/Multiview.tsx

@@ -8,8 +8,9 @@ import MenuItem from "@mui/material/MenuItem";
 import React, { useCallback, useEffect, useReducer } from "react";
 import { Camera } from "../types";
 import { useSearchParams } from "react-router-dom";
-import { IconButton, Tooltip } from "@mui/material";
-import { Fullscreen } from "@mui/icons-material";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import Fullscreen from "@mui/icons-material/Fullscreen";
 
 export interface Layout {
   className: string;

ui/src/Login.tsx

@@ -11,8 +11,12 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import React, { useEffect } from "react";
 import * as api from "./api";
 import { useSnackbars } from "./snackbars";
-import { Box, DialogContent, InputAdornment, Typography } from "@mui/material";
-import { AccountCircle, Lock } from "@mui/icons-material";
+import Box from "@mui/material/Box/Box";
+import DialogContent from "@mui/material/DialogContent/DialogContent";
+import InputAdornment from "@mui/material/InputAdornment/InputAdornment";
+import Typography from "@mui/material/Typography/Typography";
+import AccountCircle from "@mui/icons-material/AccountCircle";
+import Lock from "@mui/icons-material/Lock";
 
 interface Props {
   open: boolean;

ui/src/components/Header.tsx

@@ -2,7 +2,12 @@
 // Copyright (C) 2021 The Moonfire NVR Authors; see AUTHORS and LICENSE.txt.
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
-import { AppBar, Drawer, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import AppBar from "@mui/material/AppBar";
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
 import ListIcon from "@mui/icons-material/List";
 import PeopleIcon from "@mui/icons-material/People";
 import Videocam from "@mui/icons-material/Videocam";

ui/src/components/ThemeMode.tsx

@@ -2,8 +2,9 @@
 // Copyright (C) 2021 The Moonfire NVR Authors; see AUTHORS and LICENSE.txt.
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
-import { useColorScheme } from "@mui/material";
-import React, { createContext, useCallback } from "react";
+/* eslint-disable no-unused-vars */
+import { useColorScheme } from "@mui/material/styles";
+import React, { createContext } from "react";
 
 export enum CurrentMode {
   Auto = 0,
@@ -26,7 +27,7 @@ export const ThemeContext = createContext<ThemeProps>({
 const ThemeMode = ({ children }: { children: JSX.Element }): JSX.Element => {
   const { mode, setMode } = useColorScheme();
 
-  const useMediaQuery = useCallback((query: string) => {
+  const useMediaQuery = (query: string) => {
     const [matches, setMatches] = React.useState(
       () => window.matchMedia(query).matches
     );
@@ -37,13 +38,13 @@ const ThemeMode = ({ children }: { children: JSX.Element }): JSX.Element => {
       return () => m.removeEventListener("change", l);
     }, [query]);
     return matches;
-  }, []);
+  };
 
   const detectedSystemColorScheme = useMediaQuery("(prefers-color-scheme: dark)") ? "dark" : "light";
 
   const changeTheme = React.useCallback(() => {
     setMode(mode === 'dark' ? 'light' : mode === 'light' ? 'system' : 'dark')
-  }, [mode]);
+  }, [mode, setMode]);
 
   const currentTheme = mode === 'system' ? detectedSystemColorScheme : (mode ?? detectedSystemColorScheme);
   const choosenTheme = mode === 'dark' ? CurrentMode.Dark : mode === 'light' ? CurrentMode.Light : CurrentMode.Auto;