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

@@ -18,6 +18,7 @@ import MenuItem from '@mui/material/MenuItem';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 
 import client from 'util/client';
+import { Box } from '@mui/system';
 
 interface IProps{
     chapter: IChapter
@@ -102,7 +103,7 @@ export default function ChapterCard(props: IProps) {
                                 padding: 2,
                             }}
                         >
-                            <div style={{ display: 'flex' }}>
+                            <Box sx={{ display: 'flex' }}>
                                 <div style={{ display: 'flex', flexDirection: 'column' }}>
                                     <Typography variant="h5" component="h2">
                                         <span style={{ color: theme.palette.primary.dark }}>
@@ -117,7 +118,7 @@ export default function ChapterCard(props: IProps) {
                                         {downloadStatusString}
                                     </Typography>
                                 </div>
-                            </div>
+                            </Box>
 
                             <IconButton aria-label="more" onClick={handleClick} size="large">
                                 <MoreVertIcon />
@@ -131,9 +132,9 @@ export default function ChapterCard(props: IProps) {
                         onClose={handleClose}
                     >
                         {downloadStatusString.endsWith('Downloaded')
-                            && <MenuItem onClick={deleteChapter}>Delete</MenuItem>}
+                             && <MenuItem onClick={deleteChapter}>Delete</MenuItem>}
                         {downloadStatusString.length === 0
-                        && <MenuItem onClick={downloadChapter}>Download</MenuItem> }
+                         && <MenuItem onClick={downloadChapter}>Download</MenuItem> }
                         <MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}>
                             {chapter.bookmarked && 'Remove bookmark'}
                             {!chapter.bookmarked && 'Bookmark'}