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}`}
-                imgClassName={classes.image}
+                spinnerStyle={{
+                    ...imgStyle,
+                    height: '100vh',
+                    width: '70vw',
+                    padding: '50px calc(50% - 20px)',
+                    backgroundColor: '#525252',
+                    marginBottom: 10,
+                }}
+                imgStyle={imgStyle}
             />
-        </div>
+        </Box>
     );
 });