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

@@ -17,9 +17,7 @@ interface IProps {
 
     imgRef?: React.RefObject<HTMLImageElement>
 
-    spinnerClassName?: string
     spinnerStyle?: SxProps<Theme>
-    imgClassName?: string
     imgStyle?: CSSProperties
 
     onImageLoad?: () => void
@@ -27,7 +25,7 @@ interface IProps {
 
 export default function SpinnerImage(props: IProps) {
     const {
-        src, alt, onImageLoad, imgRef, spinnerClassName, imgClassName, spinnerStyle, imgStyle,
+        src, alt, onImageLoad, imgRef, spinnerStyle, imgStyle,
     } = props;
     const [imageSrc, setImagsrc] = useState<string>('');
 
@@ -53,19 +51,18 @@ export default function SpinnerImage(props: IProps) {
 
     if (imageSrc.length === 0) {
         return (
-            <Box className={spinnerClassName} sx={spinnerStyle}>
+            <Box sx={spinnerStyle}>
                 <CircularProgress thickness={5} />
             </Box>
         );
     }
 
     if (imageSrc === 'Not Found') {
-        return <Box className={spinnerClassName} sx={spinnerStyle} />;
+        return <Box sx={spinnerStyle} />;
     }
 
     return (
         <img
-            className={imgClassName}
             style={imgStyle}
             ref={imgRef}
             src={imageSrc}
@@ -75,8 +72,6 @@ export default function SpinnerImage(props: IProps) {
 }
 
 SpinnerImage.defaultProps = {
-    spinnerClassName: '',
-    imgClassName: '',
     spinnerStyle: {},
     imgStyle: {},
     onImageLoad: () => {},