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

striker-ui/components/Display/Preview.tsx

@@ -1,55 +1,72 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { Box } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
-import DesktopWindowsIcon from '@material-ui/icons/DesktopWindows';
-import PowerOffOutlinedIcon from '@material-ui/icons/PowerOffOutlined';
-import { Panel } from '../Panels';
+import { Box, IconButton, styled } from '@mui/material';
+import {
+  DesktopWindows as DesktopWindowsIcon,
+  PowerOffOutlined as PowerOffOutlinedIcon,
+} from '@mui/icons-material';
+
 import { BLACK, GREY, TEXT } from '../../lib/consts/DEFAULT_THEME';
+
+import { Panel } from '../Panels';
 import { HeaderText } from '../Text';
 
-interface PreviewProps {
-  setMode: Dispatch<SetStateAction<boolean>>;
-  uuid: string;
-  serverName: string | string[] | undefined;
-}
+const PREFIX = 'Preview';
+
+const classes = {
+  displayBox: `${PREFIX}-displayBox`,
+  fullScreenButton: `${PREFIX}-fullScreenButton`,
+  fullScreenBox: `${PREFIX}-fullScreenBox`,
+  imageButton: `${PREFIX}-imageButton`,
+  powerOffIcon: `${PREFIX}-powerOffIcon`,
+  previewImage: `${PREFIX}-previewImage`,
+};
 
-const useStyles = makeStyles(() => ({
-  displayBox: {
+const StyledDiv = styled('div')(() => ({
+  [`& .${classes.displayBox}`]: {
     padding: 0,
     paddingTop: '.7em',
     width: '100%',
   },
-  fullScreenButton: {
+
+  [`& .${classes.fullScreenButton}`]: {
     borderRadius: 8,
     backgroundColor: TEXT,
     '&:hover': {
       backgroundColor: TEXT,
     },
   },
-  fullScreenBox: {
+
+  [`& .${classes.fullScreenBox}`]: {
     paddingLeft: '1em',
     padding: 0,
   },
-  imageButton: {
+
+  [`& .${classes.imageButton}`]: {
     padding: 0,
     color: TEXT,
   },
-  powerOffIcon: {
+
+  [`& .${classes.powerOffIcon}`]: {
     borderRadius: 8,
     padding: 0,
     color: GREY,
     width: '100%',
     height: '100%',
   },
-  previewImage: {
+
+  [`& .${classes.previewImage}`]: {
     width: '100%',
     height: '100%',
   },
 }));
 
+interface PreviewProps {
+  setMode: Dispatch<SetStateAction<boolean>>;
+  uuid: string;
+  serverName: string | string[] | undefined;
+}
+
 const Preview = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
-  const classes = useStyles();
   const [preview, setPreview] = useState<string>();
 
   useEffect(() => {
@@ -74,6 +91,7 @@ const Preview = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
 
   return (
     <Panel>
+      <StyledDiv>
         <Box flexGrow={1}>
           <HeaderText text={`Server: ${serverName}`} />
         </Box>
@@ -108,6 +126,7 @@ const Preview = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
             </IconButton>
           </Box>
         </Box>
+      </StyledDiv>
     </Panel>
   );
 };