fix extension code with mui v5 migration

www/src/components/Table/TableHeader/Extensions/ExtensionList.tsx

@@ -1,17 +1,18 @@
+import { useState } from "react";
+
+import { makeStyles, createStyles } from "@material-ui/styles";
 import {
   Avatar,
   Box,
   Button,
   Divider,
   IconButton,
-  makeStyles,
   Menu,
   MenuItem,
   Switch,
   Tooltip,
   Typography,
 } from "@material-ui/core";
-import React, { useState } from "react";
 import moment from "moment";
 import { extensionTypes, IExtension, IExtensionType } from "./utils";
 import EmptyState from "components/EmptyState";
@@ -22,34 +23,36 @@ import EditIcon from "@material-ui/icons/Edit";
 import DeleteIcon from "@material-ui/icons/DeleteForever";
 import { useRef } from "react";
 
-const useStyles = makeStyles((theme) => ({
-  hoverableEmptyState: {
-    borderRadius: theme.spacing(1),
-    cursor: "pointer",
-    padding: theme.spacing(2),
-    "&:hover": {
-      background: theme.palette.background.paper,
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    hoverableEmptyState: {
+      borderRadius: theme.spacing(1),
+      cursor: "pointer",
+      padding: theme.spacing(2),
+      "&:hover": {
+        background: theme.palette.background.paper,
+      },
     },
-  },
-  divider: {
-    margin: theme.spacing(1, 0),
-  },
-  extensionName: {
-    marginTop: theme.spacing(1),
-  },
-  extensionType: {
-    marginBottom: theme.spacing(1),
-  },
-  avatar: {
-    marginRight: theme.spacing(1),
-    width: theme.spacing(4),
-    height: theme.spacing(4),
-  },
-  extensionList: {
-    height: "50vh",
-    overflowY: "scroll",
-  },
-}));
+    divider: {
+      margin: theme.spacing(1, 0),
+    },
+    extensionName: {
+      marginTop: theme.spacing(1),
+    },
+    extensionType: {
+      marginBottom: theme.spacing(1),
+    },
+    avatar: {
+      marginRight: theme.spacing(1),
+      width: theme.spacing(4),
+      height: theme.spacing(4),
+    },
+    extensionList: {
+      height: "50vh",
+      overflowY: "scroll",
+    },
+  })
+);
 
 export interface IExtensionListProps {
   extensions: IExtension[];

www/src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx

@@ -1,28 +1,23 @@
-import React, { useState } from "react";
-import _isEqual from "lodash/isEqual";
+import { useState } from "react";
+import { makeStyles, createStyles } from "@material-ui/styles";
 import { sparkToExtensionObjects } from "./utils";
 import Modal from "components/Modal";
 import { useFiretableContext } from "contexts/FiretableContext";
 import { useAppContext } from "contexts/AppContext";
 import firebase from "firebase/app";
-import {
-  Box,
-  Button,
-  CircularProgress,
-  IconButton,
-  makeStyles,
-  Typography,
-} from "@material-ui/core";
+import { Box, Button, CircularProgress, Typography } from "@material-ui/core";
 
-const useStyles = makeStyles((theme) => ({
-  modalRoot: {
-    height: `calc(100vh - 200px)`,
-  },
-  download: {
-    maxWidth: 320,
-    marginTop: theme.spacing(0.5),
-  },
-}));
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    modalRoot: {
+      height: `calc(100vh - 200px)`,
+    },
+    download: {
+      maxWidth: 320,
+      marginTop: theme.spacing(0.5),
+    },
+  })
+);
 
 export interface IExtensionMigrationProps {
   handleClose: () => void;

www/src/components/Table/TableHeader/Extensions/ExtensionModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import _isEqual from "lodash/isEqual";
 import useStateRef from "react-usestateref";
 import { IExtension, triggerTypes } from "./utils";
@@ -10,6 +10,7 @@ import { useFiretableContext } from "contexts/FiretableContext";
 import BackIcon from "@material-ui/icons/ArrowBack";
 import AddIcon from "@material-ui/icons/AddBox";
 import DeleteIcon from "@material-ui/icons/RemoveCircle";
+import { makeStyles, createStyles } from "@material-ui/styles";
 import {
   AppBar,
   Box,
@@ -17,7 +18,6 @@ import {
   Checkbox,
   Grid,
   IconButton,
-  makeStyles,
   Switch,
   Tab,
   Tabs,
@@ -47,46 +47,48 @@ const additionalVariables = [
   },
 ];
 
-const useStyles = makeStyles((theme) => ({
-  modalRoot: {
-    height: `calc(100vh - 250px)`,
-  },
-  metaRoot: {
-    marginBottom: theme.spacing(2),
-  },
-  tabWrapper: {
-    backgroundColor: theme.palette.background.default,
-  },
-  tabRoot: {
-    backgroundColor: theme.palette.background.paper,
-  },
-  tabPanel: {
-    padding: 0,
-  },
-  label: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(1),
-    display: "block",
-  },
-  hoverable: {
-    borderRadius: theme.spacing(1),
-    cursor: "pointer",
-    padding: theme.spacing(1, 0),
-    "&:hover": {
-      background: theme.palette.background.paper,
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    modalRoot: {
+      height: `calc(100vh - 250px)`,
     },
-  },
-  requiredFields: {
-    maxHeight: `max(300px, 30vh)`,
-    overflowY: "scroll",
-  },
-  addField: {
-    paddingLeft: 13, // align icons to the left
-  },
-  removeField: {
-    marginLeft: -3, // align icons to the left
-  },
-}));
+    metaRoot: {
+      marginBottom: theme.spacing(2),
+    },
+    tabWrapper: {
+      backgroundColor: theme.palette.background.default,
+    },
+    tabRoot: {
+      backgroundColor: theme.palette.background.paper,
+    },
+    tabPanel: {
+      padding: 0,
+    },
+    label: {
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(1),
+      display: "block",
+    },
+    hoverable: {
+      borderRadius: theme.spacing(1),
+      cursor: "pointer",
+      padding: theme.spacing(1, 0),
+      "&:hover": {
+        background: theme.palette.background.paper,
+      },
+    },
+    requiredFields: {
+      maxHeight: `max(300px, 30vh)`,
+      overflowY: "scroll",
+    },
+    addField: {
+      paddingLeft: 13, // align icons to the left
+    },
+    removeField: {
+      marginLeft: -3, // align icons to the left
+    },
+  })
+);
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -197,7 +199,7 @@ export default function ExtensionModal({
           <Grid
             container
             spacing={3}
-            justify="center"
+            justifyContent="center"
             alignItems="center"
             className={classes.metaRoot}
           >
@@ -275,7 +277,7 @@ export default function ExtensionModal({
               <Grid
                 container
                 spacing={3}
-                justify="center"
+                justifyContent="center"
                 alignItems="flex-start"
               >
                 <Grid item xs={6}>