updated the material ui imports for existing files that had not been updated yet

src/common/NotificationButton.tsx

@@ -1,5 +1,5 @@
 import { IconButton, Tooltip } from "@mui/material";
-// import { Theme } from "@material-ui/core/styles/createMuiTheme";
+// import { Theme } from "@/styles/createMuiTheme";
 // import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
 import NotificationsEnabledIcon from "@mui/icons-material/NotificationsActive";
 import NotificationsDisabledIcon from "@mui/icons-material/NotificationsOff";

src/component/ComponentOrder.tsx

@@ -11,10 +11,12 @@ import {
   ListItemIcon,
   ListItemText,
   ListSubheader,
-  Typography
-} from "@material-ui/core";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
-import DragIcon from "@material-ui/icons/DragHandle";
+  Typography,
+  Theme
+} from "@mui/material";
+import { makeStyles } from "@mui/styles";
+//import DragIcon from "@material-ui/icons/DragHandle";
+import { DragHandle as DragIcon } from "@mui/icons-material";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { useDeviceAPI, usePrevious, useSnackbar } from "hooks";
 import { cloneDeep } from "lodash";
@@ -23,17 +25,19 @@ import { sortComponents } from "pbHelpers/Component";
 import { pond, quack } from "protobuf-ts/pond";
 import React, { useEffect, useState } from "react";
 import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
