refactor(striker-ui): migrate MUI v4->5 on Display/FullSize

striker-ui/components/Display/FullSize.tsx

@@ -1,11 +1,16 @@
 import { useState, useRef, useEffect, Dispatch, SetStateAction } from 'react';
 import dynamic from 'next/dynamic';
-import { Box, Menu, MenuItem, Button } from '@material-ui/core';
+import {
-import Typography from '@mui/material/Typography';
+  Box,
-import { makeStyles } from '@material-ui/core/styles';
+  Button,
-import CloseIcon from '@material-ui/icons/Close';
+  IconButton,
-import KeyboardIcon from '@material-ui/icons/Keyboard';
+  Menu,
-import IconButton from '@material-ui/core/IconButton';
+  MenuItem,
+  Typography,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import CloseIcon from '@mui/icons-material/Close';
+import KeyboardIcon from '@mui/icons-material/Keyboard';
 import RFB from '@novnc/novnc/core/rfb';
 import { Panel } from '../Panels';
 import { BLACK, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
@@ -15,10 +20,21 @@ import putFetchWithTimeout from '../../lib/fetchers/putFetchWithTimeout';
 import { HeaderText } from '../Text';
 import Spinner from '../Spinner';
 
-const VncDisplay = dynamic(() => import('./VncDisplay'), { ssr: false });
+const PREFIX = 'FullSize';
+
+const classes = {
+  displayBox: `${PREFIX}-displayBox`,
+  spinnerBox: `${PREFIX}-spinnerBox`,
+  closeButton: `${PREFIX}-closeButton`,
+  keyboardButton: `${PREFIX}-keyboardButton`,
+  closeBox: `${PREFIX}-closeBox`,
+  buttonsBox: `${PREFIX}-buttonsBox`,
+  keysItem: `${PREFIX}-keysItem`,
+  buttonText: `${PREFIX}-buttonText`,
+};
 
-const useStyles = makeStyles(() => ({
+const StyledDiv = styled('div')(() => ({
-  displayBox: {
+  [`& .${classes.displayBox}`]: {
     width: '75vw',
     height: '75vh',
     paddingTop: '1em',
@@ -26,47 +42,56 @@ const useStyles = makeStyles(() => ({
     paddingLeft: 0,
     paddingRight: 0,
   },
-  spinnerBox: {
+
+  [`& .${classes.spinnerBox}`]: {
     flexDirection: 'column',
     width: '75vw',
     height: '75vh',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  closeButton: {
+
+  [`& .${classes.closeButton}`]: {
     borderRadius: 8,
     backgroundColor: RED,
     '&:hover': {
       backgroundColor: RED,
     },
   },
-  keyboardButton: {
+
+  [`& .${classes.keyboardButton}`]: {
     borderRadius: 8,
     backgroundColor: TEXT,
     '&:hover': {
       backgroundColor: TEXT,
     },
   },
-  closeBox: {
+
+  [`& .${classes.closeBox}`]: {
     paddingBottom: '1em',
     paddingLeft: '.7em',
     paddingRight: 0,
   },
-  buttonsBox: {
+
+  [`& .${classes.buttonsBox}`]: {
     paddingTop: 0,
   },
-  keysItem: {
+
+  [`& .${classes.keysItem}`]: {
     backgroundColor: TEXT,
     paddingRight: '3em',
     '&:hover': {
       backgroundColor: TEXT,
     },
   },
-  buttonText: {
+
+  [`& .${classes.buttonText}`]: {
     color: BLACK,
   },
 }));
 
+const VncDisplay = dynamic(() => import('./VncDisplay'), { ssr: false });
+
 interface FullSizeProps {
   setMode: Dispatch<SetStateAction<boolean>>;
   uuid: string;
@@ -90,7 +115,6 @@ const FullSize = ({
     VncConnectionProps | undefined
   >(undefined);
   const [isError, setIsError] = useState<boolean>(false);
-  const classes = useStyles();
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -146,6 +170,7 @@ const FullSize = ({
 
   return (
     <Panel>
+      <StyledDiv>
         <Box flexGrow={1}>
           <HeaderText text={`Server: ${serverName}`} />
         </Box>
@@ -213,7 +238,9 @@ const FullSize = ({
           <Box display="flex" className={classes.spinnerBox}>
             {!isError ? (
               <>
-              <HeaderText text={`Establishing connection with ${serverName}`} />
+                <HeaderText
+                  text={`Establishing connection with ${serverName}`}
+                />
                 <HeaderText text="This may take a few minutes" />
                 <Spinner />
               </>
@@ -229,7 +256,10 @@ const FullSize = ({
                   }}
                   style={{ textTransform: 'none' }}
                 >
-                <Typography className={classes.buttonText} variant="subtitle1">
+                  <Typography
+                    className={classes.buttonText}
+                    variant="subtitle1"
+                  >
                     Reconnect
                   </Typography>
                 </Button>
@@ -237,6 +267,7 @@ const FullSize = ({
             )}
           </Box>
         )}
+      </StyledDiv>
     </Panel>
   );
 };