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/navbar/action/CategorySelect.tsx

@@ -6,8 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useEffect, useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
-import createStyles from '@mui/styles/createStyles';
 import Button from '@mui/material/Button';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -18,13 +16,6 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
 import client from 'util/client';
 
-const useStyles = makeStyles(() => createStyles({
-    paper: {
-        maxHeight: 435,
-        width: '80%',
-    },
-}));
-
 interface IProps {
     open: boolean
     setOpen: (value: boolean) => void
@@ -37,7 +28,6 @@ interface ICategoryInfo {
 }
 
 export default function CategorySelect(props: IProps) {
-    const classes = useStyles();
     const { open, setOpen, mangaId } = props;
     const [categoryInfos, setCategoryInfos] = useState<ICategoryInfo[]>([]);
 
@@ -82,7 +72,12 @@ export default function CategorySelect(props: IProps) {
 
     return (
         <Dialog
-            classes={classes}
+            sx={{
+                '.MuiDialog-paper': {
+                    maxHeight: 435,
+                    width: '80%',
+                },
+            }}
             maxWidth="xs"
             open={open}
         >