Update to mui v5

src/components/App.js

@@ -10,12 +10,13 @@ import throttle from "lodash/throttle";
 import type { Config, Control, Topics } from "config/flowtypes";
 
 import {
-  MuiThemeProvider, createMuiTheme, withStyles
-} from "@material-ui/core/styles";
-import * as Colors from "@material-ui/core/colors";
-import Snackbar from "@material-ui/core/Snackbar";
-import IconButton from "@material-ui/core/IconButton";
-import Typography from "@material-ui/core/Typography";
+  ThemeProvider, withStyles
+} from "@mui/styles";
+import { createTheme } from "@mui/material/styles";
+import * as Colors from "@mui/material/colors";
+import Snackbar from "@mui/material/Snackbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
 
 import SideBar from "components/SideBar";
 import ControlMap from "components/ControlMap";
@@ -103,14 +104,6 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
     };
   }
 
-  static theme(config: Config) {
-    return createMuiTheme({
-      palette: {
-        primary: Colors[config.space.color]
-      }
-    });
-  }
-
   receiveMessage(rawTopic: string, message: Buffer) {
     try {
       const topics = filter(
@@ -213,11 +206,18 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
   }
 }
 
+const generateTheme = (config: Config) =>
+  createTheme({
+    palette: {
+      primary: Colors[config.space.color]
+    }
+  });
+
 export default (props: AppProps) => {
   const StyledApp = withStyles(App.styles)(App);
   return (
-    <MuiThemeProvider theme={App.theme(props.config)}>
+    <ThemeProvider theme={generateTheme(props.config)}>
       <StyledApp {...props} />
-    </MuiThemeProvider>
+    </ThemeProvider>
   );
 };

src/components/SideBar.js

@@ -1,13 +1,13 @@
 // @flow
 import * as React from "react";
 
-import { makeStyles } from "@material-ui/core/styles";
-import Drawer from "@material-ui/core/Drawer";
-import Typography from "@material-ui/core/Typography";
-import IconButton from "@material-ui/core/IconButton";
-import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
-import List from "@material-ui/core/List";
+import { makeStyles } from "@mui/styles";
+import Drawer from "@mui/material/Drawer";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import List from "@mui/material/List";
 import ReactIcon from "@mdi/react";
 import { mdiClose } from "@mdi/js";
 

src/components/TopBar.js

@@ -1,14 +1,14 @@
 // @flow
 import React from "react";
 
-import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import InputBase from "@material-ui/core/InputBase";
-import { fade } from "@material-ui/core/styles/colorManipulator";
-import { makeStyles } from "@material-ui/core/styles";
-import Tooltip from "@material-ui/core/Tooltip";
-import IconButton from "@material-ui/core/IconButton";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import CircularProgress from "@mui/material/CircularProgress";
+import InputBase from "@mui/material/InputBase";
+import { styled } from "@mui/styles";
+import { alpha } from "@mui/material/styles";
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
 import ReactIcon from "@mdi/react";
 import { mdiMap, mdiGithub, mdiMagnify } from "@mdi/js";
 
@@ -30,74 +30,63 @@ const renderConnectionIndicator = (connected: boolean) => {
   );
 };
 
