From 3daa1aef4bd6622fa0399377b49b27356e8fa245 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 1 Feb 2024 04:06:56 -0800
Subject: [PATCH] Normalize section spacing on album/artist detail pages

---
 .../components/album-detail-content.tsx       | 20 +---
 .../album-artist-detail-content.tsx           | 93 +++++++++----------
 2 files changed, 48 insertions(+), 65 deletions(-)

diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx
index 48b154bb..d75216ee 100644
--- a/src/renderer/features/albums/components/album-detail-content.tsx
+++ b/src/renderer/features/albums/components/album-detail-content.tsx
@@ -1,7 +1,7 @@
 import { MutableRefObject, useCallback, useMemo } from 'react';
 import { RowDoubleClickedEvent, RowHeightParams, RowNode } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Box, Group, Spoiler, Stack } from '@mantine/core';
+import { Box, Group, Stack } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
 import { FaLastfmSquare } from 'react-icons/fa';
@@ -12,7 +12,7 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { AlbumListSort, LibraryItem, QueueSong, SortOrder } from '/@/renderer/api/types';
-import { Button, Popover } from '/@/renderer/components';
+import { Button, Popover, Spoiler } from '/@/renderer/components';
 import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel';
 import {
     TableConfigDropdown,
@@ -58,6 +58,7 @@ const ContentContainer = styled.div`
 const DetailContainer = styled.div`
     display: flex;
     flex-direction: column;
+    gap: 2rem;
     padding: 1rem 2rem 5rem;
     overflow: hidden;
 `;
@@ -328,7 +329,6 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                 <Box component="section">
                     <Group
                         position="apart"
-                        py="1rem"
                         spacing="sm"
                     >
                         <Group>
@@ -380,10 +380,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                     </Group>
                 </Box>
                 {showGenres && (
-                    <Box
-                        component="section"
-                        py="1rem"
-                    >
+                    <Box component="section">
                         <Group spacing="sm">
                             {detailQuery?.data?.genres?.map((genre) => (
                                 <Button
@@ -445,14 +442,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                 ) : null}
                 {comment && (
                     <Box component="section">
-                        <Spoiler
-                            hideLabel={t('common.collapse')}
-                            maxHeight={60}
-                            mb={20}
-                            showLabel={t('common.expand')}
-                        >
-                            {replaceURLWithHTMLLinks(comment)}
-                        </Spoiler>
+                        <Spoiler maxHeight={75}>{replaceURLWithHTMLLinks(comment)}</Spoiler>
                     </Box>
                 )}
                 <Box style={{ minHeight: '300px' }}>
diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx
index 83120639..e0615952 100644
--- a/src/renderer/features/artists/components/album-artist-detail-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx
@@ -48,7 +48,7 @@ const ContentContainer = styled.div`
 const DetailContainer = styled.div`
     display: flex;
     flex-direction: column;
-    gap: 3rem;
+    gap: 2rem;
     padding: 1rem 2rem 5rem;
     overflow: hidden;
 
@@ -341,61 +341,58 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         <ContentContainer ref={cq.ref}>
             <LibraryBackgroundOverlay $backgroundColor={background} />
             <DetailContainer>
-                <Stack spacing="lg">
-                    <Group spacing="md">
-                        <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
-                        <Group spacing="xs">
-                            <Button
-                                compact
-                                loading={
-                                    createFavoriteMutation.isLoading ||
-                                    deleteFavoriteMutation.isLoading
-                                }
-                                variant="subtle"
-                                onClick={handleFavorite}
-                            >
-                                {detailQuery?.data?.userFavorite ? (
-                                    <RiHeartFill
-                                        color="red"
-                                        size={20}
-                                    />
-                                ) : (
-                                    <RiHeartLine size={20} />
-                                )}
-                            </Button>
-                            <Button
-                                compact
-                                variant="subtle"
-                                onClick={(e) => {
-                                    if (!detailQuery?.data) return;
-                                    handleGeneralContextMenu(e, [detailQuery.data!]);
-                                }}
-                            >
-                                <RiMoreFill size={20} />
-                            </Button>
-                        </Group>
-                    </Group>
-                    <Group spacing="md">
+                <Group spacing="md">
+                    <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
+                    <Group spacing="xs">
                         <Button
                             compact
-                            uppercase
-                            component={Link}
-                            to={artistDiscographyLink}
+                            loading={
+                                createFavoriteMutation.isLoading || deleteFavoriteMutation.isLoading
+                            }
                             variant="subtle"
+                            onClick={handleFavorite}
                         >
-                            View discography
+                            {detailQuery?.data?.userFavorite ? (
+                                <RiHeartFill
+                                    color="red"
+                                    size={20}
+                                />
+                            ) : (
+                                <RiHeartLine size={20} />
+                            )}
                         </Button>
                         <Button
                             compact
-                            uppercase
-                            component={Link}
-                            to={artistSongsLink}
                             variant="subtle"
+                            onClick={(e) => {
+                                if (!detailQuery?.data) return;
+                                handleGeneralContextMenu(e, [detailQuery.data!]);
+                            }}
                         >
-                            View all songs
+                            <RiMoreFill size={20} />
                         </Button>
                     </Group>
-                </Stack>
+                </Group>
+                <Group spacing="md">
+                    <Button
+                        compact
+                        uppercase
+                        component={Link}
+                        to={artistDiscographyLink}
+                        variant="subtle"
+                    >
+                        View discography
+                    </Button>
+                    <Button
+                        compact
+                        uppercase
+                        component={Link}
+                        to={artistSongsLink}
+                        variant="subtle"
+                    >
+                        View all songs
+                    </Button>
+                </Group>
                 {showGenres ? (
                     <Box component="section">
                         <Group spacing="sm">
@@ -418,11 +415,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                     </Box>
                 ) : null}
                 {externalLinks ? (
-                    <Box
-                        component="section"
-                        mb={-20}
-                        mt={-20}
-                    >
+                    <Box component="section">
                         <Group spacing="sm">
                             <Button
                                 compact