card improvements and artist page more beautiful

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!}
                             />

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>

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 {

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 () => {