refactor MangaCard

src/components/MangaCard.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 CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
@@ -14,63 +13,43 @@ import { Link } from 'react-router-dom';
 import { Grid } from '@mui/material';
 import useLocalStorage from 'util/useLocalStorage';
 import SpinnerImage from 'components/util/SpinnerImage';
+import { styled } from '@mui/system';
 
-const useStyles = makeStyles((theme) => ({
+const BottomGradient = styled('div')({
-    root: {
+    position: 'absolute',
-        display: 'flex',
+    bottom: 0,
-        // Preserve the shape of the manga cards, without this the manga card would chage it's
+    width: '100%',
-        // if all the images in a row failed to load then the whole row would change into a
+    height: '30%',
-        //  square shape
+    background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
-        aspectRatio: '225/350',
+});
-    },
-    wrapper: {
-        position: 'relative',
-        height: '100%',
-    },
-    gradient: {
-        position: 'absolute',
-        bottom: 0,
-        width: '100%',
-        height: '30%',
-        background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
-        opacity: 1,
-    },
-    gradient2: {
-        position: 'absolute',
-        bottom: 0,
-        width: '100%',
-        height: '20%',
-        background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
-    },
-    title: {
-        position: 'absolute',
-        bottom: 0,
-        padding: '0.5em',
-        color: 'white',
-        fontSize: '1.05rem',
-        textShadow: '0px 0px 3px #000000',
-    },
-    badge: {
-        position: 'absolute',
-        top: 2,
-        left: 2,
-        backgroundColor: theme.palette.primary.dark,
-        borderRadius: 5,
-        color: 'white',
-        padding: '0.1em',
-        paddingInline: '0.3em',
-        fontSize: '1.05rem',
-    },
-    image: {
-        height: '100%',
-        width: '100%',
-    },
 
-    spinner: {
+const BottomGradientDoubledDown = styled('div')({
-        minHeight: '400px',
+    position: 'absolute',
-        display: 'grid',
+    bottom: 0,
-        placeItems: 'center',
+    width: '100%',
-    },
+    height: '20%',
+    background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
+});
+
+const MangaTitle = styled(Typography)({
+    position: 'absolute',
+    bottom: 0,
+    padding: '0.5em',
+    color: 'white',
+    fontSize: '1.05rem',
+    textShadow: '0px 0px 3px #000000',
+});
+
+const UnreadBadge = styled(Typography)(({ theme }) => ({
+    position: 'absolute',
+    top: 2,
+    left: 2,
+    backgroundColor: theme.palette.primary.dark,
+    borderRadius: '5px',
+    color: 'white',
+    padding: '0.1em',
+    paddingInline: '0.3em',
+    fontSize: '1.05rem',
 }));
 
 const truncateText = (str: string, maxLength: number) => {
@@ -93,35 +72,52 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
             id, title, thumbnailUrl, unreadCount: unread,
         },
     } = props;
-    const classes = useStyles();
+
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
     const [useCache] = useLocalStorage<boolean>('useCache', true);
 
     return (
         <Grid item xs={6} sm={4} md={3} lg={2}>
             <Link to={`/manga/${id}/`}>
-                <Card className={classes.root} ref={ref}>
+                <Card
-                    <CardActionArea>
+                    sx={{
-                        <div className={classes.wrapper}>
+                        // force standard aspect ratio of manga covers
-                            {unread
+                        aspectRatio: '225/350',
-                                ? (
+                        display: 'flex',
-                                    <Typography className={classes.badge} component="span">
+                    }}
-                                        {unread}
+                    ref={ref}
-                                    </Typography>
+                >
-                                )
+                    <CardActionArea
-                                : null}
+                        sx={{
-                            <SpinnerImage
+                            position: 'relative',
-                                alt={title}
+                            height: '100%',
-                                src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
+                        }}
-                                spinnerClassName={classes.spinner}
+                    >
-                                imgClassName={classes.image}
+                        {unread! > 0
-                            />
+                            && (
-                            <div className={classes.gradient} />
+                                <UnreadBadge>
-                            <div className={classes.gradient2} />
+                                    {unread}
-                            <Typography className={classes.title}>
+                                </UnreadBadge>
-                                {truncateText(title, 61)}
+                            ) }
-                            </Typography>
+                        <SpinnerImage
-                        </div>
+                            alt={title}
+                            src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
+                            imgStyle={{
+                                height: '100%',
+                                width: '100%',
+                            }}
+                            spinnerStyle={{
+                                minHeight: '400px',
+                                display: 'grid',
+                                placeItems: 'center',
+                            }}
+                        />
+                        <BottomGradient />
+                        <BottomGradientDoubledDown />
+
+                        <MangaTitle>
+                            {truncateText(title, 61)}
+                        </MangaTitle>
                     </CardActionArea>
                 </Card>
             </Link>

src/components/util/SpinnerImage.tsx

@@ -5,8 +5,11 @@
  * 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 React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, CSSProperties } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
+import Box from '@mui/system/Box';
+import { Theme } from '@mui/system/createTheme';
+import { SxProps } from '@mui/system/styleFunctionSx';
 
 interface IProps {
     src: string
@@ -15,14 +18,16 @@ interface IProps {
     imgRef?: React.RefObject<HTMLImageElement>
 
     spinnerClassName?: string
+    spinnerStyle?: SxProps<Theme>
     imgClassName?: string
+    imgStyle?: CSSProperties
 
     onImageLoad?: () => void
 }
 
 export default function SpinnerImage(props: IProps) {
     const {
-        src, alt, onImageLoad, imgRef, spinnerClassName, imgClassName,
+        src, alt, onImageLoad, imgRef, spinnerClassName, imgClassName, spinnerStyle, imgStyle,
     } = props;
     const [imageSrc, setImagsrc] = useState<string>('');
 
@@ -48,19 +53,20 @@ export default function SpinnerImage(props: IProps) {
 
     if (imageSrc.length === 0) {
         return (
-            <div className={spinnerClassName}>
+            <Box className={spinnerClassName} sx={spinnerStyle}>
                 <CircularProgress thickness={5} />
-            </div>
+            </Box>
         );
     }
 
     if (imageSrc === 'Not Found') {
-        return <div className={spinnerClassName} />;
+        return <Box className={spinnerClassName} sx={spinnerStyle} />;
     }
 
     return (
         <img
             className={imgClassName}
+            style={imgStyle}
             ref={imgRef}
             src={imageSrc}
             alt={alt}
@@ -71,6 +77,8 @@ export default function SpinnerImage(props: IProps) {
 SpinnerImage.defaultProps = {
     spinnerClassName: '',
     imgClassName: '',
+    spinnerStyle: {},
+    imgStyle: {},
     onImageLoad: () => {},
     imgRef: undefined,
 };