-const useSearchStyles = makeStyles((theme) => ({
-  search: {
-    position: "relative",
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
-    "&:hover": {
-      backgroundColor: fade(theme.palette.common.white, 0.25)
-    },
-    marginRight: theme.spacing(2),
-    marginLeft: 0,
-    width: "100%",
-    [theme.breakpoints.up("sm")]: {
-      marginLeft: theme.spacing(3),
-      width: "auto"
-    }
+const Search = styled('div')(({ theme }) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
   },
-  searchIcon: {
-    width: theme.spacing(6),
-    height: "100%",
-    position: "absolute",
-    pointerEvents: "none",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "24px"
+  marginRight: theme.spacing(2),
+  marginLeft: 0,
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    marginLeft: theme.spacing(3),
+    width: 'auto',
   },
-  inputRoot: {
-    color: "inherit",
-    width: "100%"
-  },
-  inputInput: {
-    paddingTop: theme.spacing(1),
-    paddingRight: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-    paddingLeft: theme.spacing(6),
-    transition: theme.transitions.create("width"),
-    width: "100%",
-    [theme.breakpoints.up("md")]: {
-      width: 200
-    }
-  }
 }));
 
-const Search = (props: SearchBarProps) => {
-  const classes = useSearchStyles();
-  return (
-    <div className={classes.search}>
-      <span className={classes.searchIcon}>
-        <ReactIcon path={mdiMagnify} size={1} />
-      </span>
-      <InputBase placeholder="Search…" type="search"
-        onChange={(e) => props.onSearch(e.target.value)}
-        classes={{
-          root: classes.inputRoot,
-          input: classes.inputInput
-        }} />
-    </div>
-  );
-};
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  color: 'inherit',
+  '& .MuiInputBase-input': {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      width: '20ch',
+    },
+  },
+}));
 
 const openOnGithub = () => window.open(
   "https://github.com/uwap/mqtt-control-map", "_blank");
 
 const TopBar = (props: TopBarProps) => (
-  <AppBar position="static">
+  <AppBar position="static" color="primary">
     <Toolbar>
       {renderConnectionIndicator(props.connected)}
-      <Search onSearch={props.onSearch} />
+      <Search>
+        <SearchIconWrapper>
+          <ReactIcon path={mdiMagnify} size={1} />
+        </SearchIconWrapper>
+        <StyledInputBase
+          placeholder="Search…"
+          inputProps={{ 'aria-label': 'search' }}
+          onChange={(e) => props.onSearch(e.target.value)}
+        />
+      </Search>
       <span style={{flex: 1}}></span>
       <Tooltip title="View on Github">
         <IconButton onClick={openOnGithub}>

src/components/UiItemList.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import ListItem from "@material-ui/core/ListItem";
+import ListItem from "@mui/material/ListItem";
 
 import type { ControlUI } from "config/flowtypes";
 

src/components/UiItems/DropDown.js

@@ -6,11 +6,11 @@ import { isDisabled, getValue } from "./utils";
 
 import type { UIDropDown } from "config/flowtypes";
 
-import Select from "@material-ui/core/Select";
-import FormControl from "@material-ui/core/FormControl";
-import InputLabel from "@material-ui/core/InputLabel";
-import MenuItem from "@material-ui/core/MenuItem";
-import Input from "@material-ui/core/Input";
+import Select from "@mui/material/Select";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import Input from "@mui/material/Input";
 
 const componentId = (item: UIDropDown) => `dropdown-${item.topic}`;
 

src/components/UiItems/Link.js

@@ -5,7 +5,7 @@ import { isEnabled, isDisabled } from "./utils";
 
 import type { UILink } from "config/flowtypes";
 
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 
 const followLink = (item, state) => () => {
   if (isEnabled(item, state)) {

src/components/UiItems/Progress.js

@@ -5,7 +5,7 @@ import { getValue } from "./utils";
 
 import type { UIProgress } from "config/flowtypes";
 
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
 
 const progressVal = (item, state) => {
   const min = item.min || 0;

src/components/UiItems/Section.js

@@ -4,7 +4,7 @@ import createComponent from "./base";
 
 import type { UISection } from "config/flowtypes";
 
-import ListSubheader from "@material-ui/core/ListSubheader";
+import ListSubheader from "@mui/material/ListSubheader";
 
 const BaseComponent = (_b, item: UISection, _state, _changeState) => (
   <ListSubheader>{item.text}</ListSubheader>

src/components/UiItems/Slider.js

@@ -5,7 +5,7 @@ import { isDisabled, getValue } from "./utils";
 
 import type { UISlider } from "config/flowtypes";
 
-import SliderComponent from "@material-ui/core/Slider";
+import SliderComponent from "@mui/material/Slider";
 
 const changeSliderValue = (item: UISlider, changeState) => (_e, v) =>
   changeState(item, v.toString());

src/components/UiItems/Text.js

@@ -5,7 +5,7 @@ import { getValue } from "./utils";
 
 import type { UIText } from "config/flowtypes";
 
-import ListItemText from "@material-ui/core/ListItemText";
+import ListItemText from "@mui/material/ListItemText";
 
 const BaseComponent = ({Icon}, item: UIText, state, _changeState) => (
   <React.Fragment>

src/components/UiItems/Toggle.js

@@ -5,7 +5,7 @@ import { isDisabled, isEnabled, getValue } from "./utils";
 
 import type { UIToggle } from "config/flowtypes";
 
-import Switch from "@material-ui/core/Switch";
+import Switch from "@mui/material/Switch";
 
 const isToggled = (item: UIToggle, state: State) => {
   const isChecked = item.toggled ||

src/components/UiItems/base.js

@@ -2,9 +2,9 @@
 import * as React from "react";
 import MqttContext from "mqtt/context";
 
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
 
 import throttle from "lodash/throttle";
 import type { Icon } from "config/icon";