From 613a24c7a266742a92775e7e8f501e0d615cd9d7 Mon Sep 17 00:00:00 2001
From: Antoine Phan <antoine.phan@mail.mcgill.ca>
Date: Sat, 19 Jul 2025 18:41:22 -0400
Subject: [PATCH] Fix styling with OH Schedule

---
 src/components/OHSchedule.svelte | 37 +++++++++++++++++---------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/OHSchedule.svelte b/src/components/OHSchedule.svelte
index fa451b0..034d1a6 100644
--- a/src/components/OHSchedule.svelte
+++ b/src/components/OHSchedule.svelte
@@ -1,39 +1,42 @@
 <script lang="ts">
-	import type { OhCMSResponse } from '$lib/schemas';
+	import type { OfficeHour } from '$lib/schemas';
 
 	function parseTime(timeStr: string): number {
-		let a = timeStr.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/i);
-		if (!a) return 0;
+		let timeRegexMatch = timeStr.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/i);
+		if (!timeRegexMatch) return 0;
 
-		let hours = parseInt(a[1], 10);
-		let minutes = parseInt(a[2] || '0', 10);
-		let period = a[3];
+		let hours = parseInt(timeRegexMatch[1], 10);
+		let minutes = parseInt(timeRegexMatch[2] || '0', 10);
+		let period = timeRegexMatch[3];
 
 		if (period.toUpperCase() === 'PM' && hours !== 12) hours += 12;
 		if (period.toUpperCase() === 'AM' && hours === 12) hours = 0;
 
 		return Number(hours * 60 + minutes); // total minutes since midnight
 	}
-	let { allOhs }: { allOhs: OhCMSResponse } = $props();
-	let sortedOHs = $state(
-		allOhs.sort((a, b) => {
-			return parseTime(a.startTime) - parseTime(b.startTime);
-		})
-	);
+	let { allOhs }: { allOhs: OfficeHour[] } = $props();
+	let sortedOHs = allOhs.sort((a, b) => {
+		return parseTime(a.startTime) - parseTime(b.startTime);
+	});
 </script>
 
 <div class="grid min-w-2/3 grid-cols-5 gap-2 place-self-center">
 	{#each ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as day}
+		
 		<div>
-			<p>- {day} -</p>
+			<p class="text-center text-xl">{day}</p>
 			{#each sortedOHs.filter((OH) => OH.day == day) as OH}
 				<div
 					class="
-					card w-64 grid h-38 grid-rows-[3fr_2fr_3fr] bg-ecsess-200 text-ecsess-black m-3  place-content-center rounded-xl
-					p-4 text-center"
+					bg-ecsess-200 text-ecsess-black m-2 grid h-36 max-w-md min-w-50
+					 grid-rows-[2fr_4fr_3fr] place-content-center rounded-xl
+					p-3 text-center"
 				>
-					<p class="text-lg">{OH.startTime} - {OH.endTime}</p>
-					<p class="text-2xl">{OH.member.name.split(" ")[0]}</p>
+					<p class="border-b-ecsess-600 border-b-2 text-lg">{OH.startTime} - {OH.endTime}</p>
+
+					<p class="text-ecsess-800 place-self-center text-2xl font-bold">
+						{OH.member.name.split(' ')[0]}
+					</p>
 					<p class="text-sm italic">{OH.member.position}</p>
 				</div>
 			{/each}