wip: tidy up styles, wireframed

src/component/modals/session-details.tsx

@@ -8,6 +8,8 @@ export default function SessionDetails() {
 
 	// Stats State
 	// TODO: needs to come from session context
+	const [sessionTitle, setSessionTitle] = useState<string>("Afternoon Session");
+	const [date, setDate] = useState<string>("Today at 2:37pm");
 	const [timePlayed, setTimePlayed] = useState("5:03:10");
 	const [medianRun, setMedianRun] = useState("7.3");
 	const [makeRate, setMakeRate] = useState("34%");
@@ -21,12 +23,16 @@ export default function SessionDetails() {
 		<>
 			<SlideModal modalVisible={visible} setModalVisible={setVisible}>
 				<View style={styles.container}>
-					<Text style={styles.header}>Afternoon Session</Text>
+					<View style={styles.headerSection}>
+						<Text style={styles.header}>{sessionTitle}</Text>
+						<Text>{date}</Text>
+					</View>
 					<Image
 						source={{ uri: "https://picsum.photos/200" }}
 						style={styles.image}
 					/>
 					<View style={styles.statsContainer}>
+						<View style={styles.statColumn}>
 							<View style={styles.statItem}>
 								<Text style={styles.statLabel}>TIME PLAYED</Text>
 								<Text style={styles.statValue}>{timePlayed}</Text>
@@ -35,6 +41,8 @@ export default function SessionDetails() {
 								<Text style={styles.statLabel}>MEDIAN RUN</Text>
 								<Text style={styles.statValue}>{medianRun}</Text>
 							</View>
+						</View>
+						<View style={styles.statColumn}>
 							<View style={styles.statItem}>
 								<Text style={styles.statLabel}>MAKE RATE</Text>
 								<Text style={styles.statValue}>{makeRate}</Text>
@@ -44,6 +52,8 @@ export default function SessionDetails() {
 								<Text style={styles.statValue}>{shotPacing}</Text>
 							</View>
 						</View>
+					</View>
+					<View style={styles.horizontalDivider} />
 					<Text style={styles.gameType}>{gameType}</Text>
 					<Text style={styles.notes}>{notes}</Text>
 				</View>
@@ -56,41 +66,59 @@ export default function SessionDetails() {
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-		padding: 20,
 		backgroundColor: "white",
+		borderRadius: 20,
+	},
+	headerSection: {
+		marginTop: 15,
+		padding: 20,
 	},
 	header: {
 		fontSize: 24,
 		fontWeight: "bold",
-		marginBottom: 20,
 	},
 	image: {
 		width: "100%",
-		height: 200,
-		marginBottom: 20,
+		height: 248,
 	},
 	statsContainer: {
 		flexDirection: "row",
-		justifyContent: "space-around",
-		marginBottom: 20,
+		justifyContent: "space-between",
+		padding: 20,
+	},
+	statColumn: {
+		flex: 1,
+		padding: 5,
 	},
 	statItem: {
-		alignItems: "center",
+		borderLeftWidth: 0.5,
+		borderRightColor: "lightgrey",
+		marginBottom: 10,
 	},
 	statLabel: {
 		fontSize: 16,
 		color: "grey",
+		textAlign: "center",
 	},
 	statValue: {
 		fontSize: 18,
 		fontWeight: "bold",
+		textAlign: "center",
+	},
+	horizontalDivider: {
+		borderBottomWidth: 0.5,
+		color: "lightgrey",
+		width: "90%",
+		alignSelf: "center",
 	},
 	gameType: {
 		fontSize: 18,
-		marginBottom: 10,
+		textAlign: "center",
+		marginTop: 10,
 	},
 	notes: {
 		fontSize: 16,
 		color: "grey",
+		padding: 20,
 	},
 });