From ef4cdfa0281241aece6c0f54b53fcb3a7515428a Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 9 Mar 2023 18:16:57 -0800
Subject: [PATCH] Set artist links to use outline button

---
 .../albums/components/album-detail-header.tsx | 37 +++++++------------
 1 file changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx
index 7bb8d8d7..357bec6f 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 { Rating, Text } from '/@/renderer/components';
+import { Button, Rating, Text } from '/@/renderer/components';
 import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
 import { LibraryHeader, useUpdateRating } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
@@ -104,29 +104,18 @@ export const AlbumDetailHeader = forwardRef(
                 overflow: 'hidden',
               }}
             >
-              {detailQuery?.data?.albumArtists.map((artist, index) => (
-                <Fragment key={`artist-${artist.id}`}>
-                  {index > 0 && (
-                    <Text
-                      sx={{
-                        display: 'inline-block',
-                        padding: '0 0.5rem',
-                      }}
-                    >
-                      •
-                    </Text>
-                  )}
-                  <Text
-                    $link
-                    component={Link}
-                    to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                      albumArtistId: artist.id,
-                    })}
-                    weight={600}
-                  >
-                    {artist.name}
-                  </Text>
-                </Fragment>
+              {detailQuery?.data?.albumArtists.map((artist) => (
+                <Button
+                  key={`artist-${artist.id}`}
+                  component={Link}
+                  size="sm"
+                  to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                    albumArtistId: artist.id,
+                  })}
+                  variant="outline"
+                >
+                  {artist.name}
+                </Button>
               ))}
             </Group>
           </Stack>