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

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";