Revert "migrate some components to Mui5 new styling system (#72)"

This reverts commit 72ef61e286.

src/components/util/EmptyView.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import { useMediaQuery } from '@mui/material';
-import { Box } from '@mui/system';
 
 const ERROR_FACES = [
     '(･o･;)',
@@ -36,7 +35,7 @@ export default function EmptyView({ message, messageExtra }: IProps) {
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
 
     return (
-        <Box sx={{
+        <div style={{
             position: 'absolute',
             left: `calc(50% + ${isMobileWidth ? '0px' : theme.spacing(8 / 2)})`,
             top: '50%',
@@ -51,7 +50,7 @@ export default function EmptyView({ message, messageExtra }: IProps) {
                 {message}
             </Typography>
             {messageExtra}
-        </Box>
+        </div>
     );
 }
 

src/components/util/LoadingPlaceholder.tsx

@@ -8,8 +8,16 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
+import makeStyles from '@mui/styles/makeStyles';
 import CircularProgress from '@mui/material/CircularProgress';
-import { Box } from '@mui/system';
+
+const useStyles = makeStyles({
+    loading: {
+        margin: '10px auto',
+        display: 'flex',
+        justifyContent: 'center',
+    },
+});
 
 interface IProps {
     shouldRender?: boolean | (() => boolean)
@@ -22,6 +30,7 @@ export default function LoadingPlaceholder(props: IProps) {
     const {
         children, shouldRender, component, componentProps,
     } = props;
+    const classes = useStyles();
 
     let condition = true;
     if (shouldRender !== undefined) {
@@ -43,13 +52,8 @@ export default function LoadingPlaceholder(props: IProps) {
     }
 
     return (
-        <Box sx={{
-            margin: '10px auto',
-            display: 'flex',
-            justifyContent: 'center',
-        }}
-        >
+        <div className={classes.loading}>
             <CircularProgress thickness={5} />
-        </Box>
+        </div>
     );
 }

src/components/util/SpinnerImage.tsx

@@ -17,7 +17,9 @@ interface IProps {
 
     imgRef?: React.RefObject<HTMLImageElement>
 
+    spinnerClassName?: string
     spinnerStyle?: SxProps<Theme>
+    imgClassName?: string
     imgStyle?: CSSProperties
 
     onImageLoad?: () => void
@@ -25,7 +27,7 @@ interface IProps {
 
 export default function SpinnerImage(props: IProps) {
     const {
-        src, alt, onImageLoad, imgRef, spinnerStyle, imgStyle,
+        src, alt, onImageLoad, imgRef, spinnerClassName, imgClassName, spinnerStyle, imgStyle,
     } = props;
     const [imageSrc, setImagsrc] = useState<string>('');
 
@@ -51,18 +53,19 @@ export default function SpinnerImage(props: IProps) {
 
     if (imageSrc.length === 0) {
         return (
-            <Box sx={spinnerStyle}>
+            <Box className={spinnerClassName} sx={spinnerStyle}>
                 <CircularProgress thickness={5} />
             </Box>
         );
     }
 
     if (imageSrc === 'Not Found') {
-        return <Box sx={spinnerStyle} />;
+        return <Box className={spinnerClassName} sx={spinnerStyle} />;
     }
 
     return (
         <img
+            className={imgClassName}
             style={imgStyle}
             ref={imgRef}
             src={imageSrc}
@@ -72,6 +75,8 @@ export default function SpinnerImage(props: IProps) {
 }
 
 SpinnerImage.defaultProps = {
+    spinnerClassName: '',
+    imgClassName: '',
     spinnerStyle: {},
     imgStyle: {},
     onImageLoad: () => {},