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/Manga.tsx

@@ -18,15 +18,9 @@ import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import makeToast from 'components/util/Toast';
 import { Fab } from '@mui/material';
 import PlayArrow from '@mui/icons-material/PlayArrow';
+import { Box } from '@mui/system';
 
 const useStyles = makeStyles((theme: Theme) => ({
-    root: {
-        [theme.breakpoints.up('md')]: {
-            display: 'flex',
-        },
-        overflow: 'hidden',
-    },
-
     chapters: {
         listStyle: 'none',
         padding: 0,
@@ -37,12 +31,6 @@ const useStyles = makeStyles((theme: Theme) => ({
             margin: 0,
         },
     },
-
-    loading: {
-        margin: '10px 0',
-        display: 'flex',
-        justifyContent: 'center',
-    },
 }));
 
 const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
@@ -153,7 +141,7 @@ export default function Manga() {
         ));
 
     return (
-        <div className={classes.root}>
+        <Box sx={{ display: { md: 'flex' }, overflow: 'hidden' }}>
             <LoadingPlaceholder
                 shouldRender={manga !== undefined}
                 component={MangaDetails}
@@ -166,7 +154,7 @@ export default function Manga() {
                 <Virtuoso
                     style={{ // override Virtuoso default values and set them with class
                         height: 'undefined',
-                        overflowY: window.innerWidth < 960 ? 'visible' : 'auto',
+                        overflowY: window.innerWidth < 900 ? 'visible' : 'auto',
                     }}
                     className={classes.chapters}
                     totalCount={chapters.length}
@@ -177,11 +165,11 @@ export default function Manga() {
                             triggerChaptersUpdate={triggerChaptersUpdate}
                         />
                     )}
-                    useWindowScroll={window.innerWidth < 960}
+                    useWindowScroll={window.innerWidth < 900}
                     overscan={window.innerHeight * 0.5}
                 />
             </LoadingPlaceholder>
             <ResumeFab />
-        </div>
+        </Box>
     );
 }