Feature/remove dependency mui styles (#330)

* Remove deprecated dependency "@mui/styles" * Remove deprecated dependency "@mui/styles" - Remove usage
2023-06-04 20:58:44 +02:00
parent 3a82fd0abb
commit 2a6950b015
4 changed files with 118 additions and 234 deletions
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
    "@mui/icons-material": "^5.0.5",
    "@mui/lab": "^5.0.0-alpha.53",
    "@mui/material": "^5.0.6",
-    "@mui/styles": "^5.0.2",
    "@mui/system": "^5.0.6",
    "axios": "^1.4.0",
    "file-selector": "^0.2.4",
--- a/src/components/manga/MangaDetails.tsx
+++ b/src/components/manga/MangaDetails.tsx
@@ -11,8 +11,7 @@ import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import PublicIcon from '@mui/icons-material/Public';
 import { Typography } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
-import { Theme } from '@mui/material/styles';
-import makeStyles from '@mui/styles/makeStyles';
+import { styled } from '@mui/material/styles';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { mutate } from 'swr';
@@ -21,100 +20,103 @@ import { t as translate } from 'i18next';
 import makeToast from 'components/util/Toast';
 import requestManager from 'lib/RequestManager';

-const useStyles = (inLibrary: boolean) =>
-    makeStyles((theme: Theme) => ({
-        root: {
-            width: '100%',
-            [theme.breakpoints.up('md')]: {
-                position: 'sticky',
-                top: '64px',
-                left: '0px',
-                width: '50vw',
-                height: 'calc(100vh - 64px)',
-                alignSelf: 'flex-start',
-                overflowY: 'auto',
-            },
+const DetailsWrapper = styled('div')(({ theme }) => ({
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+        position: 'sticky',
+        top: '64px',
+        left: '0px',
+        width: '50vw',
+        height: 'calc(100vh - 64px)',
+        alignSelf: 'flex-start',
+        overflowY: 'auto',
+    },
+}));
+
+const TopContentWrapper = styled('div')(() => ({
+    padding: '10px',
+    // [theme.breakpoints.up('md')]: {
+    //     minWidth: '50%',
+    // },
+}));
+
+const ThumbnailMetadataWrapper = styled('div')(() => ({
+    display: 'flex',
+}));
+
+const Thumbnail = styled('div')(() => ({
+    '& img': {
+        borderRadius: 4,
+        maxWidth: '100%',
+        minWidth: '100%',
+        height: 'auto',
+    },
+    maxWidth: '50%',
+    // [theme.breakpoints.up('md')]: {
+    //     minWidth: '100px',
+    // },
+}));
+
+const Metadata = styled('div')(({ theme }) => ({
+    marginLeft: 15,
+    maxWidth: '100%',
+    '& span': {
+        fontWeight: '400',
+    },
+    [theme.breakpoints.up('lg')]: {
+        fontSize: '1.3em',
+    },
+}));
+const MangaButtonsContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'inLibrary' })<{
+    inLibrary: boolean;
+}>(({ inLibrary }) => ({
+    display: 'flex',
+    justifyContent: 'space-around',
+    '& button': {
+        color: inLibrary ? '#2196f3' : 'inherit',
+    },
+    '& a': {
+        textDecoration: 'none',
+        color: '#858585',
+        '& button': {
+            color: 'inherit',
        },
-        top: {
-            padding: '10px',
-            // [theme.breakpoints.up('md')]: {
-            //     minWidth: '50%',
-            // },
-        },
-        leftRight: {
-            display: 'flex',
-        },
-        leftSide: {
-            '& img': {
-                borderRadius: 4,
-                maxWidth: '100%',
-                minWidth: '100%',
-                height: 'auto',
-            },
-            maxWidth: '50%',
-            // [theme.breakpoints.up('md')]: {
-            //     minWidth: '100px',
-            // },
-        },
-        rightSide: {
-            marginLeft: 15,
-            maxWidth: '100%',
-            '& span': {
-                fontWeight: '400',
-            },
-            [theme.breakpoints.up('lg')]: {
-                fontSize: '1.3em',
-            },
-        },
-        buttons: {
-            display: 'flex',
-            justifyContent: 'space-around',
-            '& button': {
-                color: inLibrary ? '#2196f3' : 'inherit',
-            },
-            '& a': {
-                textDecoration: 'none',
-                color: '#858585',
-                '& button': {
-                    color: 'inherit',
-                },
-            },
-        },
-        bottom: {
-            paddingLeft: '10px',
-            paddingRight: '10px',
-            [theme.breakpoints.up('md')]: {
-                fontSize: '1.2em',
-                // maxWidth: '50%',
-            },
-            [theme.breakpoints.up('lg')]: {
-                fontSize: '1.3em',
-            },
-        },
-        description: {
-            '& h4': {
-                marginTop: '1em',
-                marginBottom: 0,
-            },
-            '& p': {
-                textAlign: 'justify',
-                textJustify: 'inter-word',
-            },
-        },
-        genre: {
-            display: 'flex',
-            flexWrap: 'wrap',
-            '& h5': {
-                border: '2px solid #2196f3',
-                borderRadius: '1.13em',
-                marginRight: '1em',
-                marginTop: 0,
-                marginBottom: '10px',
-                padding: '0.3em',
-                color: '#2196f3',
-            },
-        },
-    }));
+    },
+}));
+const BottomContentWrapper = styled('div')(({ theme }) => ({
+    paddingLeft: '10px',
+    paddingRight: '10px',
+    [theme.breakpoints.up('md')]: {
+        fontSize: '1.2em',
+        // maxWidth: '50%',
+    },
+    [theme.breakpoints.up('lg')]: {
+        fontSize: '1.3em',
+    },
+}));
+const Description = styled('div')(() => ({
+    '& h4': {
+        marginTop: '1em',
+        marginBottom: 0,
+    },
+    '& p': {
+        textAlign: 'justify',
+        textJustify: 'inter-word',
+    },
+}));
+const Genres = styled('div')(() => ({
+    display: 'flex',
+    flexWrap: 'wrap',
+    '& h5': {
+        border: '2px solid #2196f3',
+        borderRadius: '1.13em',
+        marginRight: '1em',
+        marginTop: 0,
+        marginBottom: '10px',
+        padding: '0.3em',
+        color: '#2196f3',
+    },
+}));

 interface IProps {
    manga: IManga;
@@ -135,8 +137,6 @@ function getValueOrUnknown(val: string) {
 const MangaDetails: React.FC<IProps> = ({ manga }) => {
    const { t } = useTranslation();

-    const classes = useStyles(manga.inLibrary)();
-
    useEffect(() => {
        if (!manga.source) {
            makeToast(translate('source.error.label.source_not_found'), 'error');
@@ -154,13 +154,13 @@ const MangaDetails: React.FC<IProps> = ({ manga }) => {
    };

    return (
-        <div className={classes.root}>
-            <div className={classes.top}>
-                <div className={classes.leftRight}>
-                    <div className={classes.leftSide}>
+        <DetailsWrapper>
+            <TopContentWrapper>
+                <ThumbnailMetadataWrapper>
+                    <Thumbnail>
                        <img src={requestManager.getValidImgUrlFor(manga.thumbnailUrl)} alt="Manga Thumbnail" />
-                    </div>
-                    <div className={classes.rightSide}>
+                    </Thumbnail>
+                    <Metadata>
                        <h1>{manga.title}</h1>
                        <h3>
                            {`${t('manga.label.author')}: `}
@@ -172,9 +172,9 @@ const MangaDetails: React.FC<IProps> = ({ manga }) => {
                        </h3>
                        <h3>{`${t('manga.label.status')}: ${manga.status}`}</h3>
                        <h3>{`${t('source.title')}: ${getSourceName(manga.source)}`}</h3>
-                    </div>
-                </div>
-                <div className={classes.buttons}>
+                    </Metadata>
+                </ThumbnailMetadataWrapper>
+                <MangaButtonsContainer inLibrary={manga.inLibrary}>
                    <div>
                        <IconButton onClick={manga.inLibrary ? removeFromLibrary : addToLibrary} size="large">
                            {manga.inLibrary ? <FavoriteIcon sx={{ mr: 1 }} /> : <FavoriteBorderIcon sx={{ mr: 1 }} />}
@@ -191,20 +191,20 @@ const MangaDetails: React.FC<IProps> = ({ manga }) => {
                            </Typography>
                        </IconButton>
                    </a>
-                </div>
-            </div>
-            <div className={classes.bottom}>
-                <div className={classes.description}>
+                </MangaButtonsContainer>
+            </TopContentWrapper>
+            <BottomContentWrapper>
+                <Description>
                    <h4>{t('settings.about.title')}</h4>
                    <p>{manga.description}</p>
-                </div>
-                <div className={classes.genre}>
+                </Description>
+                <Genres>
                    {manga.genre.map((g) => (
                        <h5 key={g}>{g}</h5>
                    ))}
-                </div>
-            </div>
-        </div>
+                </Genres>
+            </BottomContentWrapper>
+        </DetailsWrapper>
    );
 };

--- a/src/theme.ts
+++ b/src/theme.ts
@@ -6,11 +6,7 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { Theme, createTheme as createMuiTheme } from '@mui/material/styles';
-
-declare module '@mui/styles/defaultTheme' {
-    interface DefaultTheme extends Theme {}
-}
+import { createTheme as createMuiTheme } from '@mui/material/styles';

 declare module '@mui/material/styles' {
    interface PaletteOptions {
--- a/yarn.lock
+++ b/yarn.lock
@@ -1811,7 +1811,7 @@
  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==

-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
  version "7.15.4"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -2551,29 +2551,6 @@
    "@emotion/cache" "^11.5.0"
    prop-types "^15.7.2"

-"@mui/styles@^5.0.2":
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.0.2.tgz#236b834cd07a07de0c17b104eedb810453f3839c"
-  integrity sha512-ANYnMHpiWHcV0dMrzrdCzYm+kNU0f7Gc5nFLRDWF+8fWZ40K2Cg5eMRkOW/nmM5M0wtmDI+GFVsCXgZkNq89uw==
-  dependencies:
-    "@babel/runtime" "^7.15.4"
-    "@emotion/hash" "^0.8.0"
-    "@mui/private-theming" "^5.0.1"
-    "@mui/types" "^7.0.0"
-    "@mui/utils" "^5.0.1"
-    clsx "^1.1.1"
-    csstype "^3.0.9"
-    hoist-non-react-statics "^3.3.2"
-    jss "^10.8.1"
-    jss-plugin-camel-case "^10.8.1"
-    jss-plugin-default-unit "^10.8.1"
-    jss-plugin-global "^10.8.1"
-    jss-plugin-nested "^10.8.1"
-    jss-plugin-props-sort "^10.8.1"
-    jss-plugin-rule-value-function "^10.8.1"
-    jss-plugin-vendor-prefixer "^10.8.1"
-    prop-types "^15.7.2"
-
 "@mui/system@^5.0.6":
  version "5.0.6"
  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.0.6.tgz#053ad18e3888f041137db9f0c0ac1486c86972a0"
@@ -4591,14 +4568,6 @@ css-tree@^1.1.2, css-tree@^1.1.3:
    mdn-data "2.0.14"
    source-map "^0.6.1"

-css-vendor@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
-  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
-  dependencies:
-    "@babel/runtime" "^7.8.3"
-    is-in-browser "^1.0.2"
-
 css-what@^3.2.1:
  version "3.4.2"
  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@@ -6312,11 +6281,6 @@ human-signals@^2.1.0:
  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==

-hyphenate-style-name@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
-  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
-
 i18next-browser-languagedetector@^7.0.1:
  version "7.0.1"
  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.0.1.tgz#ead34592edc96c6c3a618a51cb57ad027c5b5d87"
@@ -6553,11 +6517,6 @@ is-glob@^4.0.3:
  dependencies:
    is-extglob "^2.1.1"

-is-in-browser@^1.0.2, is-in-browser@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
-  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
-
 is-map@^2.0.1, is-map@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
@@ -7387,76 +7346,6 @@ jsonpointer@^5.0.0:
  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
  integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==

-jss-plugin-camel-case@^10.8.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.8.2.tgz#8d7f915c8115afaff8cbde08faf610ec9892fba6"
-  integrity sha512-2INyxR+1UdNuKf4v9It3tNfPvf7IPrtkiwzofeKuMd5D58/dxDJVUQYRVg/n460rTlHUfsEQx43hDrcxi9dSPA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    hyphenate-style-name "^1.0.3"
-    jss "10.8.2"
-
-jss-plugin-default-unit@^10.8.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.8.2.tgz#c66f12e02e0815d911b85c02c2a979ee7b4ce69a"
-  integrity sha512-UZ7cwT9NFYSG+SEy7noRU50s4zifulFdjkUNKE+u6mW7vFP960+RglWjTgMfh79G6OENZmaYnjHV/gcKV4nSxg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.8.2"
-
-jss-plugin-global@^10.8.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.8.2.tgz#1a35632a693cf50113bcc5ffe6b51969df79c4ec"
-  integrity sha512-UaYMSPsYZ7s/ECGoj4KoHC2jwQd5iQ7K+FFGnCAILdQrv7hPmvM2Ydg45ThT/sH46DqktCRV2SqjRuxeBH8nRA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.8.2"
-
-jss-plugin-nested@^10.8.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.8.2.tgz#79f3c7f75ea6a36ae72fe52e777035bb24d230c7"
-  integrity sha512-acRvuPJOb930fuYmhkJaa994EADpt8TxI63Iyg96C8FJ9T2xRyU5T6R1IYKRwUiqZo+2Sr7fdGzRTDD4uBZaMA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.8.2"
-    tiny-warning "^1.0.2"
-
-jss-plugin-props-sort@^10.8.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.8.2.tgz#e25a7471868652c394562b6dc5433dcaea7dff6f"
-  integrity sha512-wqdcjayKRWBZnNpLUrXvsWqh+5J5YToAQ+8HNBNw0kZxVvCDwzhK2Nx6AKs7p+5/MbAh2PLgNW5Ym/ysbVAuqQ==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.8.2"
-
-jss-plugin-rule-value-function@^10.8.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.8.2.tgz#55354b55f1b2968a15976729968f767f02d64049"
-  integrity sha512-bW0EKAs+0HXpb6BKJhrn94IDdiWb0CnSluTkh0rGEgyzY/nmD1uV/Wf6KGlesGOZ9gmJzQy+9FFdxIUID1c9Ug==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.8.2"
-    tiny-warning "^1.0.2"
-
-jss-plugin-vendor-prefixer@^10.8.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.8.2.tgz#ebb4a482642f34091e454901e21176441dd5f475"
-  integrity sha512-DeGv18QsSiYLSVIEB2+l0af6OToUe0JB+trpzUxyqD2QRC/5AzzDrCrYffO5AHZ81QbffYvSN/pkfZaTWpRXlg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    css-vendor "^2.0.8"
-    jss "10.8.2"
-
-jss@10.8.2, jss@^10.8.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-10.8.2.tgz#4b2a30b094b924629a64928236017a52c7c97505"
-  integrity sha512-FkoUNxI329CKQ9OQC8L72MBF9KPf5q8mIupAJ5twU7G7XREW7ahb+7jFfrjZ4iy1qvhx1HwIWUIvkZBDnKkEdQ==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    csstype "^3.0.2"
-    is-in-browser "^1.1.3"
-    tiny-warning "^1.0.2"
-
 "jsx-ast-utils@^2.4.1 || ^3.0.0":
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82"
@@ -10324,7 +10213,7 @@ tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==

-tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==