From 864e1e4fb089f1478e9921d4d8976cbbe27920dc Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Sat, 4 Dec 2021 10:24:16 +0330
Subject: [PATCH] migrate DoublePage to Mui 5 (#88)

---
 src/components/reader/DoublePage.tsx | 51 +++++++++++++---------------
 1 file changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/components/reader/DoublePage.tsx b/src/components/reader/DoublePage.tsx
index d8c35e17..44b266d4 100644
--- a/src/components/reader/DoublePage.tsx
+++ b/src/components/reader/DoublePage.tsx
@@ -5,28 +5,16 @@
  * 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 from 'react';
+import { Box, styled } from '@mui/system';
 
-const useStyles = (settings: IReaderSettings) => makeStyles({
-    image: {
-        display: 'block',
-        marginBottom: 0,
-        width: 'auto',
-        minHeight: '99vh',
-        height: 'auto',
-        maxHeight: '99vh',
-        objectFit: 'contain',
-    },
-    page: {
-        display: 'flex',
-        flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse',
-        justifyContent: 'center',
-        margin: '0 auto',
-        width: 'auto',
-        height: 'auto',
-        overflowX: 'scroll',
-    },
+const Image = styled('img')({
+    marginBottom: 0,
+    width: 'auto',
+    minHeight: '99vh',
+    height: 'auto',
+    maxHeight: '99vh',
+    objectFit: 'contain',
 });
 
 interface IProps {
@@ -41,21 +29,28 @@ const DoublePage = React.forwardRef((props: IProps, ref: any) => {
         image1src, image2src, index, settings,
     } = props;
 
-    const classes = useStyles(settings)();
-
     return (
-        <div ref={ref} className={classes.page}>
-            <img
-                className={classes.image}
+        <Box
+            ref={ref}
+            sx={{
+                display: 'flex',
+                flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse',
+                justifyContent: 'center',
+                margin: '0 auto',
+                width: 'auto',
+                height: 'auto',
+                overflowX: 'scroll',
+            }}
+        >
+            <Image
                 src={image1src}
                 alt={`Page #${index}`}
             />
-            <img
-                className={classes.image}
+            <Image
                 src={image2src}
                 alt={`Page #${index + 1}`}
             />
-        </div>
+        </Box>
     );
 });