From 299d3c111cd28fb7229ecf766b578888719e64d5 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 30 Aug 2024 21:19:40 +0200
Subject: [PATCH] Update manga cards styling

---
 .../manga/ContinueReadingButton.tsx           |  2 +-
 src/components/manga/MangaBadges.tsx          | 25 +++++----
 src/components/manga/MangaGridCard.tsx        | 53 +++++++++----------
 src/components/manga/MangaListCard.tsx        | 10 ++--
 4 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/src/components/manga/ContinueReadingButton.tsx b/src/components/manga/ContinueReadingButton.tsx
index b6c87407..093d8872 100644
--- a/src/components/manga/ContinueReadingButton.tsx
+++ b/src/components/manga/ContinueReadingButton.tsx
@@ -35,7 +35,7 @@ export const ContinueReadingButton = ({
             <Button
                 variant="contained"
                 size="small"
-                sx={{ minWidth: 'unset' }}
+                sx={{ minWidth: 'unset', py: 0.5, px: 0.75 }}
                 component={Link}
                 to={`${mangaLinkTo}chapter/${nextChapterIndexToRead}`}
                 onClick={(e) => e.stopPropagation()}
diff --git a/src/components/manga/MangaBadges.tsx b/src/components/manga/MangaBadges.tsx
index e68b8c69..3ef99fdb 100644
--- a/src/components/manga/MangaBadges.tsx
+++ b/src/components/manga/MangaBadges.tsx
@@ -14,18 +14,17 @@ import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsCon
 import { MangaCardMode } from '@/components/manga/MangaCard.types.tsx';
 import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
-const BadgeContainer = styled('div')({
+const BadgeContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     height: 'fit-content',
-    borderRadius: '5px',
+    borderRadius: theme.shape.borderRadius,
     overflow: 'hidden',
-    '& p': {
-        color: 'white',
-        padding: '0.1em',
-        paddingInline: '0.2em',
-        fontSize: '1.05rem',
-    },
-});
+}));
+
+const Badge = styled(Typography)(({ theme }) => ({
+    color: theme.palette.primary.contrastText,
+    paddingInline: theme.spacing(0.3),
+}));
 
 export const MangaBadges = ({
     inLibraryIndicator,
@@ -78,16 +77,16 @@ export const MangaBadges = ({
                 </Typography>
             )}
             {((showUnreadBadge && mode === 'default') || mode === 'duplicate') && (unread ?? 0) > 0 && (
-                <Typography sx={{ backgroundColor: 'primary.dark' }}>{unread}</Typography>
+                <Badge sx={{ backgroundColor: 'primary.dark' }}>{unread}</Badge>
             )}
             {((showDownloadBadge && mode === 'default') || mode === 'duplicate') && (downloadCount ?? 0) > 0 && (
-                <Typography
+                <Badge
                     sx={{
-                        backgroundColor: 'success.dark',
+                        backgroundColor: 'primary.light',
                     }}
                 >
                     {downloadCount}
-                </Typography>
+                </Badge>
             )}
         </BadgeContainer>
     );
diff --git a/src/components/manga/MangaGridCard.tsx b/src/components/manga/MangaGridCard.tsx
index faebecca..15744295 100644
--- a/src/components/manga/MangaGridCard.tsx
+++ b/src/components/manga/MangaGridCard.tsx
@@ -18,9 +18,9 @@ import { useRef } from 'react';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
 import { MangaOptionButton } from '@/components/manga/MangaOptionButton.tsx';
 import { GridLayout } from '@/components/context/LibraryOptionsContext.tsx';
-import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
 import { Mangas } from '@/lib/data/Mangas.ts';
 import { SpecificMangaCardProps } from '@/components/manga/MangaCard.types.tsx';
+import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines';
 
 const BottomGradient = styled('div')({
     position: 'absolute',
@@ -38,10 +38,6 @@ const BottomGradientDoubledDown = styled('div')({
     background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
 });
 
-const GridMangaTitle = styled(TypographyMaxLines)({
-    fontSize: '1.05rem',
-});
-
 export const MangaGridCard = ({
     manga,
     longPressBind,
@@ -74,7 +70,7 @@ export const MangaGridCard = ({
                 sx={{
                     display: 'flex',
                     flexDirection: 'column',
-                    margin: '2px',
+                    m: 0.25,
                     outline: selected ? '4px solid' : undefined,
                     borderRadius: selected ? '1px' : undefined,
                     outlineColor: (theme) => theme.palette.primary.main,
@@ -134,9 +130,9 @@ export const MangaGridCard = ({
                             direction="row"
                             sx={{
                                 position: 'absolute',
-                                top: 5,
-                                left: 5,
-                                right: 5,
+                                top: (theme) => theme.spacing(1),
+                                left: (theme) => theme.spacing(1),
+                                right: (theme) => theme.spacing(1),
                             }}
                         >
                             {mangaBadges}
@@ -163,21 +159,21 @@ export const MangaGridCard = ({
                                     position: 'absolute',
                                     bottom: 0,
                                     width: '100%',
-                                    margin: '0.5em 0',
-                                    padding: '0 0.5em',
-                                    gap: '0.5em',
+                                    p: 1,
+                                    gap: 1,
                                 }}
                             >
                                 {gridLayout !== GridLayout.Comfortable && (
                                     <Tooltip title={title} placement="top">
-                                        <GridMangaTitle
+                                        <TypographyMaxLines
+                                            component="h3"
                                             sx={{
                                                 color: 'white',
                                                 textShadow: '0px 0px 3px #000000',
                                             }}
                                         >
                                             {title}
-                                        </GridMangaTitle>
+                                        </TypographyMaxLines>
                                     </Tooltip>
                                 )}
                                 {continueReadingButton}
@@ -186,21 +182,20 @@ export const MangaGridCard = ({
                     </CardActionArea>
                 </Card>
                 {gridLayout === GridLayout.Comfortable && (
-                    <Tooltip title={title} placement="top">
-                        <GridMangaTitle
-                            sx={{
-                                position: 'relative',
-                                width: '100%',
-                                bottom: 0,
-                                margin: '0.5em 0',
-                                padding: '0 0.5em',
-                                color: 'text.primary',
-                                height: '3rem',
-                            }}
-                        >
-                            {title}
-                        </GridMangaTitle>
-                    </Tooltip>
+                    <Stack sx={{ pb: 1 }}>
+                        <Tooltip title={title} placement="top">
+                            <TypographyMaxLines
+                                component="h3"
+                                sx={{
+                                    color: 'text.primary',
+                                    height: '3rem',
+                                    pt: 0.5,
+                                }}
+                            >
+                                {title}
+                            </TypographyMaxLines>
+                        </Tooltip>
+                    </Stack>
                 )}
             </Box>
         </Link>
diff --git a/src/components/manga/MangaListCard.tsx b/src/components/manga/MangaListCard.tsx
index 5c939d14..872bec70 100644
--- a/src/components/manga/MangaListCard.tsx
+++ b/src/components/manga/MangaListCard.tsx
@@ -68,7 +68,7 @@ export const MangaListCard = ({
                         display: 'flex',
                         justifyContent: 'space-between',
                         alignItems: 'center',
-                        padding: 2,
+                        padding: 1.5,
                         position: 'relative',
                     }}
                 >
@@ -78,7 +78,7 @@ export const MangaListCard = ({
                             width: 56,
                             height: 56,
                             flex: '0 0 auto',
-                            marginRight: 2,
+                            marginRight: 1,
                         }}
                     >
                         <SpinnerImage
@@ -103,10 +103,12 @@ export const MangaListCard = ({
                         }}
                     >
                         <Tooltip title={title} placement="top">
-                            <TypographyMaxLines variant="h5">{title}</TypographyMaxLines>
+                            <TypographyMaxLines variant="h6" component="h3">
+                                {title}
+                            </TypographyMaxLines>
                         </Tooltip>
                     </Box>
-                    <Stack direction="row" alignItems="center" gap="5px">
+                    <Stack direction="row" alignItems="center" gap={0.5}>
                         {mangaBadges}
                         {continueReadingButton}
                         <MangaOptionButton