From 2ee9d1ac06f71e8e8f598fa12c344445fbdc812f Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Sun, 29 Dec 2024 08:47:04 -0600
Subject: [PATCH] card improvements and artist page more beautiful

---
 components/Artist/component.tsx             | 13 ++++++-------
 components/Global/card.tsx                  |  3 ++-
 components/Global/text.tsx                  |  6 ++----
 components/Home/helpers/recently-played.tsx |  1 +
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/components/Artist/component.tsx b/components/Artist/component.tsx
index bd854031..ee1c8b2b 100644
--- a/components/Artist/component.tsx
+++ b/components/Artist/component.tsx
@@ -23,19 +23,18 @@ export default function Artist({ artistId, artistName }: { artistId: string, art
                 <FlatList
                     contentContainerStyle={{
                         flexGrow: 1,
-                        justifyContent: 'center'
+                        justifyContent: 'center',
+                        alignItems: "center"
                     }}
                     data={albums}
                     numColumns={2} // TODO: Make this adjustable
                     renderItem={({ item: album }) => {
                         return (
                             <Card
-                                caption={
-                                    <>
-                                        <H5>{`${album.Name}`}</H5>
-                                        <Text>{`${album.ProductionYear}`}</Text>
-                                    </>
-                                }
+                                caption={album.Name}
+                                subCaption={album.ProductionYear?.toString()}
+                                width={250}
+                                marginHorizontal={20}
                                 cornered 
                                 itemId={album.Id!}
                             />
diff --git a/components/Global/card.tsx b/components/Global/card.tsx
index f83f3549..1b7e3db6 100644
--- a/components/Global/card.tsx
+++ b/components/Global/card.tsx
@@ -40,7 +40,8 @@ export function Card(props: CardProps) {
                 hoverStyle={props.onPress ? { scale: 0.925 } : {}}
                 pressStyle={props.onPress ? { scale: 0.875 } : {}}
                 borderRadius={props.cornered ? 2 : 25}
-                {...dimensions}
+                width={props.width ?? 150}
+                height={props.width ?? 150 + 50}
                 {...props}
             >
                 <TamaguiCard.Header padded>
diff --git a/components/Global/text.tsx b/components/Global/text.tsx
index 5ac1efe8..28576ea9 100644
--- a/components/Global/text.tsx
+++ b/components/Global/text.tsx
@@ -1,4 +1,4 @@
-import { H1 as TamaguiH1, H2 as TamaguiH2, SizeTokens, Label as TamaguiLabel, H5, Paragraph } from "tamagui"
+import { H1 as TamaguiH1, H2 as TamaguiH2, SizeTokens, Label as TamaguiLabel, H5, Paragraph, TextProps as TamaguiTextProps } from "tamagui"
 
 interface LabelProps {
     htmlFor: string,
@@ -24,11 +24,9 @@ export function H2({ children }: { children: string }): React.JSX.Element {
     )
 }
 
-interface TextProps {
+interface TextProps extends TamaguiTextProps {
     bold?: boolean | undefined
     children: string;
-    width?: number;
-    textAlign?: "left" | "right" | "unset" | "auto" | "center" | "justify" | undefined;
 }
 
 export function Text(props: TextProps): React.JSX.Element {
diff --git a/components/Home/helpers/recently-played.tsx b/components/Home/helpers/recently-played.tsx
index 191100b5..e6b76b7c 100644
--- a/components/Home/helpers/recently-played.tsx
+++ b/components/Home/helpers/recently-played.tsx
@@ -30,6 +30,7 @@ export default function RecentlyPlayed(): React.JSX.Element {
                             caption={recentlyPlayedTrack.Name}
                             subCaption={`${recentlyPlayedTrack.Artists?.join(", ")}`}
                             cornered
+                            width={150}
                             itemId={recentlyPlayedTrack.AlbumId!}
                             marginRight={20}
                             onPress={async () => {