Update manga cards styling

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()}

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',
+const Badge = styled(Typography)(({ theme }) => ({
-        paddingInline: '0.2em',
+    color: theme.palette.primary.contrastText,
-        fontSize: '1.05rem',
+    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>
     );

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,
+                                top: (theme) => theme.spacing(1),
-                                left: 5,
+                                left: (theme) => theme.spacing(1),
-                                right: 5,
+                                right: (theme) => theme.spacing(1),
                             }}
                         >
                             {mangaBadges}
@@ -163,21 +159,21 @@ export const MangaGridCard = ({
                                     position: 'absolute',
                                     bottom: 0,
                                     width: '100%',
-                                    margin: '0.5em 0',
+                                    p: 1,
-                                    padding: '0 0.5em',
+                                    gap: 1,
-                                    gap: '0.5em',
                                 }}
                             >
                                 {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 && (
+                    <Stack sx={{ pb: 1 }}>
                         <Tooltip title={title} placement="top">
-                        <GridMangaTitle
+                            <TypographyMaxLines
+                                component="h3"
                                 sx={{
-                                position: 'relative',
-                                width: '100%',
-                                bottom: 0,
-                                margin: '0.5em 0',
-                                padding: '0 0.5em',
                                     color: 'text.primary',
                                     height: '3rem',
+                                    pt: 0.5,
                                 }}
                             >
                                 {title}
-                        </GridMangaTitle>
+                            </TypographyMaxLines>
                         </Tooltip>
+                    </Stack>
                 )}
             </Box>
         </Link>

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