style changes

components/Artist/component.tsx

@@ -4,6 +4,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { useArtistAlbums } from "../../api/queries/artist";
 import { useApiClientContext } from "../jellyfin-api-provider";
 import { FlatList } from "react-native";
+import { Card } from "../Global/card";
 
 export default function Artist({ artistId, artistName }: { artistId: string, artistName: string  }): React.JSX.Element {
 
@@ -13,7 +14,10 @@ export default function Artist({ artistId, artistName }: { artistId: string, art
 
     return (
         <SafeAreaView>
-            <ScrollView contentInsetAdjustmentBehavior="automatic">
+            <ScrollView 
+                alignContent="center" 
+                contentInsetAdjustmentBehavior="automatic"
+            >
                 <Avatar itemId={artistId} />
 
                 <FlatList
@@ -21,9 +25,9 @@ export default function Artist({ artistId, artistName }: { artistId: string, art
                     numColumns={2} // TODO: Make this adjustable
                     renderItem={({ item: album }) => {
                         return (
-                            <Avatar itemId={album.Id!} subheading={album.Name}>
-                                { album.ProductionYear?.toString() ?? "" }
-                            </Avatar>
+                            <Card itemId={album.Id!}>
+                                { album.Name! }
+                            </Card>
                         )
                     }}
                 />

components/Global/card.tsx

@@ -17,35 +17,36 @@ export function Card(props: CardProps) {
     const { server } = useApiClientContext();
 
     return (
-      <TamaguiCard 
-        elevate 
-        size="$4" 
-        animation="bouncy"
-        hoverStyle={{ scale: 0.925 }}
-        pressStyle={{ scale: 0.875 }}
-        {...cardDimensions}
-        {...props}
-    >
-        <TamaguiCard.Header padded>
-          { props.children && (
-              <H3>{ props.children }</H3>
-          )}
-        </TamaguiCard.Header>
-        <TamaguiCard.Footer padded>
-          { props.footer && (
-            props.footer
-          )}
-        </TamaguiCard.Footer>
-        <TamaguiCard.Background>
-            <Image
-            alignSelf="center"
-            source={{
-                uri: `${server!.url}/Items/${props.itemId}/Images/Primary`,
-                ...cardDimensions
-            }}
-            />
-        </TamaguiCard.Background>
-      </TamaguiCard>
+        <TamaguiCard 
+            elevate 
+            size="$4" 
+            animation="bouncy"
+            hoverStyle={{ scale: 0.925 }}
+            pressStyle={{ scale: 0.875 }}
+            borderRadius={25}
+            {...cardDimensions}
+            {...props}
+        >
+            <TamaguiCard.Header padded>
+            { props.children && (
+                <H3>{ props.children }</H3>
+            )}
+            </TamaguiCard.Header>
+            <TamaguiCard.Footer padded>
+            { props.footer && (
+                props.footer
+            )}
+            </TamaguiCard.Footer>
+            <TamaguiCard.Background>
+                <Image
+                alignSelf="center"
+                source={{
+                    uri: `${server!.url}/Items/${props.itemId}/Images/Primary`,
+                    ...cardDimensions
+                }}
+                />
+            </TamaguiCard.Background>
+        </TamaguiCard>
     )
   }
   

components/Global/component.config.ts

@@ -1,4 +1,4 @@
 export const cardDimensions = {
-    width: 250,
-    height: 300
+    width: 200,
+    height: 250
 }

components/Home/component.tsx

@@ -1,6 +1,5 @@
-import { ScrollView, YStack } from "tamagui";
+import { H3, ScrollView, YStack } from "tamagui";
 import _ from "lodash";
-import { H2 } from "../Global/text";
 import RecentlyPlayed from "./helpers/recently-played";
 import { useApiClientContext } from "../jellyfin-api-provider";
 import RecentArtists from "./helpers/recent-artists";
@@ -65,7 +64,7 @@ function ProvidedHome({ route, navigation }: ProvidedHomeProps): React.JSX.Eleme
                     />
                 }>
                 <YStack alignContent='flex-start'>
-                    <H2>{`Hi, ${user!.name}`}</H2>
+                    <H3>{`Hi, ${user!.name}`}</H3>
                     <RecentArtists route={route} navigation={navigation} />
                     <RecentlyPlayed />
                 </YStack>

components/Home/helpers/recent-artists.tsx

@@ -17,13 +17,15 @@ export default function RecentArtists({ navigation }: ProvidedHomeProps): React.
     ])
 
     return (
-        <View>
+        <View marginTop={25}>
             <H2>Recent Artists</H2>
             <FlatList horizontal
                 data={recentArtists}
                 renderItem={({ item: recentArtist}) => {
                     return (
                         <Card 
+                            circular
+                            marginRight={25}
                             itemId={recentArtist.Id!}
                             onPress={() => {
                                 navigation.navigate('Artist',