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

striker-ui/components/Files/Files.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
-import { Box, IconButton, Input, InputLabel } from '@material-ui/core';
+import { Box, IconButton, Input, InputLabel } from '@mui/material';
-import AddIcon from '@material-ui/icons/Add';
+import AddIcon from '@mui/icons-material/Add';
-import { makeStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 import ICON_BUTTON_STYLE from '../../lib/consts/ICON_BUTTON_STYLE';
 
@@ -10,15 +10,22 @@ import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import Spinner from '../Spinner';
 import { HeaderText } from '../Text';
 
-const useStyles = makeStyles(() => ({
+const PREFIX = 'Files';
-  addFileButton: ICON_BUTTON_STYLE,
+
-  addFileInput: {
+const classes = {
+  addFileButton: `${PREFIX}-addFileButton`,
+  addFileInput: `${PREFIX}-addFileInput`,
+};
+
+const StyledDiv = styled('div')(() => ({
+  [`& .${classes.addFileButton}`]: ICON_BUTTON_STYLE,
+
+  [`& .${classes.addFileInput}`]: {
     display: 'none',
   },
 }));
 
 const Files = (): JSX.Element => {
-  const classes = useStyles();
   const addFileInputRef = useRef<HTMLInputElement>();
 
   const { data, isLoading } = PeriodicFetch(
@@ -32,6 +39,7 @@ const Files = (): JSX.Element => {
 
   return (
     <Panel>
+      <StyledDiv>
         <Box style={{ display: 'flex', width: '100%' }}>
           <Box style={{ flexGrow: 1 }}>
             <HeaderText text="Files" />
@@ -62,6 +70,7 @@ const Files = (): JSX.Element => {
             <span>{data}</span>
           </Box>
         )}
+      </StyledDiv>
     </Panel>
   );
 };