cleanup comments

src/component/session-card/session-card-footer.tsx

@@ -14,15 +14,12 @@ const styles = StyleSheet.create({
 	sessionName: {
 		fontSize: 18,
 		paddingTop: 5,
-		marginLeft: 16,
+		marginHorizontal: 16,
-		marginRight: 16,
 	},
 	sessionDatetime: {
 		fontSize: 10,
 		color: "#A3A3A3",
-		marginLeft: 16,
+		marginHorizontal: 16,
-		marginRight: 16,
-		marginBottom: 16,
 	},
 });
 

src/component/session-card/session-card-header.tsx

@@ -4,25 +4,24 @@ import { Image, StyleSheet, Text, View } from "react-native";
 const SessionCardHeader = ({
 	playerName,
 	location,
-	type,
+	gameType,
 	locationIconURL,
 	profileImageURL,
 }) => {
 	return (
 		<View style={styles.headerContainer}>
-			<View style={styles.headerProfileImage}>
 			<Image
-					source={{ uri: profileImageURL }}
 				style={styles.headerProfileImage}
+				source={{ uri: profileImageURL }}
+				accessibilityLabel="Profile image"
 			/>
-			</View>
 			<View style={styles.headerText}>
 				<Text style={styles.playerName}>{playerName}</Text>
 				<View style={styles.locationContainer}>
 					<Image source={{ uri: locationIconURL }} style={styles.icon} />
 					<Text style={styles.locationText}>{location}</Text>
 				</View>
-				<Text style={styles.gameType}>{type}</Text>
+				<Text style={styles.gameType}>{gameType}</Text>
 			</View>
 		</View>
 	);
@@ -32,8 +31,7 @@ const styles = StyleSheet.create({
 	headerContainer: {
 		flexDirection: "row",
 		alignItems: "center",
-		marginLeft: 16,
+		marginHorizontal: 16,
-		marginRight: 16,
 	},
 
 	headerProfileImage: {

src/component/session-card/session-card-stat.tsx

@@ -1,14 +1,11 @@
 import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 
-const SessionCardStat = ({ aggregateStat, displayName, numberFormat }) => {
+const SessionCardStat = ({ sessionStat, displayName }) => {
 	return (
 		<View>
 			<Text style={styles.statItem}>{displayName}</Text>
-			<Text style={styles.statValue}>
+			<Text style={styles.statValue}>{sessionStat}</Text>
-				{aggregateStat}
-				{numberFormat}
-			</Text>
 		</View>
 	);
 };

src/component/session-card/session-card-stats-row-container.tsx

@@ -8,39 +8,24 @@ const SessionCardStatsRowContainer = ({
 	duration,
 	shotPacing,
 }) => {
+	const stats = [
+		{ displayName: "Make Percent", sessionStat: makePercent },
+		{ displayName: "Median Run", sessionStat: medianRun },
+		{ displayName: "Time Played", sessionStat: duration },
+		{ displayName: "Shot Pacing", sessionStat: shotPacing },
+	];
+
 	return (
 		<View style={styles.statsContainer}>
-			<View>
+			{stats.map((stat, index) => (
+				<React.Fragment key={index}>
 					<SessionCardStat
-					displayName="Make Percent"
+						displayName={stat.displayName}
-					aggregateStat={makePercent}
+						sessionStat={stat.sessionStat}
-					numberFormat="%"
 					/>
-			</View>
+					{index < stats.length - 1 && <View style={styles.verticalSpacer} />}
-			<View style={styles.verticalSpacer} />
+				</React.Fragment>
-			<View>
+			))}
-				<SessionCardStat
-					displayName="Median Run"
-					aggregateStat={medianRun}
-					numberFormat=""
-				/>
-			</View>
-			<View style={styles.verticalSpacer} />
-			<View>
-				<SessionCardStat
-					displayName="Time Played"
-					aggregateStat={duration}
-					numberFormat=""
-				/>
-			</View>
-			<View style={styles.verticalSpacer} />
-			<View>
-				<SessionCardStat
-					displayName="Shot Pacing"
-					aggregateStat={shotPacing}
-					numberFormat=""
-				/>
-			</View>
 		</View>
 	);
 };
@@ -48,14 +33,14 @@ const SessionCardStatsRowContainer = ({
 const styles = StyleSheet.create({
 	statsContainer: {
 		flexDirection: "row",
-		justifyContent: "space-around",
+		justifyContent: "space-between",
+		alignItems: "center",
 		margin: 16,
-		textAlign: "center",
 	},
 	verticalSpacer: {
-		width: 0.5,
+		width: 1,
 		backgroundColor: "#A3A3A3",
-		height: "75%",
+		height: "100%",
 		marginHorizontal: 12,
 	},
 });

src/component/session-card/session-card.tsx

@@ -7,7 +7,7 @@ import SessionCardStatsRowContainer from "./session-card-stats-row-container";
 const SessionCard = ({
 	playerName,
 	location,
-	type,
+	gameType,
 	makePercent,
 	medianRun,
 	duration,
@@ -18,14 +18,12 @@ const SessionCard = ({
 	profileImageURL,
 	locationIconURL,
 }) => {
-	console.log(imageURL);
 	return (
-		<View>
 		<View style={styles.card}>
 			<SessionCardHeader
 				playerName={playerName}
 				location={location}
-					type={type}
+				gameType={gameType}
 				locationIconURL={locationIconURL}
 				profileImageURL={profileImageURL}
 			/>
@@ -38,13 +36,25 @@ const SessionCard = ({
 			<Image source={imageURL} style={styles.image} />
 			<SessionCardFooter sessionName={sessionName} lastPlayed={lastPlayed} />
 		</View>
-		</View>
 	);
 };
 
 const styles = StyleSheet.create({
 	card: {
 		backgroundColor: "white",
+		borderRadius: 8,
+		borderWidth: 1,
+		borderColor: "#ddd",
+		shadowColor: "#000",
+		shadowOffset: {
+			width: 0,
+			height: 2,
+		},
+		shadowOpacity: 0.25,
+		shadowRadius: 3.84,
+		elevation: 5,
+		margin: 10,
+		overflow: "hidden",
 	},
 	image: {
 		width: "100%",

src/screens/session-stack/session-feed.tsx

@@ -25,7 +25,7 @@ const SessionFeed: React.FC<SessionFeedProps> = ({ navigation }) => {
 				<SessionCard
 					playerName="Dean Machine"
 					location="Family Billiards, San Francisco"
-					type="Straight Pool"
+					gameType="Straight Pool"
 					makePercent="34"
 					medianRun="7.3"
 					duration="5:03:10"