Use Typography in MangaDetails

src/components/atoms/Metadata.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 Stack, { StackProps } from '@mui/material/Stack';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+
+export const Metadata = ({
+    title,
+    value,
+    stackProps,
+    titleProps,
+    valueProps,
+}: {
+    title: string;
+    value: string;
+    stackProps?: StackProps;
+    titleProps?: TypographyProps;
+    valueProps?: TypographyProps;
+}) => (
+    <Stack
+        {...stackProps}
+        sx={{ flexDirection: 'row', columnGap: 1, flexWrap: 'wrap', alignItems: 'baseline', ...stackProps?.sx }}
+    >
+        <Typography {...titleProps}>{title}</Typography>
+        <Typography color="text.secondary" {...valueProps}>
+            {value}
+        </Typography>
+    </Stack>
+);

src/components/manga/MangaDetails.tsx

@@ -10,10 +10,11 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import PublicIcon from '@mui/icons-material/Public';
 import { styled } from '@mui/material/styles';
-import React, { useEffect, useMemo } from 'react';
+import React, { ComponentProps, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
 import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
 import { ISource, TManga } from '@/typings';
 import { makeToast } from '@/components/util/Toast';
 import { Mangas } from '@/lib/data/Mangas.ts';
@@ -21,6 +22,7 @@ import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
 import { CustomIconButton } from '@/components/atoms/CustomIconButton';
 import { TrackMangaButton } from '@/components/manga/TrackMangaButton.tsx';
 import { useManageMangaLibraryState } from '@/components/manga/useManageMangaLibraryState.tsx';
+import { Metadata as BaseMetadata } from '@/components/atoms/Metadata.tsx';
 
 const DetailsWrapper = styled('div')(({ theme }) => ({
     width: '100%',
@@ -59,7 +61,7 @@ const Thumbnail = styled('div')(() => ({
     // },
 }));
 
-const Metadata = styled('div')(({ theme }) => ({
+const MetadataContainer = styled('div')(({ theme }) => ({
     marginLeft: 15,
     maxWidth: '100%',
     '& span': {
@@ -69,6 +71,11 @@ const Metadata = styled('div')(({ theme }) => ({
         fontSize: '1.3em',
     },
 }));
+
+const Metadata = (props: ComponentProps<typeof BaseMetadata>) => (
+    <BaseMetadata {...props} titleProps={{ variant: 'h6' }} valueProps={{ variant: 'h6' }} />
+);
+
 const MangaButtonsContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-around',
@@ -181,19 +188,15 @@ export const MangaDetails: React.FC<IProps> = ({ manga }) => {
                         <Thumbnail>
                             <SpinnerImage src={Mangas.getThumbnailUrl(manga)} alt="Manga Thumbnail" />
                         </Thumbnail>
-                        <Metadata>
+                        <MetadataContainer>
-                            <h1>{manga.title}</h1>
+                            <Typography variant="h4" component="h1" sx={{ mb: 1 }}>
-                            <h3>
+                                {manga.title}
-                                {`${t('manga.label.author')}: `}
+                            </Typography>
-                                <span>{getValueOrUnknown(manga.author)}</span>
+                            <Metadata title={t('manga.label.author')} value={getValueOrUnknown(manga.author)} />
-                            </h3>
+                            <Metadata title={t('manga.label.artist')} value={getValueOrUnknown(manga.artist)} />
-                            <h3>
+                            <Metadata title={t('manga.label.status')} value={getValueOrUnknown(manga.status)} />
-                                {`${t('manga.label.artist')}: `}
+                            <Metadata title={t('source.title')} value={getSourceName(manga.source)} />
-                                <span>{getValueOrUnknown(manga.artist)}</span>
+                        </MetadataContainer>
-                            </h3>
-                            <h3>{`${t('manga.label.status')}: ${manga.status}`}</h3>
-                            <h3>{`${t('source.title')}: ${getSourceName(manga.source)}`}</h3>
-                        </Metadata>
                     </ThumbnailMetadataWrapper>
                     <MangaButtonsContainer>
                         <CustomIconButton

src/components/tracker/TrackerMangaCard.tsx

@@ -27,6 +27,7 @@ import sanitizeHtml from 'sanitize-html';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
 import { TrackerManga } from '@/lib/data/Trackers.ts';
 import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
+import { Metadata } from '@/components/atoms/Metadata.tsx';
 
 const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
     <Stack direction="row" gap="5px" justifyContent="space-between">
@@ -39,15 +40,6 @@ const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: b
     </Stack>
 );
 
-const TrackerMangaCardInfo = ({ title, value }: { title: string; value: string }) => (
-    <Stack direction="row" gap="5px" flexWrap="wrap">
-        <Typography variant="body1">{title}</Typography>
-        <Typography variant="body1" color="text.secondary">
-            {value}
-        </Typography>
-    </Stack>
-);
-
 const SUMMARY_COLLAPSED_SIZE = 50;
 const TrackerMangaCardSummary = ({ summary }: { summary: string }) => {
     const { t } = useTranslation();
@@ -164,9 +156,9 @@ export const TrackerMangaCard = ({
                                 <TrackerMangaCardLink url={manga.trackingUrl}>
                                     <TrackerMangaCardTitle title={manga.title} selected={selected} />
                                 </TrackerMangaCardLink>
-                                <TrackerMangaCardInfo title={t('global.label.type')} value={manga.publishingType} />
+                                <Metadata title={t('global.label.type')} value={manga.publishingType} />
-                                <TrackerMangaCardInfo title={t('global.label.started')} value={manga.startDate} />
+                                <Metadata title={t('global.label.started')} value={manga.startDate} />
-                                <TrackerMangaCardInfo title={t('manga.label.status')} value={manga.publishingStatus} />
+                                <Metadata title={t('manga.label.status')} value={manga.publishingStatus} />
                             </Stack>
                         </Stack>
                         <TrackerMangaCardSummary summary={manga.summary} />