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) => ({
-    root: {
-        display: 'flex',
-        // Preserve the shape of the manga cards, without this the manga card would chage it's
-        // if all the images in a row failed to load then the whole row would change into a
-        //  square shape
-        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%',
-    },
+const BottomGradient = styled('div')({
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    height: '30%',
+    background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
+});
 
-    spinner: {
-        minHeight: '400px',
-        display: 'grid',
-        placeItems: 'center',
-    },
+const BottomGradientDoubledDown = styled('div')({
+    position: 'absolute',
+    bottom: 0,
+    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}>
-                    <CardActionArea>
-                        <div className={classes.wrapper}>
-                            {unread
-                                ? (
-                                    <Typography className={classes.badge} component="span">
-                                        {unread}
-                                    </Typography>
-                                )
-                                : null}
-                            <SpinnerImage
-                                alt={title}
-                                src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
-                                spinnerClassName={classes.spinner}
-                                imgClassName={classes.image}
-                            />
-                            <div className={classes.gradient} />
-                            <div className={classes.gradient2} />
-                            <Typography className={classes.title}>
-                                {truncateText(title, 61)}
-                            </Typography>
-                        </div>
+                <Card
+                    sx={{
+                        // force standard aspect ratio of manga covers
+                        aspectRatio: '225/350',
+                        display: 'flex',
+                    }}
+                    ref={ref}
+                >
+                    <CardActionArea
+                        sx={{
+                            position: 'relative',
+                            height: '100%',
+                        }}
+                    >
+                        {unread! > 0
+                            && (
+                                <UnreadBadge>
+                                    {unread}
+                                </UnreadBadge>
+                            ) }
+                        <SpinnerImage
+                            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>