From 8ae368ea4ff4d52468dbb3e9925ba7f9ebbbd981 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 21 May 2023 15:36:15 -0700
Subject: [PATCH] Change artist display component

---
 .../albums/components/album-detail-header.tsx     | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx
index 46a0f74a..5dcc7c45 100644
--- a/src/renderer/features/albums/components/album-detail-header.tsx
+++ b/src/renderer/features/albums/components/album-detail-header.tsx
@@ -3,7 +3,7 @@ import { forwardRef, Fragment, Ref } from 'react';
 import { generatePath, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import { LibraryItem, ServerType } from '/@/renderer/api/types';
-import { Button, Rating, Text } from '/@/renderer/components';
+import { Rating, Text } from '/@/renderer/components';
 import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
 import { LibraryHeader, useSetRating } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
@@ -98,26 +98,27 @@ export const AlbumDetailHeader = forwardRef(
               )}
             </Group>
             <Group
-              spacing="sm"
+              spacing="md"
               sx={{
                 WebkitBoxOrient: 'vertical',
                 WebkitLineClamp: 2,
-                display: '-webkit-box',
                 overflow: 'hidden',
               }}
             >
               {detailQuery?.data?.albumArtists.map((artist) => (
-                <Button
+                <Text
                   key={`artist-${artist.id}`}
+                  $link
                   component={Link}
-                  size="sm"
+                  fw={600}
+                  size="md"
                   to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                     albumArtistId: artist.id,
                   })}
-                  variant="outline"
+                  variant="subtle"
                 >
                   {artist.name}
-                </Button>
+                </Text>
               ))}
             </Group>
           </Stack>