Revert "migrate some components to Mui5 new styling system (#72)"

This reverts commit 72ef61e286.

src/components/reader/pager/DoublePagedPager.tsx

@@ -5,17 +5,34 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { Box } from '@mui/system';
 import Page from '../Page';
 import DoublePage from '../DoublePage';
 
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    preload: {
+        display: 'none',
+    },
+    reader: {
+        display: 'flex',
+        flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: 'auto',
+        height: 'auto',
+        overflowX: 'scroll',
+    },
+});
+
 export default function DoublePagedPager(props: IReaderProps) {
     const {
         pages, settings, setCurPage, curPage, nextChapter, prevChapter,
     } = props;
 
+    const classes = useStyles(settings)();
+
     const selfRef = useRef<HTMLDivElement>(null);
     const pagesRef = useRef<HTMLImageElement[]>([]);
 
@@ -175,8 +192,8 @@ export default function DoublePagedPager(props: IReaderProps) {
     }, [selfRef, curPage, settings.readerType]);
 
     return (
-        <Box ref={selfRef}>
-            <Box id="preload" sx={{ display: 'none' }}>
+        <div ref={selfRef}>
+            <div id="preload" className={classes.preload}>
                 {
                     pages.map((page) => (
                         <img
@@ -188,19 +205,8 @@ export default function DoublePagedPager(props: IReaderProps) {
                         />
                     ))
                 }
-            </Box>
-            <Box
-                id="display"
-                sx={{
-                    display: 'flex',
-                    flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
-                    justifyContent: 'center',
-                    margin: '0 auto',
-                    width: 'auto',
-                    height: 'auto',
-                    overflowX: 'scroll',
-                }}
-            />
-        </Box>
+            </div>
+            <div id="display" className={classes.reader} />
+        </div>
     );
 }

src/components/reader/pager/HorizontalPager.tsx

@@ -5,15 +5,30 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
 import Page from '../Page';
 
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
+        justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
+        margin: '0 auto',
+        width: 'auto',
+        height: 'auto',
+        overflowX: 'visible',
+        userSelect: 'none',
+    },
+});
+
 export default function HorizontalPager(props: IReaderProps) {
     const {
         pages, curPage, settings, setCurPage, prevChapter, nextChapter,
     } = props;
 
+    const classes = useStyles(settings)();
+
     const selfRef = useRef<HTMLDivElement>(null);
     const pagesRef = useRef<HTMLDivElement[]>([]);
 
@@ -114,19 +129,7 @@ export default function HorizontalPager(props: IReaderProps) {
     }, [selfRef, curPage]);
 
     return (
-        <Box
-            ref={selfRef}
-            sx={{
-                display: 'flex',
-                flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
-                justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
-                margin: '0 auto',
-                width: 'auto',
-                height: 'auto',
-                overflowX: 'visible',
-                userSelect: 'none',
-            }}
-        >
+        <div ref={selfRef} className={classes.reader}>
             {
                 pages.map((page) => (
                     <Page
@@ -140,6 +143,6 @@ export default function HorizontalPager(props: IReaderProps) {
                     />
                 ))
             }
-        </Box>
+        </div>
     );
 }

src/components/reader/pager/PagedPager.tsx

@@ -5,15 +5,28 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
 import Page from '../Page';
 
+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+        height: '100vh',
+    },
+});
+
 export default function PagedReader(props: IReaderProps) {
     const {
         pages, settings, setCurPage, curPage, nextChapter, prevChapter,
     } = props;
 
+    const classes = useStyles();
+
     const selfRef = useRef<HTMLDivElement>(null);
 
     function nextPage() {
@@ -84,17 +97,7 @@ export default function PagedReader(props: IReaderProps) {
     }, [selfRef, curPage, settings.readerType]);
 
     return (
-        <Box
-            ref={selfRef}
-            sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'center',
-                margin: '0 auto',
-                width: '100%',
-                height: '100vh',
-            }}
-        >
+        <div ref={selfRef} className={classes.reader}>
             <Page
                 key={curPage}
                 index={curPage}
@@ -103,6 +106,6 @@ export default function PagedReader(props: IReaderProps) {
                 setCurPage={setCurPage}
                 settings={settings}
             />
-        </Box>
+        </div>
     );
 }

src/components/reader/pager/VerticalPager.tsx

@@ -5,15 +5,27 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
 import Page from '../Page';
 
+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+    },
+});
+
 export default function VerticalReader(props: IReaderProps) {
     const {
         pages, settings, setCurPage, curPage, nextChapter, prevChapter,
     } = props;
 
+    const classes = useStyles();
+
     const selfRef = useRef<HTMLDivElement>(null);
     const pagesRef = useRef<HTMLDivElement[]>([]);
 
@@ -93,16 +105,7 @@ export default function VerticalReader(props: IReaderProps) {
     }, [pagesRef.current.length]);
 
     return (
-        <Box
-            ref={selfRef}
-            sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                margin: '0 auto',
-                width: '100%',
-            }}
-        >
+        <div ref={selfRef} className={classes.reader}>
             {
                 pages.map((page) => (
                     <Page
@@ -116,6 +119,6 @@ export default function VerticalReader(props: IReaderProps) {
                     />
                 ))
             }
-        </Box>
+        </div>
     );
 }