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

striker-ui/components/SharedStorage/SharedStorage.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
-import { makeStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { BodyText, HeaderText } from '../Text';
 import { Panel, InnerPanel, PanelHeader } from '../Panels';
 import SharedStorageHost from './SharedStorageHost';
@@ -10,12 +10,20 @@ import { AnvilContext } from '../AnvilContext';
 import Spinner from '../Spinner';
 import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
 
-const useStyles = makeStyles((theme) => ({
+const PREFIX = 'SharedStorage';
-  header: {
+
+const classes = {
+  header: `${PREFIX}-header`,
+  root: `${PREFIX}-root`,
+};
+
+const StyledDiv = styled('div')(({ theme }) => ({
+  [`& .${classes.header}`]: {
     paddingTop: '.1em',
     paddingRight: '.7em',
   },
-  root: {
+
+  [`& .${classes.root}`]: {
     overflow: 'auto',
     height: '78vh',
     paddingLeft: '.3em',
@@ -27,13 +35,13 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const SharedStorage = (): JSX.Element => {
-  const classes = useStyles();
   const { uuid } = useContext(AnvilContext);
   const { data, isLoading } = PeriodicFetch<AnvilSharedStorage>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_shared_storage?anvil_uuid=${uuid}`,
   );
   return (
     <Panel>
+      <StyledDiv>
         <HeaderText text="Shared Storage" />
         {!isLoading ? (
           <Box className={classes.root}>
@@ -42,7 +50,11 @@ const SharedStorage = (): JSX.Element => {
                 (storageGroup: AnvilSharedStorageGroup): JSX.Element => (
                   <InnerPanel key={storageGroup.storage_group_uuid}>
                     <PanelHeader>
-                    <Box display="flex" width="100%" className={classes.header}>
+                      <Box
+                        display="flex"
+                        width="100%"
+                        className={classes.header}
+                      >
                         <Box>
                           <BodyText text={storageGroup.storage_group_name} />
                         </Box>
@@ -59,6 +71,7 @@ const SharedStorage = (): JSX.Element => {
         ) : (
           <Spinner />
         )}
+      </StyledDiv>
     </Panel>
   );
 };