Add dependencies @mui/icons-material to package (#242)

* Add dependencies `@mui/icons-material` to package

* Replace MUI icons v4 with v5

* Replace more `@material-ui/core` with `@mui/material`

* consolidate `Dialog`, `DialogContent`, `DialogContentText` and
`DialogTitle`

* update `alpha` `Container` and `useMediaQuery`

src/App.js

@@ -7,14 +7,14 @@ import { UserList, UserCreate, UserEdit } from "./components/users";
 import { RoomList, RoomShow } from "./components/rooms";
 import { ReportList, ReportShow } from "./components/EventReports";
 import LoginPage from "./components/LoginPage";
-import ConfirmationNumberIcon from "@material-ui/icons/ConfirmationNumber";
-import CloudQueueIcon from "@material-ui/icons/CloudQueue";
-import EqualizerIcon from "@material-ui/icons/Equalizer";
-import UserIcon from "@material-ui/icons/Group";
+import ConfirmationNumberIcon from "@mui/icons-material/ConfirmationNumber";
+import CloudQueueIcon from "@mui/icons-material/CloudQueue";
+import EqualizerIcon from "@mui/icons-material/Equalizer";
+import UserIcon from "@mui/icons-material/Group";
 import { UserMediaStatsList } from "./components/statistics";
-import RoomIcon from "@material-ui/icons/ViewList";
-import ReportIcon from "@material-ui/icons/Warning";
-import FolderSharedIcon from "@material-ui/icons/FolderShared";
+import RoomIcon from "@mui/icons-material/ViewList";
+import ReportIcon from "@mui/icons-material/Warning";
+import FolderSharedIcon from "@mui/icons-material/FolderShared";
 import { DestinationList, DestinationShow } from "./components/destinations";
 import { ImportFeature } from "./components/ImportFeature";
 import {

src/components/EventReports.js

@@ -12,8 +12,8 @@ import {
   TextField,
   useTranslate,
 } from "react-admin";
-import PageviewIcon from "@material-ui/icons/Pageview";
-import ViewListIcon from "@material-ui/icons/ViewList";
+import PageviewIcon from "@mui/icons-material/Pageview";
+import ViewListIcon from "@mui/icons-material/ViewList";
 
 const date_format = {
   year: "numeric",

src/components/ImportFeature.js

@@ -6,19 +6,19 @@ import {
   Title,
 } from "react-admin";
 import { parse as parseCsv, unparse as unparseCsv } from "papaparse";
-import GetAppIcon from "@material-ui/icons/GetApp";
+import GetAppIcon from "@mui/icons-material/GetApp";
 import {
   Button,
   Card,
   CardActions,
   CardContent,
   CardHeader,
-  FormControlLabel,
   Checkbox,
+  Container,
+  FormControlLabel,
   NativeSelect,
-} from "@material-ui/core";
+} from "@mui/material";
 import { useTranslate } from "ra-core";
-import Container from "@material-ui/core/Container/Container";
 import { generateRandomUser } from "./users";
 
 const LOGGING = true;

src/components/LoginPage.js

@@ -21,9 +21,9 @@ import {
   MenuItem,
   Select,
   TextField,
-} from "@material-ui/core";
+} from "@mui/material";
 import { makeStyles } from "@material-ui/core/styles";
-import LockIcon from "@material-ui/icons/Lock";
+import LockIcon from "@mui/icons-material/Lock";
 
 const useStyles = makeStyles(theme => ({
   main: {

src/components/Menu.js

@@ -1,10 +1,10 @@
 // in src/Menu.js
 import * as React from "react";
 import { useSelector } from "react-redux";
-import { useMediaQuery } from "@material-ui/core";
+import { useMediaQuery } from "@mui/material";
 import { MenuItemLink, getResources } from "react-admin";
-import DefaultIcon from "@material-ui/icons/ViewList";
-import LabelIcon from "@material-ui/icons/Label";
+import DefaultIcon from "@mui/icons-material/ViewList";
+import LabelIcon from "@mui/icons-material/Label";
 
 const Menu = ({ onMenuClick, logout }) => {
   const isXSmall = useMediaQuery(theme => theme.breakpoints.down("xs"));

src/components/RoomDirectory.js

@@ -1,8 +1,7 @@
 import React, { Fragment } from "react";
-import Avatar from "@material-ui/core/Avatar";
-import { Chip } from "@material-ui/core";
+import { Avatar, Chip } from "@mui/material";
 import { connect } from "react-redux";
-import FolderSharedIcon from "@material-ui/icons/FolderShared";
+import FolderSharedIcon from "@mui/icons-material/FolderShared";
 import { makeStyles } from "@material-ui/core/styles";
 import {
   BooleanField,

src/components/ServerNotices.js

@@ -13,12 +13,14 @@ import {
   useTranslate,
   useUnselectAll,
 } from "react-admin";
-import MessageIcon from "@material-ui/icons/Message";
-import IconCancel from "@material-ui/icons/Cancel";
-import Dialog from "@material-ui/core/Dialog";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
+import MessageIcon from "@mui/icons-material/Message";
+import IconCancel from "@mui/icons-material/Cancel";
+import {
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
 
 const ServerNoticeDialog = ({ open, loading, onClose, onSend }) => {
   const translate = useTranslate();

src/components/devices.js

@@ -7,9 +7,9 @@ import {
   useRecordContext,
   useRefresh,
 } from "react-admin";
-import ActionDelete from "@material-ui/icons/Delete";
+import ActionDelete from "@mui/icons-material/Delete";
 import { makeStyles } from "@material-ui/core/styles";
-import { alpha } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@mui/material/styles";
 import classnames from "classnames";
 
 const useStyles = makeStyles(

src/components/media.js

@@ -1,8 +1,7 @@
 import React, { Fragment, useState } from "react";
 import classnames from "classnames";
-import { alpha } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@mui/material/styles";
 import { makeStyles } from "@material-ui/core/styles";
-import { Tooltip } from "@material-ui/core";
 import {
   BooleanInput,
   Button,
@@ -18,16 +17,19 @@ import {
   useRefresh,
   useTranslate,
 } from "react-admin";
-import BlockIcon from "@material-ui/icons/Block";
-import ClearIcon from "@material-ui/icons/Clear";
-import DeleteSweepIcon from "@material-ui/icons/DeleteSweep";
-import Dialog from "@material-ui/core/Dialog";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import IconCancel from "@material-ui/icons/Cancel";
-import LockIcon from "@material-ui/icons/Lock";
-import LockOpenIcon from "@material-ui/icons/LockOpen";
+import BlockIcon from "@mui/icons-material/Block";
+import ClearIcon from "@mui/icons-material/Clear";
+import DeleteSweepIcon from "@mui/icons-material/DeleteSweep";
+import {
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Tooltip,
+} from "@mui/material";
+import IconCancel from "@mui/icons-material/Cancel";
+import LockIcon from "@mui/icons-material/Lock";
+import LockOpenIcon from "@mui/icons-material/LockOpen";
 
 const useStyles = makeStyles(
   theme => ({

src/components/rooms.js

@@ -25,15 +25,15 @@ import {
 import get from "lodash/get";
 import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
-import { Tooltip, Typography, Chip } from "@material-ui/core";
-import FastForwardIcon from "@material-ui/icons/FastForward";
-import HttpsIcon from "@material-ui/icons/Https";
-import NoEncryptionIcon from "@material-ui/icons/NoEncryption";
-import PageviewIcon from "@material-ui/icons/Pageview";
-import UserIcon from "@material-ui/icons/Group";
-import ViewListIcon from "@material-ui/icons/ViewList";
-import VisibilityIcon from "@material-ui/icons/Visibility";
-import EventIcon from "@material-ui/icons/Event";
+import { Tooltip, Typography, Chip } from "@mui/material";
+import FastForwardIcon from "@mui/icons-material/FastForward";
+import HttpsIcon from "@mui/icons-material/Https";
+import NoEncryptionIcon from "@mui/icons-material/NoEncryption";
+import PageviewIcon from "@mui/icons-material/Pageview";
+import UserIcon from "@mui/icons-material/Group";
+import ViewListIcon from "@mui/icons-material/ViewList";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import EventIcon from "@mui/icons-material/Event";
 import {
   RoomDirectoryBulkDeleteButton,
   RoomDirectoryBulkSaveButton,

src/components/users.js

@@ -1,14 +1,14 @@
 import React, { cloneElement, Fragment } from "react";
-import Avatar from "@material-ui/core/Avatar";
-import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
-import ContactMailIcon from "@material-ui/icons/ContactMail";
-import DevicesIcon from "@material-ui/icons/Devices";
-import GetAppIcon from "@material-ui/icons/GetApp";
-import NotificationsIcon from "@material-ui/icons/Notifications";
-import PermMediaIcon from "@material-ui/icons/PermMedia";
-import PersonPinIcon from "@material-ui/icons/PersonPin";
-import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
-import ViewListIcon from "@material-ui/icons/ViewList";
+import Avatar from "@mui/material/Avatar";
+import AssignmentIndIcon from "@mui/icons-material/AssignmentInd";
+import ContactMailIcon from "@mui/icons-material/ContactMail";
+import DevicesIcon from "@mui/icons-material/Devices";
+import GetAppIcon from "@mui/icons-material/GetApp";
+import NotificationsIcon from "@mui/icons-material/Notifications";
+import PermMediaIcon from "@mui/icons-material/PermMedia";
+import PersonPinIcon from "@mui/icons-material/PersonPin";
+import SettingsInputComponentIcon from "@mui/icons-material/SettingsInputComponent";
+import ViewListIcon from "@mui/icons-material/ViewList";
 import {
   ArrayInput,
   ArrayField,