migrate Reader to Mui 5 (#100)

src/screens/Reader.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import CircularProgress from '@mui/material/CircularProgress';
-import makeStyles from '@mui/styles/makeStyles';
 import React, { useContext, useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import HorizontalPager from 'components/reader/pager/HorizontalPager';
@@ -19,18 +18,7 @@ import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
 import cloneObject from 'util/cloneObject';
-
-const useStyles = (settings: IReaderSettings) => makeStyles({
-    root: {
-        width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw',
-    },
-
-    loading: {
-        margin: '50px auto',
-        display: 'flex',
-        justifyContent: 'center',
-    },
-});
+import { Box } from '@mui/system';
 
 const getReaderComponent = (readerType: ReaderType) => {
     switch (readerType) {
@@ -68,7 +56,6 @@ const initialChapter = () => ({
 export default function Reader() {
     const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings);
 
-    const classes = useStyles(settings)();
     const history = useHistory();
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
@@ -154,9 +141,12 @@ export default function Reader() {
     // return spinner while chpater data is loading
     if (chapter.pageCount === -1) {
         return (
-            <div className={classes.loading}>
+            <Box sx={{
+                height: '100vh', width: '100vw', display: 'grid', placeItems: 'center',
+            }}
+            >
                 <CircularProgress thickness={5} />
-            </div>
+            </Box>
         );
     }
 
@@ -185,7 +175,7 @@ export default function Reader() {
     const ReaderComponent = getReaderComponent(settings.readerType);
 
     return (
-        <div className={classes.root}>
+        <Box sx={{ width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw' }}>
             <PageNumber
                 settings={settings}
                 curPage={curPage}
@@ -202,6 +192,6 @@ export default function Reader() {
                 nextChapter={nextChapter}
                 prevChapter={prevChapter}
             />
-        </div>
+        </Box>
     );
 }