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/components/reader/pager/DoublePagedPager.tsx

@@ -5,34 +5,17 @@
  * 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 ReactDOM from 'react-dom';
+import { Box } from '@mui/system';
 import Page from '../Page';
 import DoublePage from '../DoublePage';
 
-const useStyles = (settings: IReaderSettings) => makeStyles({
-    preload: {
-        display: 'none',
-    },
-    reader: {
-        display: 'flex',
-        flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
-        justifyContent: 'center',
-        margin: '0 auto',
-        width: 'auto',
-        height: 'auto',
-        overflowX: 'scroll',
-    },
-});
-
 export default function DoublePagedPager(props: IReaderProps) {
     const {
         pages, settings, setCurPage, curPage, nextChapter, prevChapter,
     } = props;
 
-    const classes = useStyles(settings)();
-
     const selfRef = useRef<HTMLDivElement>(null);
     const pagesRef = useRef<HTMLImageElement[]>([]);
 
@@ -192,8 +175,8 @@ export default function DoublePagedPager(props: IReaderProps) {
     }, [selfRef, curPage, settings.readerType]);
 
     return (
-        <div ref={selfRef}>
-            <div id="preload" className={classes.preload}>
+        <Box ref={selfRef}>
+            <Box id="preload" sx={{ display: 'none' }}>
                 {
                     pages.map((page) => (
                         <img
@@ -205,8 +188,19 @@ export default function DoublePagedPager(props: IReaderProps) {
                         />
                     ))
                 }
-            </div>
-            <div id="display" className={classes.reader} />
-        </div>
+            </Box>
+            <Box
+                id="display"
+                sx={{
+                    display: 'flex',
+                    flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
+                    justifyContent: 'center',
+                    margin: '0 auto',
+                    width: 'auto',
+                    height: 'auto',
+                    overflowX: 'scroll',
+                }}
+            />
+        </Box>
     );
 }