From 37d6f3560421a796ad9664a9f2d23e929e6677f2 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 30 Aug 2024 15:52:02 +0200
Subject: [PATCH] Update manga page chapter list styling

---
 src/components/chapter/ChapterCard.tsx | 6 +++---
 src/components/chapter/ChapterList.tsx | 7 ++++---
 src/theme.ts                           | 4 +++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/chapter/ChapterCard.tsx b/src/components/chapter/ChapterCard.tsx
index 18584d94..1755fd32 100644
--- a/src/components/chapter/ChapterCard.tsx
+++ b/src/components/chapter/ChapterCard.tsx
@@ -116,8 +116,8 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
                                         display: 'flex',
                                         justifyContent: 'space-between',
                                         alignItems: 'center',
-                                        padding: 2,
-                                        '&:last-child': { pb: 2 },
+                                        padding: 1.5,
+                                        '&:last-child': { pb: 1.5 },
                                     }}
                                 >
                                     <Stack direction="column" flex={1}>
@@ -129,7 +129,7 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
                                             }}
                                         >
                                             {chapter.isBookmarked && <BookmarkIcon color="primary" />}
-                                            <TypographyMaxLines variant="h5" component="h2">
+                                            <TypographyMaxLines variant="h6" component="h4">
                                                 {showChapterNumber
                                                     ? `${t('chapter.title_one')} ${chapter.chapterNumber}`
                                                     : chapter.name}
diff --git a/src/components/chapter/ChapterList.tsx b/src/components/chapter/ChapterList.tsx
index b62ae964..f910436d 100644
--- a/src/components/chapter/ChapterList.tsx
+++ b/src/components/chapter/ChapterList.tsx
@@ -45,10 +45,11 @@ import { Mangas } from '@/lib/data/Mangas';
 import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
 import { useResizeObserver } from '@/util/useResizeObserver.tsx';
 import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
+import { SCROLLBAR_WIDTH } from '@/theme.ts';
 
 const ChapterListHeader = styled(Stack)(({ theme }) => ({
     padding: theme.spacing(1),
-    paddingRight: `calc(14px + ${theme.spacing(1)})`,
+    paddingRight: `calc(${SCROLLBAR_WIDTH}px + ${theme.spacing(1)})`,
     paddingBottom: 0,
     [theme.breakpoints.down('md')]: {
         paddingRight: theme.spacing(1),
@@ -183,13 +184,13 @@ export const ChapterList = ({
                     alignItems="center"
                     justifyContent="space-between"
                 >
-                    <Typography variant="h5">
+                    <Typography variant="h5" component="h3">
                         {`${visibleChapters.length} ${t('chapter.title_one', {
                             count: visibleChapters.length,
                         })}`}
                     </Typography>
 
-                    <Stack direction="row" sx={{ paddingRight: '24px' }}>
+                    <Stack direction="row">
                         <Tooltip title={t('chapter.action.mark_as_read.add.label.action.current')}>
                             <IconButton
                                 disabled={areAllChaptersRead}
diff --git a/src/theme.ts b/src/theme.ts
index 608b597f..7c1f7560 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -25,6 +25,8 @@ declare module '@mui/material/styles/createPalette' {
     }
 }
 
+export const SCROLLBAR_WIDTH = 14;
+
 type DefaultMuiPalette = Omit<MuiPalette, 'custom'>;
 type DefaultMuiTheme = Omit<Theme, 'palette'> & { palette: DefaultMuiPalette };
 
@@ -55,7 +57,7 @@ export const createTheme = (dark?: boolean, direction: Direction = 'ltr') => {
                 MuiCssBaseline: {
                     styleOverrides: `
                         *::-webkit-scrollbar {
-                          width: 14px;
+                          width: ${SCROLLBAR_WIDTH}px;
                         }
                         *::-webkit-scrollbar-thumb {
                           border: 4px solid rgba(0, 0, 0, 0);