components/Timetable.js

@@ -37,16 +37,19 @@ export default function Timetable({ addTimetableEntry, removeTimetableEntry, tim
 					/>
 				)}
 			</Stack.Screen>
-			<Stack.Screen name="New Entry">
+			{days.map((day, idx) => (
+				<Stack.Screen name={`New Entry ${day}`} key={idx}>
 					{(props) => (
 						<AddEntry
 							{...props}
 							subjects={subjects}
+							day={idx}
 							days={days}
 							addTimetableEntry={addTimetableEntry}
 						/>
 					)}
 				</Stack.Screen>
+			))}
 		</Stack.Navigator></Portal.Host>
 	);
 }

components/timetable/AddEntry.js

@@ -1,24 +1,20 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import {
+	IconButton,
 	Card,
 	FAB,
-	IconButton,
 	List,
 	Menu,
 	Portal,
 	Snackbar,
 	TextInput,
-	ToggleButton,
 } from "react-native-paper";
-import {
-	StyleSheet,
-	View
-} from "react-native";
+import {StyleSheet} from "react-native";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import { format } from "date-fns";
 
-function AddEntry({addTimetableEntry, days, subjects, navigation }) {
+function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
 	const [ subject, setSubject ] = useState({ id: null, name: null });
 	const [ showSubjectMenu, setShowSubjectMenu ] = useState(false);
 	const [ showTimePicker, setShowTimePicker ] = useState(false);
@@ -28,7 +24,6 @@ function AddEntry({addTimetableEntry, days, subjects, navigation }) {
 	const [ end, setEnd ] = useState(null);
 	const [ count, setCount ] = useState(0);
 	const [ snackbar, setSnackbar ] = useState({ visible: false, message: "" });
-	const [ dayStates, setDayStates ] = useState([ true, false, false, false, false, false, false ]);
 	function parseCount(text) {
 		const num = parseInt(text);
 		if (isNaN(num))
@@ -61,8 +56,6 @@ function AddEntry({addTimetableEntry, days, subjects, navigation }) {
 			message =  "Missing end time.";
 		else if (count === 0)
 			message =  "Missing count.";
-		if (! dayStates.filter(i => i).length)
-			message = "No day selected.";
 
 		if (message !== "") {
 			setSnackbar({visible: true, message: message});
@@ -70,17 +63,12 @@ function AddEntry({addTimetableEntry, days, subjects, navigation }) {
 			return;
 		}
 
-
-		dayStates.forEach((i, idx) => {
-			if (i) {
-				addTimetableEntry(idx, {
+		addTimetableEntry(day, {
 			sub_id: subject.id,
 			count,
 			start,
 			end
 		});
-			}
-		});
 		navigation.pop();
 	}
 
@@ -88,7 +76,7 @@ function AddEntry({addTimetableEntry, days, subjects, navigation }) {
 	return (<>
 		<IconButton icon="arrow-left" onPress={() => navigation.pop()}/>
 		<Card style={style.card}>
-			<Card.Title title="Add Class" />
+			<Card.Title title={`Add Class on ${days[day]}`} />
 			<Card.Content>
 				<List.Section>
 					<Menu
@@ -139,26 +127,6 @@ function AddEntry({addTimetableEntry, days, subjects, navigation }) {
 						value={count === 0 ? "" : count.toString()}
 						onChangeText={parseCount}
 					/>
-					<View
-						style={style.daysContainer}
-					>
-						{dayStates.map( (i, idx) => (
-							<ToggleButton
-								key={idx}
-								icon={`alpha-${days[idx][0].toLowerCase()}`}
-								status={i ? "checked": "unchecked"}
-								onPress={
-									() =>
-										setDayStates([
-											...dayStates.slice(0, idx),
-											!i,
-											...dayStates.slice(idx + 1)
-										])
-								}
-							/>
-						)
-						)}
-					</View>
 				</List.Section>
 			</Card.Content>
 		</Card>
@@ -203,8 +171,9 @@ function AddEntry({addTimetableEntry, days, subjects, navigation }) {
 AddEntry.propTypes = {
 	addTimetableEntry: PropTypes.func,
 	subjects: PropTypes.array,
-	days: PropTypes.array,
 	navigation: PropTypes.object,
+	days: PropTypes.array,
+	day: PropTypes.number,
 };
 
 const style = StyleSheet.create({
@@ -221,11 +190,6 @@ const style = StyleSheet.create({
 		flexDirection: "row",
 		justifyContent: "space-between"
 	},
-	daysContainer: {
-		flexDirection: "row",
-		justifyContent: "space-evenly",
-		marginTop: 10
-	},
 });
 
 export default AddEntry;

components/timetable/HomeScreen.js

@@ -3,11 +3,12 @@ import PropTypes from "prop-types";
 
 import {
 	Button,
+	IconButton,
 	Card,
 	DataTable,
 	Dialog,
-	FAB,
 	Portal,
+	withTheme,
 } from "react-native-paper";
 
 import {
@@ -21,14 +22,14 @@ function sortTimes(t1, t2) {
 		return 1;
 	if (t1.getHours() < t2.getHours())
 		return -1;
-	if (t1.getMinutes() > t2.getMinutes())
+	if (t1.getMinute() > t2.getMinute())
 		return 1;
-	if (t1.getMinutes() < t2.getMinutes())
+	if (t1.getMinute() < t2.getMinute())
 		return -1;
 	return 0;
 }
 
-function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetable }) {
+function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, timetable }) {
 	const [ dialog, setDialog ] = useState({ show: false, id: null });
 	return (<Portal.Host><ScrollView>
 		{timetable.map((day, dayIdx) => (
@@ -98,6 +99,13 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
 						})}
 					</DataTable>
 				</Card.Content>
+				<Card.Actions style={{justifyContent: "flex-end"}}>
+					<IconButton
+						onPress={() => navigation.navigate(`New Entry ${days[dayIdx]}`)}
+						icon="plus"
+						color={theme.colors.primary}
+					/>
+				</Card.Actions>
 			</Card>
 		))}
 		<Portal>
@@ -117,17 +125,6 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
 					</Button>
 				</Dialog.Actions>
 			</Dialog>
-			<FAB
-				loarge
-				icon="plus"
-				onPress={() => navigation.navigate("New Entry")}
-				style={{
-					position: "absolute",
-					margin: 16,
-					right: 0,
-					bottom: 0,
-				}}
-			/>
 		</Portal>
 	</ScrollView></Portal.Host>);
 }
@@ -137,6 +134,7 @@ HomeScreen.propTypes = {
 	subjects: PropTypes.array,
 	navigation: PropTypes.object,
 	days: PropTypes.array,
+	theme: PropTypes.object,
 	removeTimetableEntry: PropTypes.func,
 };
 
@@ -156,4 +154,4 @@ const style = StyleSheet.create({
 	},
 });
 
-export default HomeScreen;
+export default withTheme(HomeScreen);

themes.js

@@ -1,13 +1,13 @@
 import { DefaultTheme, DarkTheme } from "react-native-paper";
 export default [
 	{
-		"name": "Dark: Pink and Blue",
+		"name": "Dark: Pink and Gray",
 		"theme": {
 			...DarkTheme,
 			mode: "exact",
 			colors: {
 				primary: "#ff1744",
-				accent: "#3949ab",
+				accent: "#e0e0e0",
 				backdrop: "rgba(0, 0, 0, 0.5)",
 				background: "#000000",
 				disabled: "rgba(255, 255, 255, 0.38)",
@@ -63,6 +63,17 @@ export default [
 			}
 		}
 	},
+	{
+		"name": "Absolute Dark: Pink and Gray",
+		"theme": {
+			...DarkTheme,
+			colors: {
+				...DarkTheme.colors,
+				primary: "#ff1744",
+				accent: "#e0e0e0",
+			}
+		}
+	},
 	{
 		"name": "Absolute Dark: Purple and Gray",
 		"theme": DarkTheme
@@ -90,6 +101,17 @@ export default [
 			}
 		}
 	},
+	{
+		"name": "Light: Pastel Colors 2",
+		"theme": {
+			...DefaultTheme,
+			colors: {
+				...DefaultTheme.colors,
+				primary: "#ffcccb",
+				accent: "#fce4ec",
+			}
+		}
+	},
 	{
 		"name": "Light: Purple and Green",
 		"theme": DefaultTheme