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/settings/About.tsx

@@ -1,26 +1,15 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { CircularProgress } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
-import client from '../../util/client';
-import ListItemLink from '../../components/util/ListItemLink';
-import NavbarContext from '../../components/context/NavbarContext';
-
-const useStyles = makeStyles({
-    loading: {
-        width: '100vw',
-        '& div': {
-            margin: '50px auto',
-            display: 'block',
-        },
-    },
-});
+import { Box } from '@mui/system';
+import client from 'util/client';
+import ListItemLink from 'components/util/ListItemLink';
+import NavbarContext from 'components/context/NavbarContext';
 
 export default function About() {
     const { setTitle, setAction } = useContext(NavbarContext);
-    const classes = useStyles();
 
     const [about, setAbout] = useState<IAbout>();
 
@@ -36,9 +25,12 @@ export default function About() {
 
     if (about === undefined) {
         return (
-            <div className={classes.loading}>
+            <Box sx={{
+                height: 'calc(100vh - 128px)', display: 'grid', placeItems: 'center',
+            }}
+            >
                 <CircularProgress thickness={5} />
-            </div>
+            </Box>
         );
     }
 

src/screens/settings/Backup.tsx

@@ -67,7 +67,7 @@ export default function Backup() {
 
     return (
         <>
-            <List style={{ padding: 0 }}>
+            <List sx={{ padding: 0 }}>
                 <ListItemLink href={`${baseURL}/api/v1/backup/export/file`}>
                     <ListItemText
                         primary="Create Backup"