Merge branch 'migrate/mui-v5' into develop

menu/src/App.css

@@ -1,7 +1,6 @@
 .App {
   height: 100%;
   display: flex;
-  margin: 20px 40px;
   flex-direction: column;
   opacity: 0;
   transition: opacity 0.15s linear;

menu/src/components/IFramePage/IFramePage.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
-import { Box, makeStyles } from "@material-ui/core";
+import { Box } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { IFramePostData, useIFrameCtx } from "../../provider/IFrameProvider";
 import { debugLog } from "../../utils/debugLog";
 import { usePermissionsValue } from '../../state/permissions.state';

menu/src/components/MainPage/MainPageList.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Box, List, makeStyles, Theme } from "@material-ui/core";
+import { Box, List, Theme } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { MenuListItem, MenuListItemMulti } from "./MenuListItem";
 import {
   AccessibilityNew,
@@ -17,7 +18,7 @@ import {
   PermIdentity,
   Restore,
   Security,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 import { useKeyboardNavigation } from "../../hooks/useKeyboardNavigation";
 import { useDialogContext } from "../../provider/DialogProvider";
 import { fetchNui } from "../../utils/fetchNui";

menu/src/components/MainPage/MenuListItem.tsx

@@ -1,14 +1,8 @@
 import React, { memo, useEffect, useRef, useState } from "react";
-import {
-  ListItem,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
-  makeStyles,
-  Theme,
-} from "@material-ui/core";
+import { ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, Theme } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { useKeyboardNavigation } from "../../hooks/useKeyboardNavigation";
-import { Code } from "@material-ui/icons";
+import { Code } from "@mui/icons-material";
 import { fetchNui } from "../../utils/fetchNui";
 import { useTranslate } from "react-polyglot";
 import {

menu/src/components/MenuRoot.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Box, Collapse, makeStyles, Theme, Typography } from "@material-ui/core";
+import { Box, Collapse, Theme, Typography } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { PageTabs } from "./misc/PageTabs";
 import { MainPageList } from "./MainPage/MainPageList";
 import { PlayersPage } from "./PlayersPage/PlayersPage";

menu/src/components/PlayerModal/ErrorHandling/PlayerModalHasError.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { useTranslate } from "react-polyglot";
-import { Box, makeStyles, Typography } from "@material-ui/core";
-import { Error } from "@material-ui/icons";
+import { Box, Typography } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { Error } from "@mui/icons-material";
 
 const useStyles = makeStyles((theme) => ({
   root: {

menu/src/components/PlayerModal/PlayerModal.tsx

@@ -9,18 +9,18 @@ import {
   useTheme,
   IconButton,
   ListItemIcon,
-  makeStyles,
   Theme,
   CircularProgress,
-} from "@material-ui/core";
+} from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import {
   Close,
   Person,
   Block,
   FormatListBulleted,
   MenuBook,
   FlashOn,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 import { usePlayerModalContext } from "../../provider/PlayerModalProvider";
 import { useAssociatedPlayerValue } from "../../state/playerDetails.state";
 import { useTranslate } from "react-polyglot";
@@ -77,7 +77,7 @@ const PlayerModal: React.FC = () => {
     >
       <DialogTitle style={{ borderBottom: "1px solid rgba(221,221,221,0.54)" }}>
         [{assocPlayer.id}] {assocPlayer.username}
-        <IconButton onClick={handleClose} className={classes.closeButton}>
+        <IconButton onClick={handleClose} className={classes.closeButton} size="large">
           <Close />
         </IconButton>
       </DialogTitle>

menu/src/components/PlayerModal/Tabs/DialogActionView.tsx

@@ -1,13 +1,6 @@
 import React from "react";
-import {
-  Box,
-  Button,
-  DialogContent,
-  makeStyles,
-  Tooltip,
-  TooltipProps,
-  Typography,
-} from "@material-ui/core";
+import { Box, Button, DialogContent, Tooltip, TooltipProps, Typography } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import {
   useAssociatedPlayerValue,
   usePlayerDetailsValue,

menu/src/components/PlayerModal/Tabs/DialogBanView.tsx

@@ -5,32 +5,32 @@ import {
   DialogContent,
   MenuItem,
   TextField,
-  Typography
-} from '@material-ui/core';
+  Typography,
+} from "@mui/material";
 import { usePlayerDetailsValue } from "../../../state/playerDetails.state";
 import { fetchWebPipe } from "../../../utils/fetchWebPipe";
 import { useSnackbar } from "notistack";
 import { useTranslate } from "react-polyglot";
-import { usePlayerModalContext } from '../../../provider/PlayerModalProvider';
-import { translateAlertType, userHasPerm } from '../../../utils/miscUtils';
-import { usePermissionsValue } from '../../../state/permissions.state';
-import xss from 'xss'
-import { TxAdminAPIResp } from './DialogActionView';
+import { usePlayerModalContext } from "../../../provider/PlayerModalProvider";
+import { translateAlertType, userHasPerm } from "../../../utils/miscUtils";
+import { usePermissionsValue } from "../../../state/permissions.state";
+import xss from "xss";
+import { TxAdminAPIResp } from "./DialogActionView";
 import { DialogLoadError } from "./DialogLoadError";
 
 const DialogBanView: React.FC = () => {
   const assocPlayer = usePlayerDetailsValue();
 
-  const [reason, setReason] = useState('');
-  const [duration, setDuration] = useState('2 hours');
-  const [customDuration, setCustomDuration] = useState('hours')
-  const [customDurLength, setCustomDurLength] = useState('1');
+  const [reason, setReason] = useState("");
+  const [duration, setDuration] = useState("2 hours");
+  const [customDuration, setCustomDuration] = useState("hours");
+  const [customDurLength, setCustomDurLength] = useState("1");
   const t = useTranslate();
   const { enqueueSnackbar } = useSnackbar();
   const { showNoPerms } = usePlayerModalContext();
   const playerPerms = usePermissionsValue();
 
-  if(typeof assocPlayer !== 'object'){
+  if (typeof assocPlayer !== "object") {
     return <DialogLoadError />;
   }
 
@@ -52,76 +52,76 @@ const DialogBanView: React.FC = () => {
         },
       });
       // We need to clean the response as it contains html
-      const cleanedMsg = xss(resp.message)
+      const cleanedMsg = xss(resp.message);
 
       enqueueSnackbar(cleanedMsg, { variant: translateAlertType(resp.type) });
     } catch (e) {
-      enqueueSnackbar(t('nui_menu.common.error'), { variant: "error" });
-      console.error(e)
+      enqueueSnackbar(t("nui_menu.common.error"), { variant: "error" });
+      console.error(e);
     }
   };
 
   const banDurations = [
     {
-      value: '2 hours',
-      label: `2 ${t('nui_menu.player_modal.ban.hours')}`
+      value: "2 hours",
+      label: `2 ${t("nui_menu.player_modal.ban.hours")}`,
     },
     {
-      value: '8 hours',
-      label: `8 ${t('nui_menu.player_modal.ban.hours')}`
+      value: "8 hours",
+      label: `8 ${t("nui_menu.player_modal.ban.hours")}`,
     },
     {
-      value: '1 day',
-      label: `1 ${t('nui_menu.player_modal.ban.days')}`
+      value: "1 day",
+      label: `1 ${t("nui_menu.player_modal.ban.days")}`,
     },
     {
-      value: '2 days',
-      label: `2 ${t('nui_menu.player_modal.ban.days')}`
+      value: "2 days",
+      label: `2 ${t("nui_menu.player_modal.ban.days")}`,
     },
     {
-      value: '1 week',
-      label: `1 ${t('nui_menu.player_modal.ban.weeks')}`
+      value: "1 week",
+      label: `1 ${t("nui_menu.player_modal.ban.weeks")}`,
     },
     {
-      value: '2 weeks',
-      label: `2 ${t('nui_menu.player_modal.ban.weeks')}`
+      value: "2 weeks",
+      label: `2 ${t("nui_menu.player_modal.ban.weeks")}`,
     },
     {
-      value: 'permanent',
-      label: t('nui_menu.player_modal.ban.permanent')
+      value: "permanent",
+      label: t("nui_menu.player_modal.ban.permanent"),
     },
     {
-      value: 'custom',
-      label: t('nui_menu.player_modal.ban.custom')
-    }
-  ]
+      value: "custom",
+      label: t("nui_menu.player_modal.ban.custom"),
+    },
+  ];
 
   const customBanLength = [
     {
-      value: 'hours',
-      label: 'Hours'
+      value: "hours",
+      label: "Hours",
     },
     {
-      value: 'days',
-      label: 'Days'
+      value: "days",
+      label: "Days",
     },
     {
-      value: 'weeks',
-      label: 'Week'
+      value: "weeks",
+      label: "Week",
     },
     {
-      value: 'months',
-      label: 'Months'
-    }
-  ]
+      value: "months",
+      label: "Months",
+    },
+  ];
 
   return (
     <DialogContent>
-      <Typography variant="h6">Ban Player</Typography>
+      <Typography variant="h6" sx={{mb: 2}}>Ban Player</Typography>
       <form onSubmit={handleBan}>
         <TextField
           autoFocus
-          margin="dense"
+          size="small"
           id="name"
           label={t("nui_menu.player_modal.ban.reason_placeholder")}
           required
@@ -132,8 +132,10 @@ const DialogBanView: React.FC = () => {
           onChange={(e) => setReason(e.currentTarget.value)}
         />
         <TextField
-          margin="dense"
+          size="small"
           select
+          required
+          sx={{ mt: 2 }}
           label={t("nui_menu.player_modal.ban.duration_placeholder")}
           variant="outlined"
           value={duration}
@@ -154,16 +156,16 @@ const DialogBanView: React.FC = () => {
                 type="number"
                 placeholder="1"
                 variant="outlined"
-                margin="dense"
+                size="small"
                 value={customDurLength}
                 onChange={(e) => setCustomDurLength(e.target.value)}
               />
             </Box>
             <Box flexGrow={1}>
               <TextField
                 select
+                size="small"
                 variant="outlined"
-                margin="dense"
                 fullWidth
                 value={customDuration}
                 onChange={(e) => setCustomDuration(e.target.value)}
@@ -181,7 +183,7 @@ const DialogBanView: React.FC = () => {
           variant="contained"
           type="submit"
           color="primary"
-          style={{ marginTop: 2 }}
+          sx={{ mt: 2 }}
           onClick={handleBan}
         >
           Ban
@@ -191,5 +193,4 @@ const DialogBanView: React.FC = () => {
   );
 };
 
-
 export default DialogBanView;

menu/src/components/PlayerModal/Tabs/DialogBaseView.tsx

@@ -4,7 +4,7 @@ import DialogInfoView from "./DialogInfoView";
 import DialogIdView from "./DialogIdView";
 import DialogHistoryView from "./DialogHistoryView";
 import DialogBanView from "./DialogBanView";
-import { Box } from "@material-ui/core";
+import { Box } from "@mui/material";
 import { usePlayerModalContext } from "../../../provider/PlayerModalProvider";
 
 export const DialogBaseView: React.FC = () => {

menu/src/components/PlayerModal/Tabs/DialogHistoryView.tsx

@@ -1,11 +1,6 @@
 import React from "react";
-import {
-  Box,
-  makeStyles,
-  Theme,
-  Typography,
-  useTheme,
-} from "@material-ui/core";
+import { Box, Theme, Typography, useTheme } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { usePlayerDetailsValue } from "../../../state/playerDetails.state";
 import { useTranslate } from "react-polyglot";
 import { DialogLoadError } from "./DialogLoadError";

menu/src/components/PlayerModal/Tabs/DialogIdView.tsx

@@ -1,13 +1,8 @@
 import React from "react";
-import {
-  Box,
-  IconButton,
-  makeStyles,
-  Theme,
-  Typography,
-} from "@material-ui/core";
+import { Box, IconButton, Theme, Typography } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { usePlayerDetailsValue } from "../../../state/playerDetails.state";
-import { FileCopy } from "@material-ui/icons";
+import { FileCopy } from "@mui/icons-material";
 import { copyToClipboard } from "../../../utils/copyToClipboard";
 import { useSnackbar } from "notistack";
 import { useTranslate } from "react-polyglot";
@@ -48,7 +43,7 @@ const DialogIdView: React.FC = () => {
       {player.identifiers.map((ident) => (
         <Box className={classes.codeBlock} key={ident}>
           <Typography className={classes.codeBlockText}>{ident}</Typography>
-          <IconButton onClick={() => handleCopyToClipboard(ident)}>
+          <IconButton onClick={() => handleCopyToClipboard(ident)} size="large">
             <FileCopy />
           </IconButton>
         </Box>

menu/src/components/PlayerModal/Tabs/DialogInfoView.tsx

@@ -6,7 +6,7 @@ import {
   TextField,
   Typography,
   useTheme,
-} from "@material-ui/core";
+} from "@mui/material";
 import {
   useForcePlayerRefresh,
   usePlayerDetailsValue,

menu/src/components/PlayerModal/Tabs/DialogLoadError.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Typography } from "@material-ui/core";
+import { Box, Typography } from "@mui/material";
 
 export const DialogLoadError: React.FC = () => {
   return (