From 34f793858b3a0442252c06753cde16900a0173dc Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Fri, 29 Nov 2024 10:01:51 -0600
Subject: [PATCH] linear gradient in background?

---
 components/Global/card.tsx    | 22 +++++++++++++++-------
 components/Home/component.tsx |  3 ++-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/Global/card.tsx b/components/Global/card.tsx
index 56928ebd..1c6aa47e 100644
--- a/components/Global/card.tsx
+++ b/components/Global/card.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import type { CardProps as TamaguiCardProps } from "tamagui"
-import { H3, Image, Card as TamaguiCard } from "tamagui";
+import { H3, Image, Card as TamaguiCard, ZStack } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
 import { useApiClientContext } from "../jellyfin-api-provider";
 import { cardDimensions } from "./component.config";
 
@@ -36,12 +37,19 @@ export function Card(props: CardProps) {
             )}
             </TamaguiCard.Footer>
             <TamaguiCard.Background>
-                <Image
-                alignSelf="center"
-                source={{
-                    uri: `${server!.url}/Items/${props.itemId}/Images/Primary`,
-                }}
-                />
+                <ZStack>
+                    <LinearGradient
+                        colors={["$colorTransparent", "$black4"]}
+                        start={[1, 1]}
+                        end={[0,0]}
+                    />
+                    <Image
+                    alignSelf="center"
+                    source={{
+                        uri: `${server!.url}/Items/${props.itemId}/Images/Primary`,
+                    }}
+                    />
+                </ZStack>
             </TamaguiCard.Background>
         </TamaguiCard>
     )
diff --git a/components/Home/component.tsx b/components/Home/component.tsx
index 8500665d..4ae69426 100644
--- a/components/Home/component.tsx
+++ b/components/Home/component.tsx
@@ -66,8 +66,9 @@ function ProvidedHome({ route, navigation }: ProvidedHomeProps): React.JSX.Eleme
                 }>
                 <YStack alignContent='flex-start'>
                     <XStack>
-                        <Avatar maxHeight={30} itemId={user!.id} />
                         <H3>{`Hi, ${user!.name}`}</H3>
+                        <YStack />
+                        <Avatar maxHeight={30} itemId={user!.id} />
                     </XStack>
                     <RecentArtists route={route} navigation={navigation} />
                     <RecentlyPlayed />