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>
2021-11-14 15:51:08 +05:30
parent 93c4ce3450
commit 72ef61e286
28 changed files with 341 additions and 501 deletions
--- a/src/components/ChapterCard.tsx
+++ b/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'}
--- a/src/components/ExtensionCard.tsx
+++ b/src/components/ExtensionCard.tsx
@@ -6,7 +6,6 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

 import React, { useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
@@ -14,35 +13,7 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: 16,
-    },
-    bullet: {
-        display: 'inline-block',
-        margin: '0 2px',
-        transform: 'scale(0.8)',
-    },
-    title: {
-        fontSize: 14,
-    },
-    pos: {
-        marginBottom: 12,
-    },
-    icon: {
-        width: theme.spacing(7),
-        height: theme.spacing(7),
-        flex: '0 0 auto',
-        marginRight: 16,
-    },
-    card: {
-        margin: '10px',
-    },
-}));
+import { Box } from '@mui/system';

 interface IProps {
    extension: IExtension
@@ -67,7 +38,6 @@ export default function ExtensionCard(props: IProps) {
    const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
    const [useCache] = useLocalStorage<boolean>('useCache', true);

-    const classes = useStyles();
    const langPress = lang === 'all' ? 'All' : lang.toUpperCase();

    function install() {
@@ -118,16 +88,27 @@ export default function ExtensionCard(props: IProps) {
    }

    return (
-        <Card className={classes.card}>
-            <CardContent className={classes.root}>
-                <div style={{ display: 'flex' }}>
+        <Card sx={{ margin: '10px' }}>
+            <CardContent sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                p: 2,
+            }}
+            >
+                <Box sx={{ display: 'flex' }}>
                    <Avatar
                        variant="rounded"
-                        className={classes.icon}
+                        sx={{
+                            width: '56px',
+                            height: '56px',
+                            flex: '0 0 auto',
+                            mr: 2,
+                        }}
                        alt={name}
                        src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
                    />
-                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                        <Typography variant="h5" component="h2">
                            {name}
                        </Typography>
@@ -136,8 +117,8 @@ export default function ExtensionCard(props: IProps) {
                            {' '}
                            {versionName}
                        </Typography>
-                    </div>
-                </div>
+                    </Box>
+                </Box>

                <Button
                    variant="outlined"
--- a/src/components/SourceCard.tsx
+++ b/src/components/SourceCard.tsx
@@ -6,7 +6,6 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import { useHistory } from 'react-router-dom';
@@ -18,55 +17,7 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import useLocalStorage from 'util/useLocalStorage';
 import { langCodeToName } from 'util/language';
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: 16,
-    },
-    bullet: {
-        display: 'inline-block',
-        margin: '0 2px',
-        transform: 'scale(0.8)',
-    },
-    title: {
-        fontSize: 14,
-    },
-    pos: {
-        marginBottom: 12,
-    },
-    icon: {
-        width: theme.spacing(7),
-        height: theme.spacing(7),
-        flex: '0 0 auto',
-        marginRight: 16,
-    },
-    card: {
-        margin: '10px',
-        '&:hover': {
-            backgroundColor: theme.palette.action.hover,
-            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-        },
-        '&:active': {
-            backgroundColor: theme.palette.action.selected,
-            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-        },
-    },
-    showMobile: {
-        display: 'flex',
-        [theme.breakpoints.up('sm')]: {
-            display: 'none',
-        },
-    },
-    showBigger: {
-        display: 'flex',
-        [theme.breakpoints.down('sm')]: {
-            display: 'none',
-        },
-    },
-}));
+import { Box } from '@mui/system';

 interface IProps {
    source: ISource
@@ -84,8 +35,6 @@ export default function SourceCard(props: IProps) {
    const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
    const [useCache] = useLocalStorage<boolean>('useCache', true);

-    const classes = useStyles();
-
    const redirectTo = (e: any, to: string) => {
        history.push(to);

@@ -95,19 +44,34 @@ export default function SourceCard(props: IProps) {

    return (
        <Card
-            className={classes.card}
+            sx={{
+                margin: '10px',
+                '&:hover': {
+                    backgroundColor: 'action.hover',
+                    transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                },
+                '&:active': {
+                    backgroundColor: 'action.selected',
+                    transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                },
+            }}
            onClick={(e) => redirectTo(e, `/sources/${id}/popular/`)}
        >
-            <CardContent className={classes.root}>
+            <CardContent sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: 2,
+            }}
+            >

-                <div style={{ display: 'flex' }}>
+                <Box sx={{ display: 'flex' }}>
                    <Avatar
                        variant="rounded"
-                        className={classes.icon}
                        alt={name}
                        src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
                    />
-                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                    <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                        <Typography variant="h5" component="h2">
                            {name}
                        </Typography>
@@ -116,12 +80,12 @@ export default function SourceCard(props: IProps) {
                                {langCodeToName(lang)}
                            </Typography>
                        )}
-                    </div>
-                </div>
+                    </Box>
+                </Box>
                <div>
-                    <div className={classes.showMobile}>
+                    <Box sx={{ display: { xs: 'flex', sm: 'none' } }}>
                        <IconButton
-                            style={{ width: 59, height: 59 }}
+                            sx={{ width: 59, height: 59 }}
                            onClick={(e) => redirectTo(e, `/sources/${id}/search/`)}
                            size="large"
                            edge="end"
@@ -140,11 +104,19 @@ export default function SourceCard(props: IProps) {
                                />
                            </IconButton>
                        )}
-                    </div>
-                    <div className={classes.showBigger}>
+                    </Box>
+                    <Box sx={{
+                        display: {
+                            xs: 'none',
+                            sm: 'flex',
+                        },
+                        '> .MuiButton-root': {
+                            ml: '20px',
+                        },
+                    }}
+                    >
                        <Button
                            variant="outlined"
-                            style={{ marginLeft: 20 }}
                            onClick={(e) => redirectTo(e, `/sources/${id}/search/`)}
                        >
                            Search
@@ -152,7 +124,6 @@ export default function SourceCard(props: IProps) {
                        {supportsLatest && (
                            <Button
                                variant="outlined"
-                                style={{ marginLeft: 20 }}
                                onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
                            >
                                Latest
@@ -160,12 +131,11 @@ export default function SourceCard(props: IProps) {
                        )}
                        <Button
                            variant="outlined"
-                            style={{ marginLeft: 20 }}
                            onClick={(e: any) => redirectTo(e, `/sources/${id}/popular/`)}
                        >
                            Browse
                        </Button>
-                    </div>
+                    </Box>
                </div>
            </CardContent>
        </Card>
--- a/src/components/library/LibraryOptions.tsx
+++ b/src/components/library/LibraryOptions.tsx
@@ -11,16 +11,17 @@ import FilterListIcon from '@mui/icons-material/FilterList';
 import { Drawer, FormControlLabel, IconButton } from '@mui/material';
 import useLibraryOptions from 'util/useLibraryOptions';
 import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
+import { Box } from '@mui/system';

 function Options() {
    const {
        downloaded, setDownloaded, unread, setUnread,
    } = useLibraryOptions();
    return (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
            <FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={unread} onChange={setUnread} />} label="Unread" />
            <FormControlLabel control={<ThreeStateCheckbox name="Downloaded" checked={downloaded} onChange={setDownloaded} />} label="Downloaded" />
-        </div>
+        </Box>
    );
 }

--- a/src/components/navbar/ReaderNavBar.tsx
+++ b/src/components/navbar/ReaderNavBar.tsx
@@ -11,7 +11,6 @@ import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import makeStyles from '@mui/styles/makeStyles';
 import React, { useContext, useEffect, useState } from 'react';
 import Typography from '@mui/material/Typography';
 import { useHistory, Link } from 'react-router-dom';
@@ -28,112 +27,91 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Collapse from '@mui/material/Collapse';
 import Button from '@mui/material/Button';
 import NavBarContext from 'components/context/NavbarContext';
+import { styled } from '@mui/system';

-const useStyles = (settings: IReaderSettings) => makeStyles((theme) => ({
-    // main container and root div need to change classes...
-    AppMainContainer: {
-        display: 'none',
-    },
-    AppRootElment: {
+const Root = styled('div')(({ theme }) => ({
+    top: 0,
+    left: 0,
+    width: '300px',
+    minWidth: '300px',
+    height: '100vh',
+    overflowY: 'auto',
+    backgroundColor: theme.palette.background.default,
+
+    '& header': {
+        backgroundColor:
+        theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
        display: 'flex',
-    },
+        alignItems: 'center',
+        minHeight: '64px',
+        paddingLeft: '24px',
+        paddingRight: '24px',

-    root: {
-        position: settings.staticNav ? 'sticky' : 'fixed',
-        top: 0,
-        left: 0,
-        width: '300px',
-        minWidth: '300px',
-        height: '100vh',
-        overflowY: 'auto',
-        backgroundColor: theme.palette.background.default,
+        transition: 'left 2s ease',

-        '& header': {
-            backgroundColor:
-            theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
-            display: 'flex',
-            alignItems: 'center',
-            minHeight: '64px',
-            paddingLeft: '24px',
-            paddingRight: '24px',
-
-            transition: 'left 2s ease',
-
-            '& button': {
-                flexGrow: 0,
-                flexShrink: 0,
-            },
-
-            '& button:nth-child(1)': {
-                marginRight: '16px',
-            },
-
-            '& button:nth-child(3)': {
-                marginRight: '-12px',
-            },
-
-            '& h1': {
-                fontSize: '1.25rem',
-                flexGrow: 1,
-            },
+        '& button': {
+            flexGrow: 0,
+            flexShrink: 0,
        },
-        '& hr': {
-            margin: '0 16px',
-            height: '1px',
-            border: '0',
-            backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
+
+        '& button:nth-child(1)': {
+            marginRight: '16px',
+        },
+
+        '& button:nth-child(3)': {
+            marginRight: '-12px',
+        },
+
+        '& h1': {
+            fontSize: '1.25rem',
+            flexGrow: 1,
        },
    },
-
-    navigation: {
+    '& hr': {
        margin: '0 16px',
-
-        '& > span:nth-child(1)': {
-            textAlign: 'center',
-            display: 'block',
-            marginTop: '16px',
-        },
-
-        '& $navigationChapters': {
-            display: 'grid',
-            gridTemplateColumns: '1fr 1fr',
-            gridTemplateAreas: '"prev next"',
-            gridColumnGap: '5px',
-            margin: '10px 0',
-
-            '& a': {
-                flexGrow: 1,
-                textDecoration: 'none',
-
-                '& button': {
-                    width: '100%',
-                    padding: '5px 8px',
-                    textTransform: 'none',
-                },
-            },
-        },
-
+        height: '1px',
+        border: '0',
+        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
    },
-    navigationChapters: {}, // dummy rule
+}));

-    settingsCollapsseHeader: {
-        '& span': {
-            fontWeight: 'bold',
+const Navigation = styled('div')({
+    margin: '0 16px',
+    '& > span:nth-child(1)': {
+        textAlign: 'center',
+        display: 'block',
+        marginTop: '16px',
+    },
+});
+
+const ChapterNavigation = styled('div')({
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: '5px',
+    margin: '10px 0',
+
+    '& a': {
+        flexGrow: 1,
+        textDecoration: 'none',
+
+        '& button': {
+            width: '100%',
+            padding: '5px 8px',
+            textTransform: 'none',
        },
    },
+});

-    openDrawerButton: {
-        position: 'fixed',
-        top: 0 + 20,
-        left: 10 + 20,
-        height: '40px',
-        width: '40px',
-        borderRadius: 5,
-        backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
-
-        '&:hover': {
-            backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
-        },
+const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
+    position: 'fixed',
+    top: 0 + 20,
+    left: 10 + 20,
+    height: '40px',
+    width: '40px',
+    borderRadius: 5,
+    backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
+    '&:hover': {
+        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
    },
 }));

@@ -168,8 +146,6 @@ export default function ReaderNavBar(props: IProps) {
    const [prevScrollPos, setPrevScrollPos] = useState(0);
    const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(true);

-    const classes = useStyles(settings)();
-
    const setSettingValue = (key: string, value: any) => setSettings({ ...settings, [key]: value });

    const handleScroll = () => {
@@ -184,15 +160,16 @@ export default function ReaderNavBar(props: IProps) {
    useEffect(() => {
        window.addEventListener('scroll', handleScroll);

-        const rootEl = document.querySelector('#root')!;
-        const mainContainer = document.querySelector('#appMainContainer')!;
+        const rootEl:HTMLDivElement = document.querySelector('#root')!;
+        const mainContainer:HTMLDivElement = document.querySelector('#appMainContainer')!;

-        rootEl.classList.add(classes.AppRootElment);
-        mainContainer.classList.add(classes.AppMainContainer);
+        // main container and root div need to change styles...
+        rootEl.style.display = 'flex';
+        mainContainer.style.display = 'none';

        return () => {
-            rootEl.classList.remove(classes.AppRootElment);
-            mainContainer.classList.remove(classes.AppMainContainer);
+            rootEl.style.display = 'block';
+            mainContainer.style.display = 'block';
            window.removeEventListener('scroll', handleScroll);
        };
    }, [handleScroll]);// handleScroll changes on every render
@@ -207,7 +184,10 @@ export default function ReaderNavBar(props: IProps) {
                mountOnEnter
                unmountOnExit
            >
-                <div className={classes.root}>
+                <Root sx={{
+                    position: settings.staticNav ? 'sticky' : 'fixed',
+                }}
+                >
                    <header>
                        <IconButton
                            edge="start"
@@ -234,7 +214,14 @@ export default function ReaderNavBar(props: IProps) {
                            <CloseIcon />
                        </IconButton>
                    </header>
-                    <ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}>
+                    <ListItem
+                        ContainerComponent="div"
+                        sx={{
+                            '& span': {
+                                fontWeight: 'bold',
+                            },
+                        }}
+                    >
                        <ListItemText primary="Reader Settings" />
                        <ListItemSecondaryAction>
                            <IconButton
@@ -330,16 +317,15 @@ export default function ReaderNavBar(props: IProps) {
                        </List>
                    </Collapse>
                    <hr />
-                    <div className={classes.navigation}>
+                    <Navigation>
                        <span>
                            {`Currently on page ${curPage + 1} of ${chapter.pageCount}`}
                        </span>
-                        <div className={classes.navigationChapters}>
+                        <ChapterNavigation>
                            {chapter.index > 1
                        && (
                            <Link
                                replace
-                                style={{ gridArea: 'prev' }}
                                to={`/manga/${manga.id}/chapter/${chapter.index - 1}`}
                            >
                                <Button
@@ -354,7 +340,6 @@ export default function ReaderNavBar(props: IProps) {
                        && (
                            <Link
                                replace
-                                style={{ gridArea: 'next' }}
                                to={`/manga/${manga.id}/chapter/${chapter.index + 1}`}
                            >
                                <Button
@@ -365,14 +350,13 @@ export default function ReaderNavBar(props: IProps) {
                                </Button>
                            </Link>
                        )}
-                        </div>
-                    </div>
-                </div>
+                        </ChapterNavigation>
+                    </Navigation>
+                </Root>
            </Slide>
            <Zoom in={!drawerOpen}>
                <Fade in={!hideOpenButton}>
-                    <IconButton
-                        className={classes.openDrawerButton}
+                    <OpenDrawerButton
                        edge="start"
                        color="inherit"
                        aria-label="menu"
@@ -382,7 +366,7 @@ export default function ReaderNavBar(props: IProps) {
                        size="large"
                    >
                        <KeyboardArrowRightIcon />
-                    </IconButton>
+                    </OpenDrawerButton>
                </Fade>
            </Zoom>
        </>
--- a/src/components/navbar/action/CategorySelect.tsx
+++ b/src/components/navbar/action/CategorySelect.tsx
@@ -6,8 +6,6 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

 import React, { useEffect, useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
-import createStyles from '@mui/styles/createStyles';
 import Button from '@mui/material/Button';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -18,13 +16,6 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
 import client from 'util/client';

-const useStyles = makeStyles(() => createStyles({
-    paper: {
-        maxHeight: 435,
-        width: '80%',
-    },
-}));
-
 interface IProps {
    open: boolean
    setOpen: (value: boolean) => void
@@ -37,7 +28,6 @@ interface ICategoryInfo {
 }

 export default function CategorySelect(props: IProps) {
-    const classes = useStyles();
    const { open, setOpen, mangaId } = props;
    const [categoryInfos, setCategoryInfos] = useState<ICategoryInfo[]>([]);

@@ -82,7 +72,12 @@ export default function CategorySelect(props: IProps) {

    return (
        <Dialog
-            classes={classes}
+            sx={{
+                '.MuiDialog-paper': {
+                    maxHeight: 435,
+                    width: '80%',
+                },
+            }}
            maxWidth="xs"
            open={open}
        >
--- a/src/components/navbar/action/LangSelect.tsx
+++ b/src/components/navbar/action/LangSelect.tsx
@@ -6,8 +6,6 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

 import React, { useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
-import createStyles from '@mui/styles/createStyles';
 import Button from '@mui/material/Button';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -21,13 +19,6 @@ import ListItem from '@mui/material/ListItem';
 import { langCodeToName } from 'util/language';
 import cloneObject from 'util/cloneObject';

-const useStyles = makeStyles(() => createStyles({
-    paper: {
-        maxHeight: 435,
-        width: '80%',
-    },
-}));
-
 function removeAll(firstList: any[], secondList: any[]) {
    secondList.forEach((item) => {
        const index = firstList.indexOf(item);
@@ -54,7 +45,6 @@ export default function LangSelect(props: IProps) {
    const [mShownLangs, setMShownLangs] = useState(
        removeAll(cloneObject(shownLangs), forcedLangs!),
    );
-    const classes = useStyles();
    const [open, setOpen] = useState<boolean>(false);

    const handleCancel = () => {
@@ -90,12 +80,17 @@ export default function LangSelect(props: IProps) {
                <FilterListIcon />
            </IconButton>
            <Dialog
-                classes={classes}
+                sx={{
+                    '.MuiDialog-paper': {
+                        maxHeight: 435,
+                        width: '80%',
+                    },
+                }}
                maxWidth="xs"
                open={open}
            >
                <DialogTitle>Enabled Languages</DialogTitle>
-                <DialogContent dividers style={{ padding: 0 }}>
+                <DialogContent dividers sx={{ padding: 0 }}>
                    <List>
                        {allLangs.map((lang) => (
                            <ListItem key={lang}>
--- a/src/components/navbar/navigation/DesktopSideBar.tsx
+++ b/src/components/navbar/navigation/DesktopSideBar.tsx
@@ -45,7 +45,7 @@ export default function DesktopSideBar({ navBarItems }: IProps) {
                }: NavbarItem) => (
                    <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
                        <ListItem disableRipple button key={title}>
-                            <ListItemIcon style={{ minWidth: '0' }}>
+                            <ListItemIcon sx={{ minWidth: '0' }}>
                                <Tooltip placement="right" title={title}>
                                    {iconFor(path, IconComponent, SelectedIconComponent)}
                                </Tooltip>
--- 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>
    );
 });

--- a/src/components/reader/Page.tsx
+++ b/src/components/reader/Page.tsx
@@ -5,7 +5,6 @@
 * 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 SpinnerImage from 'components/util/SpinnerImage';
 import useLocalStorage from 'util/useLocalStorage';
@@ -53,22 +52,6 @@ function imageStyle(settings: IReaderSettings): any {
    };
 }

-const useStyles = (settings: IReaderSettings) => makeStyles({
-    loading: {
-        margin: '100px auto',
-        height: '100vh',
-        width: '100vw',
-    },
-    loadingImage: {
-        height: '100vh',
-        width: '70vw',
-        padding: '50px calc(50% - 20px)',
-        backgroundColor: '#525252',
-        marginBottom: 10,
-    },
-    image: imageStyle(settings),
-});
-
 interface IProps {
    src: string
    index: number
@@ -84,7 +67,6 @@ const Page = React.forwardRef((props: IProps, ref: any) => {

    const [useCache] = useLocalStorage<boolean>('useCache', true);

-    const classes = useStyles(settings)();
    const imgRef = useRef<HTMLImageElement>(null);

    const handleVerticalScroll = () => {
@@ -127,8 +109,14 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
                onImageLoad={onImageLoad}
                alt={`Page #${index}`}
                imgRef={imgRef}
-                spinnerClassName={`${classes.image} ${classes.loadingImage}`}
-                imgClassName={classes.image}
+                spinnerStyle={{
+                    height: '100vh',
+                    width: '70vw',
+                    padding: '50px calc(50% - 20px)',
+                    backgroundColor: '#525252',
+                    marginBottom: 10,
+                }}
+                imgStyle={imageStyle(settings)}
            />
        </div>
    );
--- a/src/components/reader/PageNumber.tsx
+++ b/src/components/reader/PageNumber.tsx
@@ -5,21 +5,8 @@
 * 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';
-
-const useStyles = (settings: IReaderSettings) => makeStyles({
-    pageNumber: {
-        display: settings.showPageNumber ? 'block' : 'none',
-        position: 'fixed',
-        bottom: '50px',
-        right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
-        padding: '2px',
-        textAlign: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-        borderRadius: '10px',
-    },
-});
+import { Box } from '@mui/system';

 interface IProps {
    settings: IReaderSettings
@@ -29,11 +16,20 @@ interface IProps {

 export default function PageNumber(props: IProps) {
    const { settings, curPage, pageCount } = props;
-    const classes = useStyles(settings)();

    return (
-        <div className={classes.pageNumber}>
+        <Box sx={{
+            display: settings.showPageNumber ? 'block' : 'none',
+            position: 'fixed',
+            bottom: '50px',
+            right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
+            padding: '2px',
+            textAlign: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            borderRadius: '10px',
+        }}
+        >
            {`${curPage + 1} / ${pageCount}`}
-        </div>
+        </Box>
    );
 }
--- a/src/components/reader/pager/DoublePagedPager.tsx
+++ b/src/components/reader/pager/DoublePagedPager.tsx
@@ -5,34 +5,17 @@
 * 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[]>([]);

@@ -192,8 +175,8 @@ export default function DoublePagedPager(props: IReaderProps) {
    }, [selfRef, curPage, settings.readerType]);

    return (
-        <div ref={selfRef}>
-            <div id="preload" className={classes.preload}>
+        <Box ref={selfRef}>
+            <Box id="preload" sx={{ display: 'none' }}>
                {
                    pages.map((page) => (
                        <img
@@ -205,8 +188,19 @@ export default function DoublePagedPager(props: IReaderProps) {
                        />
                    ))
                }
-            </div>
-            <div id="display" className={classes.reader} />
-        </div>
+            </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>
    );
 }
--- a/src/components/reader/pager/HorizontalPager.tsx
+++ b/src/components/reader/pager/HorizontalPager.tsx
@@ -5,30 +5,15 @@
 * 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[]>([]);

@@ -128,7 +113,19 @@ export default function HorizontalPager(props: IReaderProps) {
    }, [selfRef, curPage]);

    return (
-        <div ref={selfRef} className={classes.reader}>
+        <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',
+            }}
+        >
            {
                pages.map((page) => (
                    <Page
@@ -142,6 +139,6 @@ export default function HorizontalPager(props: IReaderProps) {
                    />
                ))
            }
-        </div>
+        </Box>
    );
 }
--- a/src/components/reader/pager/PagedPager.tsx
+++ b/src/components/reader/pager/PagedPager.tsx
@@ -5,28 +5,15 @@
 * 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() {
@@ -97,7 +84,17 @@ export default function PagedReader(props: IReaderProps) {
    }, [selfRef, curPage, settings.readerType]);

    return (
-        <div ref={selfRef} className={classes.reader}>
+        <Box
+            ref={selfRef}
+            sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'center',
+                margin: '0 auto',
+                width: '100%',
+                height: '100vh',
+            }}
+        >
            <Page
                key={curPage}
                index={curPage}
@@ -106,6 +103,6 @@ export default function PagedReader(props: IReaderProps) {
                setCurPage={setCurPage}
                settings={settings}
            />
-        </div>
+        </Box>
    );
 }
--- a/src/components/reader/pager/VerticalPager.tsx
+++ b/src/components/reader/pager/VerticalPager.tsx
@@ -5,27 +5,15 @@
 * 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, chapter, nextChapter, prevChapter,
    } = props;

-    const classes = useStyles();
-
    const selfRef = useRef<HTMLDivElement>(null);
    const pagesRef = useRef<HTMLDivElement[]>([]);

@@ -111,7 +99,16 @@ export default function VerticalReader(props: IReaderProps) {
    }, [pagesRef.current.length]);

    return (
-        <div ref={selfRef} className={classes.reader}>
+        <Box
+            ref={selfRef}
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                margin: '0 auto',
+                width: '100%',
+            }}
+        >
            {
                pages.map((page) => (
                    <Page
@@ -125,6 +122,6 @@ export default function VerticalReader(props: IReaderProps) {
                    />
                ))
            }
-        </div>
+        </Box>
    );
 }
--- a/src/components/util/EmptyView.tsx
+++ b/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>
    );
 }

--- a/src/components/util/LoadingPlaceholder.tsx
+++ b/src/components/util/LoadingPlaceholder.tsx
@@ -8,16 +8,8 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import CircularProgress from '@mui/material/CircularProgress';
-
-const useStyles = makeStyles({
-    loading: {
-        margin: '10px auto',
-        display: 'flex',
-        justifyContent: 'center',
-    },
-});
+import { Box } from '@mui/system';

 interface IProps {
    shouldRender?: boolean | (() => boolean)
@@ -30,7 +22,6 @@ export default function LoadingPlaceholder(props: IProps) {
    const {
        children, shouldRender, component, componentProps,
    } = props;
-    const classes = useStyles();

    let condition = true;
    if (shouldRender !== undefined) {
@@ -52,8 +43,13 @@ export default function LoadingPlaceholder(props: IProps) {
    }

    return (
-        <div className={classes.loading}>
+        <Box sx={{
+            margin: '10px auto',
+            display: 'flex',
+            justifyContent: 'center',
+        }}
+        >
            <CircularProgress thickness={5} />
-        </div>
+        </Box>
    );
 }
--- a/src/components/util/SpinnerImage.tsx
+++ b/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: () => {},