webui: upgrade Material UI

webui/package.json

@@ -5,10 +5,12 @@
   "dependencies": {
     "@apollo/client": "^3.5.9",
     "@arrows/composition": "^1.2.2",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@material-ui/styles": "^4.10.0",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.4.2",
+    "@mui/lab": "^5.0.0-alpha.70",
+    "@mui/material": "^5.4.3",
+    "@mui/styles": "^5.4.2",
     "@types/node": "^17.0.18",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",

webui/src/apollo.ts

@@ -6,6 +6,12 @@ const client = new ApolloClient({
   uri: '/graphql',
   cache: new InMemoryCache({
     possibleTypes: introspectionResult.possibleTypes,
+    typePolicies: {
+      // TODO: For now, we only query the default repository, so consider it as a singleton
+      Repository: {
+        keyFields: [],
+      },
+    },
   }),
 });
 

webui/src/components/Author.tsx

@@ -1,9 +1,8 @@
+import MAvatar from '@mui/material/Avatar';
+import Link from '@mui/material/Link';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
 import { Link as RouterLink } from 'react-router-dom';
 
-import MAvatar from '@material-ui/core/Avatar';
-import Link from '@material-ui/core/Link';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-
 import { AuthoredFragment } from '../graphql/fragments.generated';
 
 type Props = AuthoredFragment & {
@@ -14,7 +13,12 @@ type Props = AuthoredFragment & {
 const Author = ({ author, ...props }: Props) => {
   return (
     <Tooltip title={`Goto the ${author.displayName}'s profile.`}>
-      <Link {...props} component={RouterLink} to={`/user/${author.id}`}>
+      <Link
+        {...props}
+        component={RouterLink}
+        to={`/user/${author.id}`}
+        underline="hover"
+      >
         {author.displayName}
       </Link>
     </Tooltip>

webui/src/components/BackToListButton.tsx

@@ -1,9 +1,8 @@
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import Button from '@mui/material/Button';
+import makeStyles from '@mui/styles/makeStyles';
 import { Link } from 'react-router-dom';
 
-import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-
 const useStyles = makeStyles((theme) => ({
   backButton: {
     position: 'sticky',

webui/src/components/BugTitleForm/BugTitleForm.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react';
+import { Button, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Button, makeStyles, Typography } from '@material-ui/core';
-
 import { TimelineDocument } from '../../pages/bug/TimelineQuery.generated';
 import IfLoggedIn from '../IfLoggedIn/IfLoggedIn';
 import Author from 'src/components/Author';
@@ -71,11 +71,11 @@ function BugTitleForm({ bug }: Props) {
   const [setTitle, { loading, error }] = useSetTitleMutation();
   const [issueTitle, setIssueTitle] = useState(bug.title);
   const classes = useStyles();
-  let issueTitleInput: any;
+  const issueTitleInput = useRef<HTMLInputElement>();
 
   function isFormValid() {
-    if (issueTitleInput) {
-      return issueTitleInput.value.length > 0;
+    if (issueTitleInput.current) {
+      return issueTitleInput.current.value.length > 0;
     } else {
       return false;
     }
@@ -83,7 +83,7 @@ function BugTitleForm({ bug }: Props) {
 
   function submitNewTitle() {
     if (!isFormValid()) return;
-    if (bug.title === issueTitleInput.value) {
+    if (bug.title === issueTitleInput.current?.value) {
       cancelChange();
       return;
     }
@@ -91,7 +91,7 @@ function BugTitleForm({ bug }: Props) {
       variables: {
         input: {
           prefix: bug.id,
-          title: issueTitleInput.value,
+          title: issueTitleInput.current!!.value,
         },
       },
       refetchQueries: [
@@ -117,9 +117,7 @@ function BugTitleForm({ bug }: Props) {
     return (
       <form className={classes.headerTitle}>
         <BugTitleInput
-          inputRef={(node) => {
-            issueTitleInput = node;
-          }}
+          inputRef={issueTitleInput}
           label="Title"
           variant="outlined"
           fullWidth

webui/src/components/BugTitleForm/BugTitleInput.tsx

@@ -1,5 +1,7 @@
-import { createStyles, fade, withStyles, TextField } from '@material-ui/core';
-import { Theme } from '@material-ui/core/styles';
+import { alpha, TextField } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
 
 const BugTitleInput = withStyles((theme: Theme) =>
   createStyles({
@@ -14,7 +16,7 @@ const BugTitleInput = withStyles((theme: Theme) =>
       },
       '& input:valid:hover + fieldset': {
         color: theme.palette.text.primary,
-        borderColor: fade(theme.palette.divider, 0.3),
+        borderColor: alpha(theme.palette.divider, 0.3),
         borderWidth: 2,
       },
       '& input:valid:focus + fieldset': {

webui/src/components/CloseBugButton/index.tsx

@@ -1,20 +1,12 @@
-import Button from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { BugFragment } from 'src/pages/bug/Bug.generated';
 import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
 
 import { useCloseBugMutation } from './CloseBug.generated';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  closeIssueIcon: {
-    color: theme.palette.secondary.dark,
-    paddingTop: '0.1rem',
-  },
-}));
-
 interface Props {
   bug: BugFragment;
   disabled?: boolean;
@@ -22,7 +14,6 @@ interface Props {
 
 function CloseBugButton({ bug, disabled }: Props) {
   const [closeBug, { loading, error }] = useCloseBugMutation();
-  const classes = useStyles();
 
   function closeBugAction() {
     closeBug({
@@ -54,7 +45,7 @@ function CloseBugButton({ bug, disabled }: Props) {
         variant="contained"
         onClick={() => closeBugAction()}
         disabled={bug.status === 'CLOSED' || disabled}
-        startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
+        startIcon={<ErrorOutlineIcon />}
       >
         Close bug
       </Button>

webui/src/components/CloseBugWithCommentButton/index.tsx

@@ -1,20 +1,12 @@
-import Button from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { BugFragment } from 'src/pages/bug/Bug.generated';
 import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
 
 import { useAddCommentAndCloseBugMutation } from './CloseBugWithComment.generated';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  closeIssueIcon: {
-    color: theme.palette.secondary.dark,
-    paddingTop: '0.1rem',
-  },
-}));
-
 interface Props {
   bug: BugFragment;
   comment: string;
@@ -24,7 +16,6 @@ interface Props {
 function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
   const [addCommentAndCloseBug, { loading, error }] =
     useAddCommentAndCloseBugMutation();
-  const classes = useStyles();
 
   function addCommentAndCloseBugAction() {
     addCommentAndCloseBug({
@@ -60,7 +51,7 @@ function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
       <Button
         variant="contained"
         onClick={() => addCommentAndCloseBugAction()}
-        startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
+        startIcon={<ErrorOutlineIcon />}
       >
         Close bug with comment
       </Button>

webui/src/components/CommentInput/CommentInput.tsx

@@ -1,11 +1,10 @@
-import { useState, useEffect } from 'react';
+import { Typography } from '@mui/material';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import TextField from '@mui/material/TextField';
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
-
-import { Typography } from '@material-ui/core';
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import TextField from '@material-ui/core/TextField';
-import { makeStyles } from '@material-ui/core/styles';
+import { useState, useEffect } from 'react';
 
 import Content from '../Content';
 

webui/src/components/Content/AnchorTag.tsx

@@ -1,8 +1,7 @@
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
-import { makeStyles } from '@material-ui/core/styles';
-
 const useStyles = makeStyles((theme) => ({
   tag: {
     color: theme.palette.text.secondary,

webui/src/components/Content/BlockQuoteTag.tsx

@@ -1,7 +1,6 @@
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
 
-import { makeStyles } from '@material-ui/core/styles';
-
 const useStyles = makeStyles((theme) => ({
   tag: {
     color: theme.palette.text.secondary,

webui/src/components/Content/ImageTag.tsx

@@ -1,7 +1,6 @@
+import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 
-import { makeStyles } from '@material-ui/styles';
-
 const useStyles = makeStyles({
   tag: {
     maxWidth: '100%',

webui/src/components/Content/PreTag.tsx

@@ -1,7 +1,6 @@
+import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 
-import { makeStyles } from '@material-ui/styles';
-
 const useStyles = makeStyles({
   tag: {
     maxWidth: '100%',

webui/src/components/Date.tsx

@@ -1,8 +1,7 @@
+import Tooltip from '@mui/material/Tooltip/Tooltip';
 import moment from 'moment';
 import Moment from 'react-moment';
 
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-
 const HOUR = 1000 * 3600;
 const DAY = 24 * HOUR;
 const WEEK = 7 * DAY;
@@ -10,7 +9,9 @@ const WEEK = 7 * DAY;
 type Props = { date: string };
 const Date = ({ date }: Props) => (
   <Tooltip title={moment(date).format('LLLL')}>
-    <Moment date={date} format="on ll" fromNowDuring={WEEK} />
+    <span>
+      <Moment date={date} format="on ll" fromNowDuring={WEEK} />
+    </span>
   </Tooltip>
 );
 

webui/src/components/Header/Header.tsx

@@ -1,12 +1,12 @@
+import AppBar from '@mui/material/AppBar';
+import Tab, { TabProps } from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
+import { alpha } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { Link, useLocation } from 'react-router-dom';
 
-import AppBar from '@material-ui/core/AppBar';
-import Tab, { TabProps } from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import Toolbar from '@material-ui/core/Toolbar';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import { fade, makeStyles } from '@material-ui/core/styles';
-
 import CurrentIdentity from '../Identity/CurrentIdentity';
 import { LightSwitch } from '../Themer';
 
@@ -30,7 +30,7 @@ const useStyles = makeStyles((theme) => ({
   },
   lightSwitch: {
     marginRight: '20px',
-    color: fade(theme.palette.primary.contrastText, 0.5),
+    color: alpha(theme.palette.primary.contrastText, 0.5),
   },
   logo: {
     height: '42px',

webui/src/components/Header/index.tsx

@@ -1,7 +1,6 @@
+import CssBaseline from '@mui/material/CssBaseline';
 import * as React from 'react';
 
-import CssBaseline from '@material-ui/core/CssBaseline';
-
 import Header from './Header';
 
 type Props = { children: React.ReactNode };

webui/src/components/Identity/CurrentIdentity.tsx

@@ -1,6 +1,4 @@
-import { useState, useRef } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-
+import LockIcon from '@mui/icons-material/Lock';
 import {
   Button,
   ClickAwayListener,
@@ -10,10 +8,11 @@ import {
   MenuList,
   Paper,
   Popper,
-} from '@material-ui/core';
-import Avatar from '@material-ui/core/Avatar';
-import { makeStyles } from '@material-ui/core/styles';
-import LockIcon from '@material-ui/icons/Lock';
+} from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import makeStyles from '@mui/styles/makeStyles';
+import { useState, useRef } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
 
 import { useCurrentIdentityQuery } from './CurrentIdentity.generated';
 
@@ -97,6 +96,7 @@ const CurrentIdentity = () => {
                       className={classes.profileLink}
                       component={RouterLink}
                       to={`/user/${user.id}`}
+                      underline="hover"
                     >
                       Open profile
                     </Link>

webui/src/components/Label.tsx

@@ -1,9 +1,6 @@
-import { Chip } from '@material-ui/core';
-import { common } from '@material-ui/core/colors';
-import {
-  darken,
-  getContrastRatio,
-} from '@material-ui/core/styles/colorManipulator';
+import { Chip } from '@mui/material';
+import { common } from '@mui/material/colors';
+import { darken, getContrastRatio } from '@mui/material/styles';
 
 import { Color } from '../gqlTypes';
 import { LabelFragment } from '../graphql/fragments.generated';

webui/src/components/ReopenBugButton/index.tsx

@@ -1,5 +1,5 @@
-import Button from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { BugFragment } from 'src/pages/bug/Bug.generated';
 import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';

webui/src/components/ReopenBugWithCommentButton/index.tsx

@@ -1,5 +1,5 @@
-import Button from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { BugFragment } from 'src/pages/bug/Bug.generated';
 import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';

webui/src/components/Themer.tsx

@@ -1,11 +1,15 @@
-import { createContext, useContext, useState } from 'react';
+import { NightsStayRounded, WbSunnyRounded } from '@mui/icons-material';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { Theme } from '@mui/material/styles';
 import * as React from 'react';
+import { createContext, useContext, useState } from 'react';
 
-import { ThemeProvider } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import { Theme } from '@material-ui/core/styles';
-import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons';
+declare module '@mui/styles/defaultTheme' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
 
 const ThemeContext = createContext({
   toggleMode: () => {},
@@ -26,6 +30,7 @@ const LightSwitch = ({ className }: LightSwitchProps) => {
         onClick={toggleMode}
         aria-label={description}
         className={className}
+        size="large"
       >
         {mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />}
       </IconButton>
@@ -53,7 +58,9 @@ const Themer = ({ children, lightTheme, darkTheme }: Props) => {
 
   return (
     <ThemeContext.Provider value={{ toggleMode: toggleMode, mode: mode }}>
-      <ThemeProvider theme={preferedTheme}>{children}</ThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={preferedTheme}>{children}</ThemeProvider>
+      </StyledEngineProvider>
     </ThemeContext.Provider>
   );
 };

webui/src/pages/bug/Bug.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm';
 import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';

webui/src/pages/bug/BugQuery.tsx

@@ -1,8 +1,7 @@
+import CircularProgress from '@mui/material/CircularProgress';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
-import CircularProgress from '@material-ui/core/CircularProgress';
-
 import NotFoundPage from '../notfound/NotFoundPage';
 
 import Bug from './Bug';

webui/src/pages/bug/CommentForm.tsx

@@ -1,9 +1,9 @@
-import { useState, useRef } from 'react';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import { Theme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
-
-import Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { useState, useRef } from 'react';
 
 import CommentInput from '../../components/CommentInput/CommentInput';
 import CloseBugButton from 'src/components/CloseBugButton';

webui/src/pages/bug/EditCommentForm.tsx

@@ -1,9 +1,9 @@
-import { useState, useRef } from 'react';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import { Theme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
-
-import Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { useState, useRef } from 'react';
 
 import CommentInput from '../../components/CommentInput/CommentInput';
 

webui/src/pages/bug/LabelChange.tsx

@@ -1,5 +1,5 @@
-import { Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Author from 'src/components/Author';
 import Date from 'src/components/Date';

webui/src/pages/bug/Message.tsx

@@ -1,12 +1,11 @@
-import { useState } from 'react';
+import EditIcon from '@mui/icons-material/Edit';
+import HistoryIcon from '@mui/icons-material/History';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
-
-import IconButton from '@material-ui/core/IconButton';
-import Paper from '@material-ui/core/Paper';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import { makeStyles } from '@material-ui/core/styles';
-import EditIcon from '@material-ui/icons/Edit';
-import HistoryIcon from '@material-ui/icons/History';
+import { useState } from 'react';
 
 import Author, { Avatar } from 'src/components/Author';
 import Content from 'src/components/Content';
@@ -98,6 +97,7 @@ function HistoryMenuToggleButton({ bugId, commentId }: HistBtnProps) {
         aria-haspopup="true"
         onClick={handleClickOpen}
         className={classes.headerActions}
+        size="large"
       >
         <HistoryIcon />
       </IconButton>
@@ -150,6 +150,7 @@ function Message({ bug, op }: Props) {
                   className={classes.headerActions}
                   aria-label="edit message"
                   onClick={() => editComment(comment.id)}
+                  size="large"
                 >
                   <EditIcon />
                 </IconButton>

webui/src/pages/bug/MessageHistoryDialog.tsx

@@ -1,27 +1,24 @@
+import CloseIcon from '@mui/icons-material/Close';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MuiAccordion from '@mui/material/Accordion';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import CircularProgress from '@mui/material/CircularProgress';
+import Dialog from '@mui/material/Dialog';
+import MuiDialogContent from '@mui/material/DialogContent';
+import MuiDialogTitle from '@mui/material/DialogTitle';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
+import Typography from '@mui/material/Typography';
+import { Theme } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
 import moment from 'moment';
 import * as React from 'react';
 import Moment from 'react-moment';
 
-import MuiAccordion from '@material-ui/core/Accordion';
-import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
-import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Dialog from '@material-ui/core/Dialog';
-import MuiDialogContent from '@material-ui/core/DialogContent';
-import MuiDialogTitle from '@material-ui/core/DialogTitle';
-import Grid from '@material-ui/core/Grid';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import Typography from '@material-ui/core/Typography';
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from '@material-ui/core/styles';
-import CloseIcon from '@material-ui/icons/Close';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-
 import Content from '../../components/Content';
 
 import { AddCommentFragment } from './MessageCommentFragment.generated';
@@ -50,13 +47,14 @@ export interface DialogTitleProps extends WithStyles<typeof styles> {
 const DialogTitle = withStyles(styles)((props: DialogTitleProps) => {
   const { children, classes, onClose, ...other } = props;
   return (
-    <MuiDialogTitle disableTypography className={classes.root} {...other}>
+    <MuiDialogTitle className={classes.root} {...other}>
       <Typography variant="h6">{children}</Typography>
       {onClose ? (
         <IconButton
           aria-label="close"
           className={classes.closeButton}
           onClick={onClose}
+          size="large"
         >
           <CloseIcon />
         </IconButton>
@@ -141,7 +139,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
           Loading...
         </DialogTitle>
         <DialogContent dividers>
-          <Grid container justify="center">
+          <Grid container justifyContent="center">
             <CircularProgress />
           </Grid>
         </DialogContent>

webui/src/pages/bug/SetStatus.tsx

@@ -1,5 +1,5 @@
-import { Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { Status } from '../../gqlTypes';
 import Author from 'src/components/Author';

webui/src/pages/bug/SetTitle.tsx

@@ -1,5 +1,5 @@
-import { Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Author from 'src/components/Author';
 import Date from 'src/components/Date';

webui/src/pages/bug/Timeline.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { BugFragment } from './Bug.generated';
 import LabelChange from './LabelChange';

webui/src/pages/bug/TimelineQuery.tsx

@@ -1,4 +1,4 @@
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { BugFragment } from './Bug.generated';
 import Timeline from './Timeline';

webui/src/pages/bug/labels/LabelMenu.tsx

@@ -1,14 +1,14 @@
-import { useEffect, useRef, useState } from 'react';
+import CheckIcon from '@mui/icons-material/Check';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { IconButton } from '@mui/material';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import { darken } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import withStyles from '@mui/styles/withStyles';
 import * as React from 'react';
-
-import { IconButton } from '@material-ui/core';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import TextField from '@material-ui/core/TextField';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import { darken } from '@material-ui/core/styles/colorManipulator';
-import CheckIcon from '@material-ui/icons/Check';
-import SettingsIcon from '@material-ui/icons/Settings';
+import { useEffect, useRef, useState } from 'react';
 
 import { Color } from '../../../gqlTypes';
 import {
@@ -109,7 +109,7 @@ function FilterDropdown({
   const [open, setOpen] = useState(false);
   const [filter, setFilter] = useState<string>('');
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const searchRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
   const classes = useStyles({ active: false });
 
   useEffect(() => {
@@ -125,6 +125,7 @@ function FilterDropdown({
           onClick={() => setOpen(!open)}
           className={classes.gearBtn}
           disableRipple
+          size="large"
         >
           <SettingsIcon fontSize={'small'} />
         </IconButton>
@@ -132,8 +133,6 @@ function FilterDropdown({
 
       <Menu
         className={classes.menu}
-        getContentAnchorEl={null}
-        ref={searchRef}
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'left',
@@ -147,7 +146,6 @@ function FilterDropdown({
           setOpen(false);
           onClose();
         }}
-        onExited={() => setFilter('')}
         anchorEl={buttonRef.current}
         PaperProps={{
           style: {
@@ -155,9 +153,13 @@ function FilterDropdown({
             width: '25ch',
           },
         }}
+        TransitionProps={{
+          onExited: () => setFilter(''),
+        }}
       >
         {hasFilter && (
           <CustomTextField
+            inputRef={searchRef}
             onChange={(e) => {
               const { value } = e.target;
               setFilter(value);

webui/src/pages/identity/BugList.tsx

@@ -1,6 +1,6 @@
-import { Card, Divider, Link, Typography } from '@material-ui/core';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles } from '@material-ui/core/styles';
+import { Card, Divider, Link, Typography } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Date from '../../components/Date';
 
@@ -47,6 +47,7 @@ function BugList({ id }: Props) {
                 className={classes.bugLink}
                 href={'/bug/' + bug.id}
                 color={'inherit'}
+                underline="hover"
               >
                 {bug.title}
               </Link>

webui/src/pages/identity/Identity.tsx

@@ -1,13 +1,12 @@
+import InfoIcon from '@mui/icons-material/Info';
+import MailOutlineIcon from '@mui/icons-material/MailOutline';
+import { Link, Paper, Typography } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import CircularProgress from '@mui/material/CircularProgress';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
 import { Link as RouterLink } from 'react-router-dom';
 
-import { Link, Paper, Typography } from '@material-ui/core';
-import Avatar from '@material-ui/core/Avatar';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
-import InfoIcon from '@material-ui/icons/Info';
-import MailOutlineIcon from '@material-ui/icons/MailOutline';
-
 import { IdentityFragment } from '../../components/Identity/IdentityFragment.generated';
 
 import { useGetUserStatisticQuery } from './GetUserStatistic.generated';
@@ -98,7 +97,11 @@ const Identity = ({ identity }: Props) => {
                   }}
                 >
                   <MailOutlineIcon />
-                  <Link href={'mailto:' + user?.email} color={'inherit'}>
+                  <Link
+                    href={'mailto:' + user?.email}
+                    color={'inherit'}
+                    underline="hover"
+                  >
                     {user?.email}
                   </Link>
                 </Typography>
@@ -112,6 +115,7 @@ const Identity = ({ identity }: Props) => {
                 component={RouterLink}
                 to={`/?q=author%3A${user?.id}+sort%3Acreation`}
                 color={'inherit'}
+                underline="hover"
               >
                 <Typography variant="subtitle1">
                   Created {authoredCount} bugs.
@@ -121,6 +125,7 @@ const Identity = ({ identity }: Props) => {
                 component={RouterLink}
                 to={`/?q=participant%3A${user?.id}+sort%3Acreation`}
                 color={'inherit'}
+                underline="hover"
               >
                 <Typography variant="subtitle1">
                   Participated to {participatedCount} bugs.
@@ -130,6 +135,7 @@ const Identity = ({ identity }: Props) => {
                 component={RouterLink}
                 to={`/?q=actor%3A${user?.id}+sort%3Acreation`}
                 color={'inherit'}
+                underline="hover"
               >
                 <Typography variant="subtitle1">
                   Interacted with {actionCount} bugs.

webui/src/pages/identity/IdentityQuery.tsx

@@ -9,7 +9,7 @@ import Identity from './Identity';
 
 const UserQuery: React.FC = () => {
   const params = useParams<'id'>();
-  if (params.id === undefined) throw new Error();
+  if (params.id === undefined) throw new Error('missing route parameters');
 
   const { loading, error, data } = useGetUserByIdQuery({
     variables: { userId: params.id },

webui/src/pages/list/BugRow.tsx

@@ -1,14 +1,13 @@
+import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
+import CommentOutlinedIcon from '@mui/icons-material/CommentOutlined';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import TableCell from '@mui/material/TableCell/TableCell';
+import TableRow from '@mui/material/TableRow/TableRow';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
-import TableCell from '@material-ui/core/TableCell/TableCell';
-import TableRow from '@material-ui/core/TableRow/TableRow';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import { makeStyles } from '@material-ui/core/styles';
-import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
-import CommentOutlinedIcon from '@material-ui/icons/CommentOutlined';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
-
 import Author from 'src/components/Author';
 import Date from 'src/components/Date';
 import Label from 'src/components/Label';

webui/src/pages/list/Filter.tsx

@@ -1,17 +1,17 @@
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import CheckIcon from '@mui/icons-material/Check';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import TextField from '@mui/material/TextField';
+import { darken } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import withStyles from '@mui/styles/withStyles';
 import clsx from 'clsx';
-import { useRef, useState, useEffect } from 'react';
 import * as React from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { Location, Link } from 'react-router-dom';
 
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
-import TextField from '@material-ui/core/TextField';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import { darken } from '@material-ui/core/styles/colorManipulator';
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
-import CheckIcon from '@material-ui/icons/Check';
-
 import { Color } from '../../gqlTypes';
 
 const CustomTextField = withStyles((theme) => ({
@@ -153,7 +153,7 @@ function FilterDropdown({
   const [open, setOpen] = useState(false);
   const [filter, setFilter] = useState<string>('');
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const searchRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
   const classes = useStyles({ active: false });
 
   useEffect(() => {
@@ -180,8 +180,6 @@ function FilterDropdown({
       </button>
       <Menu
         className={classes.labelMenu}
-        getContentAnchorEl={null}
-        ref={searchRef}
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'left',
@@ -202,6 +200,7 @@ function FilterDropdown({
       >
         {hasFilter && (
           <CustomTextField
+            inputRef={searchRef}
             onChange={(e) => {
               const { value } = e.target;
               setFilter(value);

webui/src/pages/list/FilterToolbar.tsx

@@ -1,12 +1,11 @@
 import { pipe } from '@arrows/composition';
+import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import Toolbar from '@mui/material/Toolbar';
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
 import { Location } from 'react-router-dom';
 
-import Toolbar from '@material-ui/core/Toolbar';
-import { makeStyles } from '@material-ui/core/styles';
-import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
-
 import {
   Filter,
   FilterDropdown,

webui/src/pages/list/List.tsx

@@ -1,5 +1,5 @@
-import Table from '@material-ui/core/Table/Table';
-import TableBody from '@material-ui/core/TableBody/TableBody';
+import Table from '@mui/material/Table/Table';
+import TableBody from '@mui/material/TableBody/TableBody';
 
 import BugRow from './BugRow';
 import { BugListFragment } from './ListQuery.generated';

webui/src/pages/list/ListQuery.tsx

@@ -1,20 +1,20 @@
 import { ApolloError } from '@apollo/client';
 import { pipe } from '@arrows/composition';
-import { useState, useEffect, useRef } from 'react';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import { Button, FormControl, Menu, MenuItem } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import InputBase from '@mui/material/InputBase';
+import Paper from '@mui/material/Paper';
+import Skeleton from '@mui/material/Skeleton';
+import { Theme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useLocation, useNavigate, Link } from 'react-router-dom';
 
-import { Button, FormControl, Menu, MenuItem } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton';
-import InputBase from '@material-ui/core/InputBase';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
-import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
-import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
-import Skeleton from '@material-ui/lab/Skeleton';
-
 import { useCurrentIdentityQuery } from '../../components/Identity/CurrentIdentity.generated';
 import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 
@@ -88,7 +88,7 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
     ...theme.typography.h5,
     padding: theme.spacing(8),
     textAlign: 'center',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.primary,
     borderBottomColor: theme.palette.divider,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
@@ -141,7 +141,7 @@ const Placeholder: React.FC<PlaceholderProps> = ({
         <div key={i} className={classes.placeholderRow}>
           <Skeleton
             className={classes.placeholderRowStatus}
-            variant="circle"
+            variant="circular"
             width={20}
             height={20}
           />
@@ -327,7 +327,6 @@ function ListQuery() {
             <Menu
               open={filterMenuIsOpen}
               onClose={() => setFilterMenuIsOpen(false)}
-              getContentAnchorEl={null}
               anchorEl={filterButtonRef.current}
               anchorOrigin={{
                 vertical: 'bottom',
@@ -382,21 +381,21 @@ function ListQuery() {
       {content}
       <div className={classes.pagination}>
         {previousPage ? (
-          <IconButton component={Link} to={previousPage}>
+          <IconButton component={Link} to={previousPage} size="large">
             <KeyboardArrowLeft />
           </IconButton>
         ) : (
-          <IconButton disabled>
+          <IconButton disabled size="large">
             <KeyboardArrowLeft />
           </IconButton>
         )}
         <div>{loading ? 'Loading' : `Total: ${count}`}</div>
         {nextPage ? (
-          <IconButton component={Link} to={nextPage}>
+          <IconButton component={Link} to={nextPage} size="large">
             <KeyboardArrowRight />
           </IconButton>
         ) : (
-          <IconButton disabled>
+          <IconButton disabled size="large">
             <KeyboardArrowRight />
           </IconButton>
         )}

webui/src/pages/new/NewBugPage.tsx

@@ -1,9 +1,9 @@
-import { FormEvent, useState } from 'react';
+import { Button, Paper } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import { FormEvent, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { Button, Paper } from '@material-ui/core';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-
 import BugTitleInput from '../../components/BugTitleForm/BugTitleInput';
 import CommentInput from '../../components/CommentInput/CommentInput';
 
@@ -48,8 +48,8 @@ function NewBugPage() {
   const [issueComment, setIssueComment] = useState('');
   const classes = useStyles();
 
-  let issueTitleInput: any;
-  let navigate = useNavigate();
+  const issueTitleInput = useRef<HTMLInputElement>(null);
+  const navigate = useNavigate();
 
   function submitNewIssue(e: FormEvent) {
     e.preventDefault();
@@ -65,7 +65,10 @@ function NewBugPage() {
       const id = data.data?.newBug.bug.id;
       navigate('/bug/' + id);
     });
-    issueTitleInput.value = '';
+
+    if (issueTitleInput.current) {
+      issueTitleInput.current.value = '';
+    }
   }
 
   function isFormValid() {
@@ -79,9 +82,7 @@ function NewBugPage() {
     <Paper className={classes.main}>
       <form className={classes.form} onSubmit={submitNewIssue}>
         <BugTitleInput
-          inputRef={(node) => {
-            issueTitleInput = node;
-          }}
+          inputRef={issueTitleInput}
           label="Title"
           variant="outlined"
           fullWidth

webui/src/pages/notfound/NotFoundPage.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 import BackToListButton from '../../components/BackToListButton';
 

webui/src/themes/DefaultDark.ts

@@ -1,8 +1,8 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@mui/material/styles';
 
-const defaultDarkTheme = createMuiTheme({
+const defaultDarkTheme = createTheme({
   palette: {
-    type: 'dark',
+    mode: 'dark',
     primary: {
       dark: '#263238',
       main: '#2a393e',

webui/src/themes/DefaultLight.ts

@@ -1,8 +1,8 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@mui/material/styles';
 
-const defaultLightTheme = createMuiTheme({
+const defaultLightTheme = createTheme({
   palette: {
-    type: 'light',
+    mode: 'light',
     primary: {
       dark: '#263238',
       main: '#5a6b73',