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

@@ -5,21 +5,8 @@
  * 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 from 'react';
-
-const useStyles = (settings: IReaderSettings) => makeStyles({
-    pageNumber: {
-        display: settings.showPageNumber ? 'block' : 'none',
-        position: 'fixed',
-        bottom: '50px',
-        right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
-        padding: '2px',
-        textAlign: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-        borderRadius: '10px',
-    },
-});
+import { Box } from '@mui/system';
 
 interface IProps {
     settings: IReaderSettings
@@ -29,11 +16,20 @@ interface IProps {
 
 export default function PageNumber(props: IProps) {
     const { settings, curPage, pageCount } = props;
-    const classes = useStyles(settings)();
 
     return (
-        <div className={classes.pageNumber}>
+        <Box sx={{
+            display: settings.showPageNumber ? 'block' : 'none',
+            position: 'fixed',
+            bottom: '50px',
+            right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
+            padding: '2px',
+            textAlign: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            borderRadius: '10px',
+        }}
+        >
             {`${curPage + 1} / ${pageCount}`}
-        </div>
+        </Box>
     );
 }