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

@@ -20,6 +20,7 @@ import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
 import EmptyView from 'components/util/EmptyView';
 import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
+import { Box } from '@mui/system';
 
 function epochToDate(epoch: number) {
     const date = new Date(0); // The 0 there is the key, which sets the date to the epoch
@@ -189,7 +190,7 @@ export default function Updates() {
                                 padding: 2,
                             }}
                             >
-                                <div style={{ display: 'flex' }}>
+                                <Box sx={{ display: 'flex' }}>
                                     <Avatar
                                         variant="rounded"
                                         sx={{
@@ -201,7 +202,7 @@ export default function Updates() {
                                         }}
                                         src={`${serverAddress}${manga.thumbnailUrl}?useCache=${useCache}`}
                                     />
-                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                                         <Typography variant="h5" component="h2">
                                             {manga.title}
                                         </Typography>
@@ -209,8 +210,8 @@ export default function Updates() {
                                             {chapter.name}
                                             {downloadStatusStringFor(chapter)}
                                         </Typography>
-                                    </div>
-                                </div>
+                                    </Box>
+                                </Box>
                                 {downloadStatusStringFor(chapter) === ''
                                         && (
                                             <IconButton