Fix/manga details buttons (#677)

* Move button icon on top of text on small screens

* Fix colors of buttons

In case a manga is in the library all buttons were colored blue instead of only the library button.
Use white as default color since buttons can also be disabled and with a grey default color it's not easy to tell if the button is disabled or not

* Remove wrapping "button" inside "a" tag

src/components/atoms/CustomIconButton.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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 { Button, ButtonProps, Stack, TypographyProps } from '@mui/material';
+
+export const CustomIconButton = <C extends React.ElementType>({
+    children,
+    ...props
+}: ButtonProps & TypographyProps<C, { component?: C }>) => (
+    <Button {...props}>
+        <Stack direction="row" alignItems="center" justifyContent="center" gap="10px" flexWrap="wrap">
+            {children}
+        </Stack>
+    </Button>
+);

src/components/manga/MangaDetails.tsx

@@ -13,7 +13,7 @@ import { styled } from '@mui/material/styles';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
-import Button from '@mui/material/Button';
+import { Link } from '@mui/material';
 import { ISource, TManga } from '@/typings';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/components/util/Toast';
@@ -23,6 +23,7 @@ import { Mangas } from '@/lib/data/Mangas.ts';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { Categories } from '@/lib/data/Categories.ts';
+import { CustomIconButton } from '@/components/atoms/CustomIconButton';
 
 const DetailsWrapper = styled('div')(({ theme }) => ({
     width: '100%',
@@ -71,13 +72,10 @@ const Metadata = styled('div')(({ theme }) => ({
         fontSize: '1.3em',
     },
 }));
-const MangaButtonsContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'inLibrary' })<{
+const MangaButtonsContainer = styled('div')(({ theme }) => ({
-    inLibrary: boolean;
-}>(({ theme, inLibrary }) => ({
     display: 'flex',
     justifyContent: 'space-around',
-    '& button': {
+    '& button, a': {
-        color: inLibrary ? '#2196f3' : 'inherit',
         borderRadius: '25px',
         textTransform: 'none',
         paddingLeft: '20px',
@@ -87,13 +85,6 @@ const MangaButtonsContainer = styled('div', { shouldForwardProp: (prop) => prop
             fontSize: 'larger',
         },
     },
-    '& a': {
-        textDecoration: 'none',
-        color: '#858585',
-        '& button': {
-            color: 'inherit',
-        },
-    },
 }));
 const BottomContentWrapper = styled('div')(({ theme }) => ({
     paddingLeft: '10px',
@@ -133,21 +124,29 @@ const Genres = styled('div')(() => ({
 const OpenSourceButton = ({ url }: { url?: string | null }) => {
     const { t } = useTranslation();
 
-    if (!url) {
+    const button = useMemo(
-        return (
+        () => (
-            <Button disabled={!url} startIcon={<PublicIcon />} size="large">
+            <CustomIconButton
+                size="large"
+                disabled={!url}
+                sx={{ color: 'inherit' }}
+                component={Link}
+                href={url ?? undefined}
+                target="_blank"
+                rel="noreferrer"
+            >
+                <PublicIcon />
                 {t('global.button.open_site')}
-            </Button>
+            </CustomIconButton>
-        );
+        ),
+        [url],
+    );
+
+    if (!url) {
+        return button;
     }
 
-    return (
+    return button;
-        <a href={url} target="_blank" rel="noreferrer">
-            <Button startIcon={<PublicIcon />} size="large">
-                {t('global.button.open_site')}
-            </Button>
-        </a>
-    );
 };
 
 interface IProps {
@@ -249,17 +248,16 @@ export const MangaDetails: React.FC<IProps> = ({ manga }) => {
                             <h3>{`${t('source.title')}: ${getSourceName(manga.source)}`}</h3>
                         </Metadata>
                     </ThumbnailMetadataWrapper>
-                    <MangaButtonsContainer inLibrary={manga.inLibrary}>
+                    <MangaButtonsContainer>
-                        <div>
+                        <CustomIconButton
-                            <Button
+                            disabled={areSettingsLoading || categories.loading}
-                                disabled={areSettingsLoading || categories.loading}
+                            onClick={manga.inLibrary ? removeFromLibrary : handleAddToLibraryClick}
-                                startIcon={manga.inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
+                            size="large"
-                                onClick={manga.inLibrary ? removeFromLibrary : handleAddToLibraryClick}
+                            sx={{ color: manga.inLibrary ? '#2196f3' : 'inherit' }}
-                                size="large"
+                        >
-                            >
+                            {manga.inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
-                                {manga.inLibrary ? t('manga.button.in_library') : t('manga.button.add_to_library')}
+                            {manga.inLibrary ? t('manga.button.in_library') : t('manga.button.add_to_library')}
-                            </Button>
+                        </CustomIconButton>
-                        </div>
                         <OpenSourceButton url={manga.realUrl} />
                     </MangaButtonsContainer>
                 </TopContentWrapper>