chore: migration mui v4 -> v5.

package.json

@@ -7,15 +7,16 @@
     "@craco/craco": "^6.3.0",
     "@curi/react-dom": "^2.0.4",
     "@curi/router": "^2.1.2",
-    "@date-io/date-fns": "^1.3.13",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@hickory/browser": "^2.1.0",
-    "@material-ui/core": "^4.11.3",
+    "@mui/icons-material": "^5.0.1",
-    "@material-ui/icons": "^4.11.2",
+    "@mui/lab": "^5.0.0-alpha.49",
-    "@material-ui/lab": "*",
+    "@mui/material": "^5.0.2",
-    "@material-ui/pickers": "^3.3.10",
+    "@mui/styles": "^5.0.1",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
@@ -44,7 +45,7 @@
     "yup": "^0.32.9"
   },
   "scripts": {
-    "start": "BROWSER=none craco start",
+    "start": "BROWSER=none PORT=auto craco start",
     "build": "craco build",
     "test": "craco test",
     "prestart": "npm run graphql",

src/commits/commit-list.tsx

@@ -13,10 +13,10 @@ import {
   ListItemIcon,
   ListItemSecondaryAction,
   ListItemText,
-  makeStyles,
   useTheme,
-  withStyles,
+} from "@mui/material";
-} from "@material-ui/core";
+import { makeStyles } from "@mui/styles";
+import withStyles from "@mui/styles/withStyles";
 import {
   Cancel,
   CheckCircle,
@@ -24,7 +24,7 @@ import {
   ShoppingCart,
   Stop,
   Timer,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 import { format } from "date-fns";
 import { useSnackbar } from "notistack";
 import { complement, equals, find, propEq, takeWhile } from "ramda";
@@ -133,8 +133,7 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
 }) => {
   const [isOpen, setOpen] = useState(() => false);
 
-  const [createTask, { loading }] =
+  const [createTask, { loading }] = useMutation<
-    useMutation<
     { createPipelineTask: PipelineTask },
     { task: CreatePipelineTaskInput }
   >(CREATE_PIPELINE_TASK);
@@ -181,6 +180,7 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
               aria-label={pair[2]}
               disabled={loading}
               onClick={() => handleCreateTask(unit)}
+              size="large"
             >
               {pair[1]}
             </IconButton>
@@ -257,7 +257,7 @@ const TaskItem: FC<{ task: PipelineTask }> = ({ task }) => {
       />
       <ListItemSecondaryAction>
         {task.status === TaskStatuses.Working && (
-          <IconButton edge="end" aria-label="stop" onClick={stop}>
+          <IconButton edge="end" aria-label="stop" onClick={stop} size="large">
             <Stop />
           </IconButton>
         )}

src/commons/auth/login.tsx

@@ -1,7 +1,9 @@
-import { makeStyles } from "@material-ui/core";
+import makeStyles from "@mui/styles/makeStyles";
 import { FC, Fragment, useEffect, useRef } from "react";
 import { useAuth } from "./auth.provider";
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((theme) => {
+  debugger;
+  return {
     iframe: {
       height: "300px",
       width: "500px",
@@ -22,7 +24,8 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: "rgba(0, 0, 0, 0.3)",
       zIndex: theme.zIndex.modal,
     },
-}));
+  };
+});
 
 export const Login: FC = () => {
   const iframeRef = useRef<HTMLIFrameElement>(null);

src/commons/fallbacks/error-page.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import React, { FC } from 'react';
 
 export const ErrorPage: FC = ({children}) => {

src/commons/route/router.tsx

@@ -4,7 +4,7 @@ import { createRouter, announce } from "@curi/router";
 import { browser } from "@hickory/browser";
 import { FC, useEffect, useState } from "react";
 import routes from "../../routes";
-import { LinearProgress } from "@material-ui/core";
+import { LinearProgress } from "@mui/material";
 
 const Component: FC = ({ children }) => {
   const client = useApolloClient();

src/generated/graphql.schema.json

@@ -167,178 +167,6 @@
         "enumValues": null,
         "possibleTypes": null
       },
-      {
-        "kind": "OBJECT",
-        "name": "Configuration",
-        "description": null,
-        "fields": [
-          {
-            "name": "id",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "ID",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "pipeline",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "OBJECT",
-                "name": "Pipeline",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "pipelineId",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "project",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "OBJECT",
-                "name": "Project",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "projectId",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "content",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "name",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "language",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "ENUM",
-                "name": "ConfigurationLanguage",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          }
-        ],
-        "inputFields": null,
-        "interfaces": [],
-        "enumValues": null,
-        "possibleTypes": null
-      },
-      {
-        "kind": "SCALAR",
-        "name": "ID",
-        "description": "The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `\"4\"`) or integer (such as `4`) input value will be accepted as an ID.",
-        "fields": null,
-        "inputFields": null,
-        "interfaces": null,
-        "enumValues": null,
-        "possibleTypes": null
-      },
-      {
-        "kind": "ENUM",
-        "name": "ConfigurationLanguage",
-        "description": null,
-        "fields": null,
-        "inputFields": null,
-        "interfaces": null,
-        "enumValues": [
-          {
-            "name": "JavaScript",
-            "description": null,
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "YAML",
-            "description": null,
-            "isDeprecated": false,
-            "deprecationReason": null
-          }
-        ],
-        "possibleTypes": null
-      },
       {
         "kind": "INPUT_OBJECT",
         "name": "CreatePipelineInput",
@@ -1016,39 +844,6 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
-          },
-          {
-            "name": "setConfiguration",
-            "description": null,
-            "args": [
-              {
-                "name": "setConfigurationInput",
-                "description": null,
-                "type": {
-                  "kind": "NON_NULL",
-                  "name": null,
-                  "ofType": {
-                    "kind": "INPUT_OBJECT",
-                    "name": "SetConfigurationInput",
-                    "ofType": null
-                  }
-                },
-                "defaultValue": null,
-                "isDeprecated": false,
-                "deprecationReason": null
-              }
-            ],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "OBJECT",
-                "name": "Configuration",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -1183,6 +978,16 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "SCALAR",
+        "name": "ID",
+        "description": "The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `\"4\"`) or integer (such as `4`) input value will be accepted as an ID.",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "PipelineTask",
@@ -1978,59 +1783,6 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
-          },
-          {
-            "name": "getConfiguration",
-            "description": null,
-            "args": [
-              {
-                "name": "pipelineId",
-                "description": null,
-                "type": {
-                  "kind": "SCALAR",
-                  "name": "String",
-                  "ofType": null
-                },
-                "defaultValue": null,
-                "isDeprecated": false,
-                "deprecationReason": null
-              },
-              {
-                "name": "projectId",
-                "description": null,
-                "type": {
-                  "kind": "SCALAR",
-                  "name": "String",
-                  "ofType": null
-                },
-                "defaultValue": null,
-                "isDeprecated": false,
-                "deprecationReason": null
-              },
-              {
-                "name": "id",
-                "description": null,
-                "type": {
-                  "kind": "SCALAR",
-                  "name": "String",
-                  "ofType": null
-                },
-                "defaultValue": null,
-                "isDeprecated": false,
-                "deprecationReason": null
-              }
-            ],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "OBJECT",
-                "name": "Configuration",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -2038,81 +1790,6 @@
         "enumValues": null,
         "possibleTypes": null
       },
-      {
-        "kind": "INPUT_OBJECT",
-        "name": "SetConfigurationInput",
-        "description": null,
-        "fields": null,
-        "inputFields": [
-          {
-            "name": "pipelineId",
-            "description": null,
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
-            },
-            "defaultValue": null,
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "projectId",
-            "description": null,
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
-            },
-            "defaultValue": null,
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "content",
-            "description": null,
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
-            },
-            "defaultValue": null,
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "language",
-            "description": null,
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "ENUM",
-                "name": "ConfigurationLanguage",
-                "ofType": null
-              }
-            },
-            "defaultValue": null,
-            "isDeprecated": false,
-            "deprecationReason": null
-          }
-        ],
-        "interfaces": null,
-        "enumValues": null,
-        "possibleTypes": null
-      },
       {
         "kind": "OBJECT",
         "name": "Subscription",

src/generated/graphql.tsx

@@ -26,23 +26,6 @@ export type Commit = {
   tasks: Array<PipelineTask>;
 };
 
-export type Configuration = {
-  __typename?: 'Configuration';
-  id: Scalars['ID'];
-  pipeline: Pipeline;
-  pipelineId: Scalars['String'];
-  project: Project;
-  projectId: Scalars['String'];
-  content: Scalars['String'];
-  name: Scalars['String'];
-  language: ConfigurationLanguage;
-};
-
-export enum ConfigurationLanguage {
-  JavaScript = 'JavaScript',
-  Yaml = 'YAML'
-}
-
 export type CreatePipelineInput = {
   projectId: Scalars['String'];
   branch: Scalars['String'];
@@ -92,7 +75,6 @@ export type Mutation = {
   deletePipeline: Scalars['Float'];
   createPipelineTask: PipelineTask;
   stopPipelineTask: Scalars['Boolean'];
-  setConfiguration: Configuration;
 };
 
 
@@ -135,11 +117,6 @@ export type MutationStopPipelineTaskArgs = {
   id: Scalars['String'];
 };
 
-
-export type MutationSetConfigurationArgs = {
-  setConfigurationInput: SetConfigurationInput;
-};
-
 export type Pipeline = {
   __typename?: 'Pipeline';
   id: Scalars['ID'];
@@ -214,7 +191,6 @@ export type Query = {
   commits?: Maybe<Array<Commit>>;
   listPipelineTaskByPipelineId: Array<PipelineTask>;
   pipelineTask: PipelineTask;
-  getConfiguration: Configuration;
 };
 
 
@@ -247,20 +223,6 @@ export type QueryPipelineTaskArgs = {
   id: Scalars['String'];
 };
 
-
-export type QueryGetConfigurationArgs = {
-  pipelineId?: Maybe<Scalars['String']>;
-  projectId?: Maybe<Scalars['String']>;
-  id?: Maybe<Scalars['String']>;
-};
-
-export type SetConfigurationInput = {
-  pipelineId: Scalars['String'];
-  projectId: Scalars['String'];
-  content: Scalars['String'];
-  language: ConfigurationLanguage;
-};
-
 export type Subscription = {
   __typename?: 'Subscription';
   syncCommits?: Maybe<Scalars['String']>;

src/index.tsx

@@ -5,28 +5,44 @@ import "fontsource-roboto";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { AppApolloClientProvider } from "./commons/graphql/client";
-import { MuiPickersUtilsProvider } from "@material-ui/pickers";
-import DateFnsUtils from "@date-io/date-fns";
-import zhLocale from "date-fns/locale/zh-CN";
 import { ConfirmProvider } from "material-ui-confirm";
 import { SnackbarProvider } from "notistack";
 import Router from "./commons/route/router";
 import { AuthProvider } from "./commons/auth/auth.provider";
+import { LocalizationProvider } from "@mui/lab";
+import AdapterDateFns from "@mui/lab/AdapterDateFns";
+import {
+  ThemeProvider,
+  Theme,
+  StyledEngineProvider,
+  createTheme,
+} from "@mui/material/styles";
+
+declare module "@mui/styles/defaultTheme" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
+
+const theme = createTheme();
 
 ReactDOM.render(
   <React.StrictMode>
     <ConfirmProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
           <SnackbarProvider maxSnack={5}>
             <AuthProvider>
               <AppApolloClientProvider>
-            <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
+                <LocalizationProvider dateAdapter={AdapterDateFns}>
                   <Router>
                     <App />
                   </Router>
-            </MuiPickersUtilsProvider>
+                </LocalizationProvider>
               </AppApolloClientProvider>
             </AuthProvider>
           </SnackbarProvider>
+        </ThemeProvider>
+      </StyledEngineProvider>
     </ConfirmProvider>
   </React.StrictMode>,
   document.getElementById("root")

src/layouts/default.tsx

@@ -1,20 +1,17 @@
 import React, { FC, useCallback, useState } from "react";
 import clsx from "clsx";
-import {
+import { useTheme, Theme } from "@mui/material/styles";
-  createStyles,
+import createStyles from '@mui/styles/createStyles';
-  makeStyles,
+import makeStyles from '@mui/styles/makeStyles';
-  useTheme,
+import Drawer from "@mui/material/Drawer";
-  Theme,
+import AppBar from "@mui/material/AppBar";
-} from "@material-ui/core/styles";
+import Toolbar from "@mui/material/Toolbar";
-import Drawer from "@material-ui/core/Drawer";
+import CssBaseline from "@mui/material/CssBaseline";
-import AppBar from "@material-ui/core/AppBar";
+import Divider from "@mui/material/Divider";
-import Toolbar from "@material-ui/core/Toolbar";
+import IconButton from "@mui/material/IconButton";
-import CssBaseline from "@material-ui/core/CssBaseline";
+import MenuIcon from "@mui/icons-material/Menu";
-import Divider from "@material-ui/core/Divider";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import IconButton from "@material-ui/core/IconButton";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import MenuIcon from "@material-ui/icons/Menu";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
-import ChevronRightIcon from "@material-ui/icons/ChevronRight";
 import { ProjectPanel } from "../projects/project-panel";
 import { HeaderContainerProvider } from "./header-container";
 const drawerWidth = 240;
@@ -127,7 +124,7 @@ export const DefaultLayout: FC = ({ children }) => {
             className={clsx(classes.menuButton, {
               [classes.hide]: open,
             })}
-          >
+            size="large">
             <MenuIcon />
           </IconButton>
           <div className={classes.headerContaner} ref={onRefChange}></div>
@@ -147,7 +144,7 @@ export const DefaultLayout: FC = ({ children }) => {
         }}
       >
         <div className={classes.toolbar}>
-          <IconButton onClick={handleDrawerClose}>
+          <IconButton onClick={handleDrawerClose} size="large">
             {theme.direction === "rtl" ? (
               <ChevronRightIcon />
             ) : (

src/pipeline-tasks/pipeline-task-detail.tsx

@@ -1,5 +1,6 @@
 import { gql, useQuery, useSubscription } from "@apollo/client";
-import { LinearProgress, makeStyles, Typography } from "@material-ui/core";
+import { LinearProgress, Typography } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { format } from "date-fns";
 import { FC, useState } from "react";
 import { ErrorPage } from "../commons/fallbacks/error-page";

src/pipelines/pipeline-editor.tsx

@@ -1,16 +1,8 @@
 import { gql, Reference, useMutation } from "@apollo/client";
 import { useRouter } from "@curi/react-dom";
-import {
+import { Button, Grid, IconButton, LinearProgress, Paper, Portal, Typography } from "@mui/material";
-  Button,
+import makeStyles from '@mui/styles/makeStyles';
-  Grid,
+import { Delete } from "@mui/icons-material";
-  IconButton,
-  LinearProgress,
-  makeStyles,
-  Paper,
-  Portal,
-  Typography,
-} from "@material-ui/core";
-import { Delete } from "@material-ui/icons";
 import { FormikHelpers, Formik, Form, Field } from "formik";
 import { TextField, TextFieldProps } from "formik-material-ui";
 import { useConfirm } from "material-ui-confirm";
@@ -176,16 +168,12 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
   return (
     <Paper className={classes.root}>
       <Portal container={headerContainer}>
-        <Grid container justify="space-between" alignItems="center">
+        <Grid container justifyContent="space-between" alignItems="center">
           <Typography variant="h6" component="h1">
             {isCreate ? "Create" : "Edit"} Pipeline
           </Typography>
           {isCreate ? null : (
-            <IconButton
+            <IconButton color="inherit" onClick={handleDelete} disabled={deleting} size="large">
-              color="inherit"
-              onClick={handleDelete}
-              disabled={deleting}
-            >
               <Delete />
             </IconButton>
           )}

src/pipelines/pipeline-list.tsx

@@ -7,10 +7,14 @@ import {
   ListItemText,
   ListItemSecondaryAction,
   IconButton,
-} from "@material-ui/core";
+  Menu,
-import { FC, MouseEventHandler, useMemo } from "react";
+  MenuItem,
+  PopoverPosition,
+} from "@mui/material";
+import { FC, MouseEventHandler, useMemo, useState } from "react";
 import { Pipeline, Project } from "../generated/graphql";
-import { CallMerge, Edit } from "@material-ui/icons";
+import { CallMerge, Edit } from "@mui/icons-material";
+import { any, values } from "ramda";
 
 interface Props {
   projectId: string;
@@ -42,18 +46,49 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
       project: data?.project,
     }));
   }, [data]);
+
+  const [contextMenu, setContextMenu] = useState<PopoverPosition>();
+
+  const handleContextMenu: MouseEventHandler = (event) => {
+    event.preventDefault();
+    setContextMenu({ top: event.clientY - 4, left: event.clientX - 2 });
+  };
+
+  const handleClose = () => {
+    setContextMenu(undefined);
+  };
+
   return (
+    <>
       <List>
         {pipelines?.map((pipeline) => (
           <Link
             name="pipeline-commits"
             params={{ pipelineId: pipeline.id, projectId: projectId }}
             key={pipeline.id}
+            onContextMenu={handleContextMenu}
           >
             <Item pipeline={pipeline} />
           </Link>
         ))}
       </List>
+      <Menu
+        keepMounted
+        open={!!contextMenu}
+        onClose={handleClose}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          contextMenu && any(Boolean, values(contextMenu))
+            ? contextMenu
+            : undefined
+        }
+      >
+        <MenuItem onClick={handleClose}>Copy</MenuItem>
+        <MenuItem onClick={handleClose}>Print</MenuItem>
+        <MenuItem onClick={handleClose}>Highlight</MenuItem>
+        <MenuItem onClick={handleClose}>Email</MenuItem>
+      </Menu>
+    </>
   );
 };
 
@@ -80,7 +115,7 @@ const Item = ({ pipeline }: { pipeline: Pipeline }) => {
         }
       />
       <ListItemSecondaryAction>
-        <IconButton edge="end" aria-label="edit" onClick={modify}>
+        <IconButton edge="end" aria-label="edit" onClick={modify} size="large">
           <Edit />
         </IconButton>
       </ListItemSecondaryAction>

src/projects/project-detail.tsx

@@ -1,20 +1,13 @@
 import { Project } from "../generated/graphql";
 import React, { FC, Fragment } from "react";
-import {
+import { IconButton, Grid, Paper, Portal, Typography, Box } from "@mui/material";
-  IconButton,
+import makeStyles from '@mui/styles/makeStyles';
-  Grid,
-  makeStyles,
-  Paper,
-  Portal,
-  Typography,
-  Box,
-} from "@material-ui/core";
 import { useHeaderContainer } from "../layouts";
 import { PipelineList } from "../pipelines/pipeline-list";
-import { Edit } from '@material-ui/icons';
+import { Edit } from '@mui/icons-material';
 import { Link } from '@curi/react-dom';
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
-import { AddBox } from "@material-ui/icons";
+import { AddBox } from "@mui/icons-material";
 
 interface Props {
   project: Project;
@@ -45,7 +38,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
           container
           spacing={3}
           direction="row"
-          justify="space-between"
+          justifyContent="space-between"
           alignItems="center"
         >
           <Grid item>
@@ -58,7 +51,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
           </Grid>
           <Grid item>
             <Link name="edit-project" params={{ projectId: project.id }}>
-              <IconButton color="inherit">{<Edit />}</IconButton>
+              <IconButton color="inherit" size="large">{<Edit />}</IconButton>
             </Link>
           </Grid>
         </Grid>

src/projects/project-editor.tsx

@@ -1,14 +1,6 @@
 import { gql, Reference, useMutation } from "@apollo/client";
-import {
+import { Button, LinearProgress, Paper, Portal, Typography, Grid, IconButton } from "@mui/material";
-  Button,
+import makeStyles from '@mui/styles/makeStyles';
-  LinearProgress,
-  makeStyles,
-  Paper,
-  Portal,
-  Typography,
-  Grid,
-  IconButton,
-} from "@material-ui/core";
 import { Form, Formik, Field, FormikHelpers } from "formik";
 import { TextField } from "formik-material-ui";
 import { not } from "ramda";
@@ -17,7 +9,7 @@ import { Project } from "../generated/graphql";
 import * as Yup from "yup";
 import { useRouter } from "@curi/react-dom";
 import { useHeaderContainer } from "../layouts";
-import DeleteIcon from "@material-ui/icons/Delete";
+import DeleteIcon from "@mui/icons-material/Delete";
 import { useConfirm } from "material-ui-confirm";
 import { useSnackbar } from "notistack";
 
@@ -178,16 +170,12 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
   return (
     <Paper className={classes.root}>
       <Portal container={headerContainer}>
-        <Grid container justify="space-between" alignItems="center">
+        <Grid container justifyContent="space-between" alignItems="center">
           <Typography variant="h6" component="h1">
             {isCreate ? "Create" : "Edit"} Project
           </Typography>
           {isCreate ? null : (
-            <IconButton
+            <IconButton color="inherit" onClick={handleDelete} disabled={deleting} size="large">
-              color="inherit"
-              onClick={handleDelete}
-              disabled={deleting}
-            >
               <DeleteIcon />
             </IconButton>
           )}

src/projects/project-panel.tsx

@@ -1,11 +1,12 @@
 import { gql, useQuery } from "@apollo/client";
 import { Link } from "@curi/react-dom";
-import { Box, List, ListItem, makeStyles, Theme } from "@material-ui/core";
+import { Box, List, ListItem, Theme } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { FC } from "react";
 import { Project } from "../generated/graphql";
-import { ListItemText } from "@material-ui/core";
+import { ListItemText } from "@mui/material";
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
-import { AddBox } from "@material-ui/icons";
+import { AddBox } from "@mui/icons-material";
 import { ActiveLink } from "../commons/route/active-link";
 
 const PROJECTS = gql`