railbird/railbird-gql
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: tidy up styles, wireframed

Browse Source
This commit is contained in:
Loewy 2024-02-16 16:16:17 -08:00
parent 7b4af08296
commit bc7b066864
1 changed files with 51 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/component/modals/session-details.tsx
View File

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