migrate SpinnerImage to Mui 5 (#97)

* migrate Page to Mui 5

* migrate SpinnerImage to Mui 5

* match the style

src/components/reader/Page.tsx

@@ -5,10 +5,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
 import SpinnerImage from 'components/util/SpinnerImage';
 import useLocalStorage from 'util/useLocalStorage';
+import Box from '@mui/system/Box';
 
 function imageStyle(settings: IReaderSettings): any {
     const [dimensions, setDimensions] = React.useState({
@@ -53,22 +53,6 @@ function imageStyle(settings: IReaderSettings): any {
     };
 }
 
-const useStyles = (settings: IReaderSettings) => makeStyles({
-    loading: {
-        margin: '100px auto',
-        height: '100vh',
-        width: '100vw',
-    },
-    loadingImage: {
-        height: '100vh',
-        width: '70vw',
-        padding: '50px calc(50% - 20px)',
-        backgroundColor: '#525252',
-        marginBottom: 10,
-    },
-    image: imageStyle(settings),
-});
-
 interface IProps {
     src: string
     index: number
@@ -84,7 +68,6 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
 
     const [useCache] = useLocalStorage<boolean>('useCache', true);
 
-    const classes = useStyles(settings)();
     const imgRef = useRef<HTMLImageElement>(null);
 
     const handleVerticalScroll = () => {
@@ -120,17 +103,26 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
         }
     }, [handleVerticalScroll]);
 
+    const imgStyle = imageStyle(settings);
+
     return (
-        <div ref={ref} style={{ margin: 'auto' }}>
+        <Box ref={ref} sx={{ margin: 'auto' }}>
             <SpinnerImage
                 src={`${src}?useCache=${useCache}`}
                 onImageLoad={onImageLoad}
                 alt={`Page #${index}`}
                 imgRef={imgRef}
-                spinnerClassName={`${classes.image} ${classes.loadingImage}`}
+                spinnerStyle={{
-                imgClassName={classes.image}
+                    ...imgStyle,
+                    height: '100vh',
+                    width: '70vw',
+                    padding: '50px calc(50% - 20px)',
+                    backgroundColor: '#525252',
+                    marginBottom: 10,
+                }}
+                imgStyle={imgStyle}
             />
-        </div>
+        </Box>
     );
 });
 

src/components/util/SpinnerImage.tsx

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