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/util/EmptyView.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import { useMediaQuery } from '@mui/material';
+import { Box } from '@mui/system';
 
 const ERROR_FACES = [
     '(･o･;)',
@@ -35,7 +36,7 @@ export default function EmptyView({ message, messageExtra }: IProps) {
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
 
     return (
-        <div style={{
+        <Box sx={{
             position: 'absolute',
             left: `calc(50% + ${isMobileWidth ? '0px' : theme.spacing(8 / 2)})`,
             top: '50%',
@@ -50,7 +51,7 @@ export default function EmptyView({ message, messageExtra }: IProps) {
                 {message}
             </Typography>
             {messageExtra}
-        </div>
+        </Box>
     );
 }