From e0e29c737ed99f8bda1cbfa84050e5058989020a Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Tue, 26 Nov 2024 08:50:11 -0600
Subject: [PATCH] make artist image circular and albums rounded

---
 components/Home/helpers/recent-artists.tsx  | 2 +-
 components/Home/helpers/recently-played.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/Home/helpers/recent-artists.tsx b/components/Home/helpers/recent-artists.tsx
index 54d7ca52..f83b6814 100644
--- a/components/Home/helpers/recent-artists.tsx
+++ b/components/Home/helpers/recent-artists.tsx
@@ -26,7 +26,7 @@ export default function RecentArtists(): React.JSX.Element {
                         gap="$2" 
                         alignContent="center"
                     >
-                        <Avatar>
+                        <Avatar circular>
                             <Avatar.Image src={`${server!.url}/Items/${recentArtist.Id!}/Images/Primary`} />
                             <Avatar.Fallback backgroundColor={Colors.Primary}/>
                         </Avatar>
diff --git a/components/Home/helpers/recently-played.tsx b/components/Home/helpers/recently-played.tsx
index 01f343eb..4f7e46b2 100644
--- a/components/Home/helpers/recently-played.tsx
+++ b/components/Home/helpers/recently-played.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Avatar, ScrollView, Text } from "tamagui";
+import { Avatar, ScrollView, Text, YStack } from "tamagui";
 import { useApiClientContext } from "../../jellyfin-api-provider";
 import { useRecentlyPlayed } from "../../../api/queries/recently-played";
 import { Stack } from "tamagui"
@@ -21,13 +21,13 @@ export default function RecentlyPlayed(): React.JSX.Element {
         <ScrollView horizontal>
             { data && data.map((recentlyPlayedTrack) => {
                 return (
-                    <Stack maxWidth={150} gap="$2">
-                        <Avatar>
+                    <YStack maxWidth={150} gap="$2">
+                        <Avatar borderRadius={2}>
                             <Avatar.Image src={`${server!.url}/Items/${recentlyPlayedTrack.AlbumId}/Images/Primary`} />
                             <Avatar.Fallback backgroundColor={Colors.Primary}/>
                         </Avatar>
                         <Text>{recentlyPlayedTrack.Name}</Text>
-                    </Stack>
+                    </YStack>
                 )
             })}
         </ScrollView>