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

@@ -12,7 +12,7 @@ import {
     Redirect,
 } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
-import { Container, useMediaQuery } from '@mui/material';
+import { Container } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
 import {
     createTheme, ThemeProvider, Theme, StyledEngineProvider,
@@ -90,8 +90,6 @@ export default function App() {
         }),
         [darkTheme],
     );
-    // this can only be used after the theme object is created
-    const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
 
     return (
         <Router>
@@ -105,10 +103,10 @@ export default function App() {
                                 id="appMainContainer"
                                 maxWidth={false}
                                 disableGutters
-                                style={{
-                                    marginTop: theme.spacing(8),
-                                    marginLeft: isMobileWidth ? '' : theme.spacing(8),
-                                    marginBottom: isMobileWidth ? theme.spacing(8) : '',
+                                sx={{
+                                    mt: 8,
+                                    ml: { sm: 8 },
+                                    mb: { xs: 8, sm: 4 },
                                     width: 'auto',
                                     overflow: 'auto',
                                 }}