cleaning up cards

components/Artist/component.tsx

@@ -7,6 +7,7 @@ import { FlatList } from "react-native";
 import { Card } from "../Global/card";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { StackParamList } from "../types";
+import { H5 } from "../Global/text";
 
 interface ArtistProps {
     artistId: string,
@@ -28,6 +29,7 @@ export default function Artist(props: ArtistProps): React.JSX.Element {
             >
                 <Avatar itemId={props.artistId} />
 
+                <H5>Albums</H5>
                 <FlatList
                     contentContainerStyle={{
                         flexGrow: 1,
@@ -41,7 +43,7 @@ export default function Artist(props: ArtistProps): React.JSX.Element {
                             <Card
                                 caption={album.Name}
                                 subCaption={album.ProductionYear?.toString()}
-                                width={250}
+                                width={200}
                                 marginHorizontal={20}
                                 cornered 
                                 itemId={album.Id!}

components/Global/card.tsx

@@ -45,11 +45,7 @@ export function Card(props: CardProps) {
                 height={props.width ?? 150}
                 {...props}
             >
-                <TamaguiCard.Header padded>
-                
-
-                </TamaguiCard.Header>
-                <TamaguiCard.Footer>
+                <TamaguiCard.Header>
                     <CachedImage 
                             source={getImageApi(apiClient!)
                                 .getItemImageUrlById(
@@ -62,6 +58,8 @@ export function Card(props: CardProps) {
                                 borderRadius: props.cornered ? 2 : 25
                             }}
                     />
+                </TamaguiCard.Header>
+                <TamaguiCard.Footer>
                 </TamaguiCard.Footer>
                 <TamaguiCard.Background>
                     <CachedImage 
@@ -85,7 +83,6 @@ export function Card(props: CardProps) {
                     width={dimensions.width}
                 >
                     <H5 
-                        textAlign="center"
                         lineBreakStrategyIOS="standard"
                         numberOfLines={1}
                     >

components/Global/text.tsx

@@ -1,4 +1,12 @@
-import { H1 as TamaguiH1, H2 as TamaguiH2, SizeTokens, Label as TamaguiLabel, H5, Paragraph, TextProps as TamaguiTextProps } from "tamagui"
+import { 
+    H1 as TamaguiH1, 
+    H2 as TamaguiH2, 
+    H5 as TamaguiH5, 
+    Label as TamaguiLabel, 
+    SizeTokens, 
+    Paragraph, 
+    TextProps as TamaguiTextProps 
+} from "tamagui"
 
 interface LabelProps {
     htmlFor: string,
@@ -24,6 +32,12 @@ export function H2({ children }: { children: string }): React.JSX.Element {
     )
 }
 
+export function H5({ children }: { children: string }): React.JSX.Element {
+    return (
+        <TamaguiH5 marginVertical={5}>{ children }</TamaguiH5>
+    )
+}
+
 interface TextProps extends TamaguiTextProps {
     bold?: boolean | undefined
     children: string;