+import { useThemeType } from "../hooks/useThemeType";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles((theme: Theme) => {
+    const themeType = useThemeType()
+    return ({
     item: {
       backgroundColor: "rgba(0,0,0,0)",
       "&:hover": {
         backgroundColor:
-          theme.palette.type === "light" ? "rgba(0,0,0,0.07)" : "rgba(255,255,255,0.07)"
+          themeType === "light" ? "rgba(0,0,0,0.07)" : "rgba(255,255,255,0.07)"
       }
     }
-  })
+  })}
 );
 
 interface ItemProps {

src/component/GPS.tsx

@@ -1,4 +1,6 @@
-import { withStyles, Theme, WithTheme, createStyles, WithStyles } from "@material-ui/core/styles";
+//import { withStyles, Theme, WithTheme, createStyles, WithStyles } from "@material-ui/core/styles";
+import { Theme } from "@mui/material"
+import { withStyles, createStyles, WithTheme, WithStyles } from "@mui/styles";
 import React from "react";
 import { parseGPS } from "services/google/mapHelpers";
 import { geolocate } from "services/google/googleAPI";

src/component/SensorLight.tsx

@@ -1,4 +1,6 @@
-import { Box, createStyles, makeStyles, Theme } from "@material-ui/core";
+//import { Box, createStyles, makeStyles, Theme } from "@material-ui/core";
+import { Box, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 import { Component } from "models";
 import { getMeasurementSummary } from "pbHelpers/ComponentType";
 import { pond } from "protobuf-ts/pond";
@@ -14,7 +16,7 @@ interface Props {
 }
 
 const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+  ({
     "@keyframes ripple": {
       from: {
         transform: "scale(.8)",

src/fans/fanPicker.tsx

@@ -1,5 +1,5 @@
 import {
-  Grid,
+  Grid2 as Grid,
   Button,
   Typography,
   DialogTitle,
@@ -12,8 +12,9 @@ import {
   RadioGroup,
   Radio,
   Box
-} from "@material-ui/core";
-import { blue } from "@material-ui/core/colors";
+} from "@mui/material";
+//import { blue } from "@material-ui/core/colors";
+import { blue } from "@mui/material/colors";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import React, { useState, useEffect } from "react";
 import fans from "fans/fans_client.json";
@@ -203,13 +204,12 @@ export default function FanPicker(props: Props) {
               alignItems="center"
               container
               direction="row"
-              justify="space-between"
               key={type}
               style={{ marginTop: 20 }}>
-              <Grid item>
+              <Grid>
                 <FormControlLabel value={type} control={<Radio />} label={type} />
               </Grid>
-              <Grid item>
+              <Grid>
                 <img width={100} height={100} src={determineFanIcon(type)} alt="fanimg" />
               </Grid>
             </Grid>
@@ -245,9 +245,8 @@ export default function FanPicker(props: Props) {
         <Grid
           container
           direction="row"
-          justify="space-between"
           style={{ marginBottom: 10, marginTop: 10 }}>
-          <Grid item xs={5}>
+          <Grid size={{xs:5}}>
             <Select
               id="fantype"
               fullWidth
@@ -270,7 +269,7 @@ export default function FanPicker(props: Props) {
               ))}
             </Select>
           </Grid>
-          <Grid item xs={5}>
+          <Grid size={{xs:5}}>
             <Select
               id="horsepower"
               fullWidth
@@ -315,9 +314,9 @@ export default function FanPicker(props: Props) {
         }}
         fullWidth>
         <DialogTitle>
-          <Grid container direction="row" justify="space-between">
-            <Grid item>Select Fan</Grid>
-            <Grid item>
+          <Grid container direction="row">
+            <Grid>Select Fan</Grid>
+            <Grid>
               <FormControlLabel
                 control={
                   <Switch
@@ -363,7 +362,7 @@ export default function FanPicker(props: Props) {
       <React.Fragment>
         {selector()}
         <Grid container direction="row" alignItems="center">
-          <Grid item xs={3}>
+          <Grid size={{xs:3}}>
             <Button
               onClick={() => {
                 setOpenSelector(true);
@@ -373,7 +372,7 @@ export default function FanPicker(props: Props) {
               FanPicker
             </Button>
           </Grid>
-          <Grid item xs={9}>
+          <Grid size={{xs:9}}>
             <Typography>{displayFan}</Typography>
           </Grid>
         </Grid>
@@ -387,8 +386,8 @@ export default function FanPicker(props: Props) {
         <Box padding={2}>
           <Typography style={{ fontSize: 15 }}>Current Fan</Typography>
           <Typography style={{ fontWeight: 650, fontSize: 20 }}>{displayFan}</Typography>
-          <Grid container direction="row-reverse" justify="space-between">
-            <Grid item>
+          <Grid container direction="row-reverse">
+            <Grid>
               <FormControlLabel
                 control={
                   <Switch

src/grain/GrainInventory.tsx

@@ -14,7 +14,7 @@ import {
   Radio,
   RadioGroup,
   TextField
-} from "@material-ui/core";
+} from "@mui/material";
 import { useState } from "react";
 import { useEffect } from "react";
 import { pond } from "protobuf-ts/pond";

src/grain/GrainTransaction.tsx

@@ -10,7 +10,7 @@ import {
   RadioGroup,
   TextField,
   Typography
-} from "@material-ui/core";
+} from "@mui/material";
 import FileUploader from "common/FileUploads/FileUploader";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import SearchSelect, { Option } from "common/SearchSelect";

src/objects/ObjectAlerts.tsx

@@ -6,7 +6,6 @@ import {
   Button,
   Card,
   Checkbox,
-  createStyles,
   DialogActions,
   DialogContent,
   DialogTitle,
@@ -14,7 +13,7 @@ import {
   FormControlLabel,
   FormHelperText,
   FormLabel,
-  Grid,
+  Grid2 as Grid,
   IconButton,
   InputAdornment,
   List,
@@ -22,15 +21,17 @@ import {
   ListItemIcon,
   ListItemText,
   ListSubheader,
-  makeStyles,
   MenuItem,
   Select,
   TextField,
   Theme,
   Tooltip,
   Typography
-} from "@material-ui/core";
-import { ExpandMore } from "@material-ui/icons";
+} from "@mui/material";
+import { ExpandMore, RemoveCircle as RemoveIcon, AddCircle as AddIcon } from "@mui/icons-material";
+//import RemoveIcon from "@material-ui/icons/RemoveCircle";
+//import { ExpandMore } from "@material-ui/icons";
+//import AddIcon from "@material-ui/icons/AddCircle";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { Option } from "common/SearchSelect";
 import classNames from "classnames";
@@ -44,13 +45,17 @@ import { quack } from "protobuf-ts/quack";
 import { useGlobalState, useInteractionsAPI, useSnackbar } from "providers";
 import { useNotificationAPI } from "providers/pond/notificationAPI";
 import React, { useEffect, useState } from "react";
-import RemoveIcon from "@material-ui/icons/RemoveCircle";
-import AddIcon from "@material-ui/icons/AddCircle";
-import { green, red } from "@material-ui/core/colors";
 import { capitalize, cloneDeep } from "lodash";
 import { timeOfDayDescriptor } from "pbHelpers/Interaction";
-import { TimePicker } from "@material-ui/pickers";
-import { getThemeType } from "theme";
+//import { TimePicker } from "@material-ui/pickers";
+import { TimePicker } from "@mui/x-date-pickers";
+//import { getThemeType } from "theme";
+import { getThemeType } from "theme/themeType";
+//import { green, red } from "@material-ui/core/colors";
+import { green, red } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
+
+
 
 interface Props {
   linkedComponents: Map<string, Component>;
@@ -65,7 +70,7 @@ interface Alert {
 }
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     borderedContainer: {
       padding: theme.spacing(1),
       marginBottom: theme.spacing(2),
@@ -327,7 +332,7 @@ export default function ObjectAlerts(props: Props) {
         <AccordionSummary expandIcon={<ExpandMore />}>
           <Grid container direction="column">
             {alert.conditions.map((condition, i) => (
-              <Grid item key={i}>
+              <Grid key={i}>
                 {readableCondition(condition)}
               </Grid>
             ))}
@@ -448,15 +453,14 @@ export default function ObjectAlerts(props: Props) {
           key={"interaction"}
           container
           direction="row"
-          justify="center"
           alignItems="center"
           spacing={2}>
           {index > 0 && (
-            <Grid item xs={12}>
+            <Grid size={12}>
               <Typography align="center">AND</Typography>
             </Grid>
           )}
-          <Grid item xs={10} sm={4}>
+          <Grid size={{ xs:10, sm:4 }}>
             <TextField
               select
               id="measurementType"
@@ -478,7 +482,7 @@ export default function ObjectAlerts(props: Props) {
               {measurementTypeMenuItems()}
             </TextField>
           </Grid>
-          <Grid item xs={10} sm={3}>
+          <Grid size={{ xs:10, sm:3 }}>
             <TextField
               select
               id="comparison"
@@ -509,7 +513,7 @@ export default function ObjectAlerts(props: Props) {
               </MenuItem>
             </TextField>
           </Grid>
-          <Grid item xs={8} sm={4}>
+          <Grid size={{xs:8, sm:4}}>
             <TextField
               select={isBoolean}
               id="value"
@@ -546,7 +550,7 @@ export default function ObjectAlerts(props: Props) {
               ]}
             </TextField>
           </Grid>
-          <Grid item xs={2} sm={1}>
+          <Grid size={{xs:2, sm:1}}>
             {index === 0 ? (
               <Tooltip title="Add another condition">
                 <IconButton
@@ -585,10 +589,9 @@ export default function ObjectAlerts(props: Props) {
             key={"nodes"}
             container
             direction="row"
-            justify="center"
             alignItems="center"
             spacing={2}>
-            <Grid item xs={10} sm={4}>
+            <Grid size={{xs:10, sm:4}}>
               <TextField
                 select
                 id="subtype"
@@ -619,7 +622,7 @@ export default function ObjectAlerts(props: Props) {
                 </MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={10} sm={4}>
+            <Grid size={{xs:10, sm:4}}>
               {(subtypeDropdown === 2 || subtypeDropdown === 3 || subtypeDropdown === 4) && (
                 <TextField
                   select
@@ -638,7 +641,7 @@ export default function ObjectAlerts(props: Props) {
                 </TextField>
               )}
             </Grid>
-            <Grid item xs={10} sm={4}>
+            <Grid size={{xs:10, sm:4}}>
               {subtypeDropdown === 3 && (
                 <TextField
                   select
@@ -750,7 +753,7 @@ export default function ObjectAlerts(props: Props) {
   const daySelector = (day: string, size: any) => {
     //const schedule = or(interaction.settings.schedule, pond.InteractionSchedule.create());
     return (
-      <Grid item container xs={size} sm={1} justify="center" alignItems="center">
+      <Grid container size={{xs: size, sm:1}} alignItems="center">
         <FormControlLabel
           control={
             <Checkbox
@@ -792,7 +795,7 @@ export default function ObjectAlerts(props: Props) {
     return (
       <FormControl component={"fieldset" as "div"} className={classes.borderedContainer} fullWidth>
         <FormLabel component={"legend" as "caption"}>Schedule</FormLabel>
-        <Grid container direction="row" spacing={0} justify="flex-start">
+        <Grid container direction="row" spacing={0}>
           {daySelector("sunday", 3)}
           {daySelector("monday", 3)}
           {daySelector("tuesday", 3)}
@@ -802,7 +805,7 @@ export default function ObjectAlerts(props: Props) {
           {daySelector("saturday", 4)}
         </Grid>
         <Grid container direction="row" spacing={2} alignItems="center">
-          <Grid item xs={12} sm={3}>
+          <Grid size={{xs:12, sm:3}}>
             <TextField
               select
               id="timeOfDayShortcut"
@@ -828,16 +831,16 @@ export default function ObjectAlerts(props: Props) {
             </TextField>
           </Grid>
           {showStart && (
-            <Grid item xs={5} sm={3}>
+            <Grid size={{xs:5, sm:3}}>
               <TimePicker
-                renderInput={props => <TextField {...props} helperText="" />}
+                //renderInput={props => <TextField {...props} helperText="" />}
                 value={start}
                 onChange={(event: any) => setScheduleTime("start", event)}
               />
             </Grid>
           )}
           {showBoth && (
-            <Grid item xs={2} sm={1}>
+            <Grid size={{xs:2,sm:1}}>
               <Typography
                 variant="subtitle1"
                 color="textSecondary"
@@ -848,9 +851,9 @@ export default function ObjectAlerts(props: Props) {
             </Grid>
           )}
           {showEnd && (
-            <Grid item xs={5} sm={3}>
+            <Grid size={{xs:5, sm:3}}>
               <TimePicker
-                renderInput={props => <TextField {...props} helperText="" />}
+                //renderInput={props => <TextField {...props} helperText="" />}
                 value={end}
                 onChange={(event: any) => setScheduleTime("end", event)}
               />

src/objects/bulkEditForms/bulkBinSettings.tsx

@@ -1,4 +1,5 @@
-import { Button, Grid, InputAdornment, TextField } from "@material-ui/core";
+//import { Button, Grid, InputAdornment, TextField } from "@material-ui/core";
+import { Button, Grid, InputAdornment, TextField } from "@mui/material";
 import SearchSelect, { Option } from "common/SearchSelect";
 import { GrainOptions } from "grain";
 import { pond } from "protobuf-ts/pond";

src/objects/bulkEditForms/bulkGrainBagSettings.tsx

@@ -1,4 +1,5 @@
-import { Button, Grid, TextField } from "@material-ui/core";
+//import { Button, Grid, TextField } from "@material-ui/core";
+import { Button, Grid, TextField } from "@mui/material";
 import SearchSelect, { Option } from "common/SearchSelect";
 import { GrainOptions } from "grain";
 import { GrainBag } from "models/GrainBag";

src/products/ProductTabChip.tsx

@@ -1,14 +1,18 @@
-import { Avatar, ButtonBase, createStyles, makeStyles, Theme, Tooltip } from "@material-ui/core";
-import { Tune as PresetsIcon, ViewList as ComponentsIcon } from "@material-ui/icons";
+//import { Avatar, ButtonBase, createStyles, makeStyles, Theme, Tooltip } from "@material-ui/core";
+//import { Tune as PresetsIcon, ViewList as ComponentsIcon } from "@material-ui/icons";
+import { Avatar, ButtonBase, Theme, Tooltip } from "@mui/material";
+import { Tune as PresetsIcon, ViewList as ComponentsIcon } from "@mui/icons-material";
+import { makeStyles } from "@mui/styles";
+import { useThemeType } from "../hooks/useThemeType";
 import classnames from "classnames";
 import { capitalize } from "lodash";
 import React from "react";
 import { ProductTab } from "./DeviceProduct";
 
 const useStyles = makeStyles((theme: Theme) => {
-  const themeType = theme.palette.type;
+  const themeType = useThemeType();
   const activeBG = theme.palette.secondary.main;
-  return createStyles({
+  return ({
     avatar: {
       color: themeType === "light" ? theme.palette.common.black : theme.palette.common.white,
       backgroundColor: "transparent",