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

* - Changed the value in Manga from 960 to 900( md breakpooint)
- The CicularLoader in About  and Reader screens is now centered to the whole screen
- Changed relative imports in About screen to absolute imports
- removed changed styles from Browse Screen, PageNumber

* Migrated Source Card, Extension Card and LoadingPlaceHolder to MUI system

* Migrated CategorySelect and LandSelect to using the sx prop

* migrated ReaderNavbar to mui 5

* - Removed Unused Styles from Page
- Migrated DoublePage, doublePagedPager, PagedPager, Vertical Pager and Horizontal Pager.

* Replaced style prop with sx prop

* removed useStyles completely from the project except for the Manga Screen

* added a comment

* Fixed the Source Card Buttons padding

* Removed the trailing backspace

Co-authored-by: Sascha Hahne <ntbm@users.noreply.github.com>

Co-authored-by: Sascha Hahne <ntbm@users.noreply.github.com>

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) {
@@ -63,7 +51,6 @@ const initialChapter = () => ({ pageCount: -1, index: -1, chapterCount: 0 });
 export default function Reader() {
     const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings);
 
-    const classes = useStyles(settings)();
     const history = useHistory();
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
@@ -145,9 +132,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>
         );
     }
 
@@ -176,7 +166,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}
@@ -193,6 +183,6 @@ export default function Reader() {
                 nextChapter={nextChapter}
                 prevChapter={prevChapter}
             />
-        </div>
+        </Box>
     );
 }