make header component, clean up styles, scrollview + graph

src/component/headers/back-header.tsx

@@ -0,0 +1,40 @@
+// BackHeader.tsx
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { shadows } from "../../styles";
+
+type BackHeaderProps = {
+	navigation: any; // You can replace 'any' with the appropriate type for your navigation prop
+	title: string;
+};
+
+const BackHeader: React.FC<BackHeaderProps> = ({ navigation, title }) => {
+	return (
+		<View style={styles.container}>
+			<TouchableOpacity
+				style={styles.button}
+				onPress={() => navigation.goBack()}
+			>
+				<Text style={styles.text}>{`< ${title}`}</Text>
+			</TouchableOpacity>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		backgroundColor: "white",
+		zIndex: 100,
+		...shadows.standard,
+	},
+	button: {
+		padding: 10,
+	},
+	text: {
+		fontSize: 16,
+		fontWeight: "500",
+		color: "black",
+	},
+});
+
+export default BackHeader;

src/component/video-details/video-stat-list.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { StyleSheet, Text, View } from "react-native";
+import { borders } from "../../styles";
 
 type StatItem = {
 	title: string;
@@ -31,12 +32,11 @@ const styles = StyleSheet.create({
 		padding: 5,
 	},
 	item: {
-		borderLeftWidth: 0.5,
-		borderRightColor: "lightgrey",
 		marginBottom: 10,
+		...borders.dottedLeftBorder,
 	},
 	title: {
-		fontSize: 16,
+		fontSize: 15,
 		color: "grey",
 		textAlign: "center",
 	},

src/screens/session-stack/session.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import VideoDetails from "./video-details";
 
-export default function SessionScreen() {
+export default function SessionScreen({ navigation }) {
-	return <VideoDetails />;
+	return <VideoDetails navigation={navigation} />;
 }

src/screens/session-stack/video-details.tsx

@@ -1,15 +1,23 @@
 import React from "react";
 import { ScrollView, StyleSheet, Text, View } from "react-native";
-import { mock_session_details } from "../../../test/mock/charts/mock-data";
+import {
+	graph_data_two_measures,
+	mock_session_details,
+} from "../../../test/mock/charts/mock-data";
+import BarGraph from "../../component/charts/bar-graph/bar-graph";
+import ChartContainer from "../../component/charts/container/chart-container";
 import ImageWithFallback from "../../component/image/image-with-fallback";
 import StatList from "../../component/video-details/video-stat-list";
 
-// TODO: image did not load, remove Session when data piped through
+// TODO: #134 remove Session when data piped through
+// Splash should be an asset we use if an Image failed to load
 import Session from "../../assets/sample_session.png";
 import Splash from "../../assets/splash.png";
+import BackHeader from "../../component/headers/back-header";
+import { borders, colors } from "../../styles";
 
-export default function VideoDetails() {
+export default function VideoDetails({ navigation }) {
-	// Remove mock destructure when data is piped through from BE
+	// TODO: #134 Remove mock destructure block when data is piped through from BE
 	const {
 		sessionTitle,
 		date,
@@ -22,7 +30,6 @@ export default function VideoDetails() {
 	} = mock_session_details;
 
 	const leftColumnStats = [
-		// If what is displayed in the columns can vary
 		{ title: "TIME PLAYED", value: timePlayed },
 		{ title: "MAKE RATE", value: makeRate },
 	];
@@ -35,16 +42,17 @@ export default function VideoDetails() {
 
 	return (
 		<>
-			<View style={{ backgroundColor: "transparent" }}>
+			<BackHeader navigation={navigation} title="Go Back" />
-				<Text style={{ backgroundColor: "transparent" }}>Go back</Text>
+			<ScrollView
-			</View>
+				showsVerticalScrollIndicator={false}
-			<ScrollView contentContainerStyle={{ paddingBottom: 20 }}>
+				contentContainerStyle={styles.scrollContainer}
+			>
 				<View style={styles.headerSection}>
 					<Text style={styles.header}>{sessionTitle}</Text>
 					<Text>{date}</Text>
 				</View>
 				<ImageWithFallback
-					// When data comes from be needs to be passed as source={{ uri: image }}
+					// TODO: #134 when data comes from be needs to be passed as source={{ uri: image }}
 					source={Session}
 					fallbackSource={Splash}
 					style={styles.image}
@@ -54,9 +62,17 @@ export default function VideoDetails() {
 					<StatList items={rightColumnStats} style={styles.statColumn} />
 				</View>
 				<View style={styles.horizontalDivider} />
-				<Text style={styles.title}>Game Type</Text>
+				<View style={styles.textContainer}>
-				<Text style={styles.text}>{gameType}</Text>
+					<Text style={styles.title}>Game Type</Text>
-				<Text style={styles.text}>{notes}</Text>
+					<Text style={styles.text}>{gameType}</Text>
+					<Text style={styles.title}>Notes</Text>
+					<Text style={styles.text}>{notes}</Text>
+				</View>
+				<View style={[styles.horizontalDivider, { marginVertical: 21 }]} />
+				<ChartContainer
+					data={graph_data_two_measures}
+					ChartComponent={BarGraph}
+				/>
 			</ScrollView>
 		</>
 	);
@@ -64,9 +80,14 @@ export default function VideoDetails() {
 
 // TODO: #130 scaled styles + maintain consistency with video-feed styles
 const styles = StyleSheet.create({
+	scrollContainer: {
+		backgroundColor: "white", // TODO #125 -- this color should not be set but implicitly inherit from theme
+		paddingBottom: 20, // guarantees some space at bottom of scrollable views
+	},
 	headerSection: {
-		paddingHorizontal: 20,
+		paddingHorizontal: 38,
-		paddingVertical: 15,
+		paddingTop: 17,
+		paddingBottom: 14,
 	},
 	header: {
 		fontSize: 24,
@@ -79,27 +100,30 @@ const styles = StyleSheet.create({
 	statsContainer: {
 		flexDirection: "row",
 		justifyContent: "space-between",
-		padding: 20,
+		paddingLeft: 45,
+		paddingVertical: 42,
 	},
 	statColumn: {
 		flex: 1,
 		padding: 5,
 	},
 	horizontalDivider: {
-		borderBottomWidth: 0.5,
+		width: "95%",
-		color: "lightgrey",
-		width: "100%",
-		marginHorizontal: 35,
 		alignSelf: "center",
+		...borders.dottedBottomBorder,
+	},
+	textContainer: {
+		paddingHorizontal: 38,
 	},
 	title: {
 		fontSize: 16,
-		color: "grey",
+		color: colors.text.greyText,
-		padding: 20,
+		paddingTop: 16,
 	},
 	text: {
 		fontSize: 18,
 		textAlign: "left",
-		marginTop: 10,
+		paddingTop: 6,
+		fontWeight: "400",
 	},
 });

src/styles.ts

@@ -43,12 +43,14 @@ export const colors = {
 	bgBlack: "#121212",
 	lightGrey: "#BFC2C8",
 	darkGrey: "#767577",
-	themeBrown: "#D9AA84",
 	panelWhite: "#F2FBFE",
-	tournamentBlue: "#50a6c2",
-	blueCloth: "#539dc2",
 	buttonBlue: "#1987ff",
-	textWhite: "#ffffff",
+	border: {
+		grey: "#8F8E94",
+	},
+	text: {
+		greyText: "#848580",
+	},
 };
 
 export const tabIconColors = {
@@ -57,7 +59,7 @@ export const tabIconColors = {
 };
 
 // SHADOWS
-export const shadows = {
+export const shadows = StyleSheet.create({
 	standard: {
 		shadowColor: "#000000",
 		shadowOffset: {
@@ -68,9 +70,23 @@ export const shadows = {
 		shadowRadius: 4.65,
 		elevation: 3,
 	},
-};
+});
 
-// MODAL STYLES
+// BORDER
+export const borders = StyleSheet.create({
+	dottedBottomBorder: {
+		borderBottomWidth: 1,
+		borderStyle: "dotted",
+		color: colors.border.grey,
+	},
+	dottedLeftBorder: {
+		borderLeftWidth: 1,
+		borderStyle: "dotted",
+		color: colors.border.grey,
+	},
+});
+
+// MODAL
 const MODAL_TOP_PADDING = 20;
 const MODAL_TOP_RADIUS = 20;