migrate LangSelect to Mui 5 (#86)

src/components/navbar/action/LangSelect.tsx

@@ -6,8 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
-import createStyles from '@mui/styles/createStyles';
 import Button from '@mui/material/Button';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -21,13 +19,6 @@ import ListItem from '@mui/material/ListItem';
 import { langCodeToName } from 'util/language';
 import cloneObject from 'util/cloneObject';
 
-const useStyles = makeStyles(() => createStyles({
-    paper: {
-        maxHeight: 435,
-        width: '80%',
-    },
-}));
-
 function removeAll(firstList: any[], secondList: any[]) {
     secondList.forEach((item) => {
         const index = firstList.indexOf(item);
@@ -54,7 +45,6 @@ export default function LangSelect(props: IProps) {
     const [mShownLangs, setMShownLangs] = useState(
         removeAll(cloneObject(shownLangs), forcedLangs!),
     );
-    const classes = useStyles();
     const [open, setOpen] = useState<boolean>(false);
 
     const handleCancel = () => {
@@ -90,12 +80,17 @@ export default function LangSelect(props: IProps) {
                 <FilterListIcon />
             </IconButton>
             <Dialog
-                classes={classes}
+                sx={{
+                    '.MuiDialog-paper': {
+                        maxHeight: 435,
+                        width: '80%',
+                    },
+                }}
                 maxWidth="xs"
                 open={open}
             >
                 <DialogTitle>Enabled Languages</DialogTitle>
-                <DialogContent dividers style={{ padding: 0 }}>
+                <DialogContent dividers sx={{ padding: 0 }}>
                     <List>
                         {allLangs.map((lang) => (
                             <ListItem key={lang}>