antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 18:13:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Normalize section spacing on album/artist detail pages

Browse source
This commit is contained in:
jeffvli 2024-02-01 04:06:56 -08:00
parent 6aba41c3d9
commit 3daa1aef4b
2 changed files with 48 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

93
src/renderer/features/artists/components/album-artist-detail-content.tsx
View file

@ -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