From 3e74ac4bcbe2089cb9cf66e55369a1b0ebef8ab0 Mon Sep 17 00:00:00 2001
From: Minh Vo <minh.vo2@mail.mcgill.ca>
Date: Mon, 29 Dec 2025 02:37:29 -0500
Subject: [PATCH] update type to enum and change css -> tailwindcss syntax +
 some ui change

---
 src/app.css                                  | 68 ++------------
 src/components/RichText.svelte               |  2 +-
 src/components/event/EventBlock.svelte       | 99 +++++++++++++++-----
 src/components/event/EventTabsContent.svelte | 18 ++--
 src/lib/schemas.ts                           | 16 +++-
 src/routes/events/+page.svelte               | 18 ++--
 6 files changed, 116 insertions(+), 105 deletions(-)

diff --git a/src/app.css b/src/app.css
index 2bdff0a..635e97e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -205,83 +205,31 @@ h2 {
 	}
 }
 
-.flip-box {
-	height: 100%;
-	width: 100%;
-	perspective: 1000px; /* Remove this if you don't want the 3D effect */;
-}
-
-.flip-box-inner {
-	display: grid;
-	width: 100%;
-	height: 100%;
-	text-align: center;
-	transition: transform 0.8s;
-	transform-style: preserve-3d;
-}
-
-@keyframes rotate-and-back {
-    0% { transform: rotateY(0); }
-    33% { transform: rotateY(5deg); }
-	66% { transform: rotateY(-5deg); }
-    100% { transform: rotateY(0); }
-}
-
-@media (min-width: 448px) { /* Apply hover effect only on screens wider than md*/
-	.flip-box:hover .flip-box-front {
-		animation: rotate-and-back 0.3s ease-in-out;
-	}
-}
-
-.flip-box-front,
-.flip-box-back {
-	grid-area: 1/1;
-	width: 100%;
-	-webkit-backface-visibility: hidden; /* Safari */
-	backface-visibility: hidden;
-}
-.flip-box-front {
-	z-index: 2;
-	transform: rotateY(0deg);
-	transform-style: preserve-3d;
-}
-
-.flip-box-back {
-	transform: rotateY(180deg); 
-}
-
-.show-back {
-	transform: rotateY(180deg);
-}
-
 /* Scrollbar Styles */
 *::-webkit-scrollbar {
-  height: 4px;
-  width: 4px;
+  @apply h-1 w-1;
 }
+
 *::-webkit-scrollbar-track {
-  border-radius: 3px;
-  background-color: var(--color-ecsess-700);
+  @apply rounded bg-ecsess-700;
 }
 
 *::-webkit-scrollbar-track:hover {
-  background-color: var(--color-ecsess-900);
+  @apply bg-ecsess-900;
 }
 
 *::-webkit-scrollbar-track:active {
-  background-color: var(--color-ecsess-900);
+  @apply bg-ecsess-900;
 }
 
 *::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: var(--color-ecsess-100);
+  @apply rounded-md bg-ecsess-100;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-ecsess-300);
+  @apply bg-ecsess-300;
 }
 
 *::-webkit-scrollbar-thumb:active {
-  background-color: var(--color-ecsess-300);
+  @apply bg-ecsess-300;
 }
-
diff --git a/src/components/RichText.svelte b/src/components/RichText.svelte
index 5e760e1..b6662c9 100644
--- a/src/components/RichText.svelte
+++ b/src/components/RichText.svelte
@@ -4,6 +4,6 @@
 	let { value } = $props();
 </script>
 
-<div class="typography">
+<div class="flex flex-col justify-center-safe">
 	<PortableText {value} />
 </div>
diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte
index e828ee0..26d0cde 100644
--- a/src/components/event/EventBlock.svelte
+++ b/src/components/event/EventBlock.svelte
@@ -61,13 +61,13 @@
 <div
 	class="
 	flip-box
-	group relative flex flex-col rounded-2xl  transition-all duration-300 hover:-translate-y-3"
+	group relative flex flex-col rounded-2xl"
 	>
 	<!--Flip Card container-->
 	<div class="flip-box-inner rounded-2xl" class:show-back={showDescription}>
 		<!--Front Side-->
 		<!--Opacity thing is to fix the visual bug on ios-->
-		<div class="flip-box-front bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl transition-opacity duration-500 {showDescription ? 'opacity-0 pointer-events-none' : 'opacity-100'}">
+		<div class="flex flex-col flip-box-front bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl transition-opacity duration-500 {showDescription ? 'opacity-0 pointer-events-none' : 'opacity-100'}">
 			<!--Flip button-->
 			<div
 				class="
@@ -181,25 +181,28 @@
 					</div>
 				</div>
 			</div>
-			<div class="relative px-6 pb-6 z-100 ">
+			<div class="relative px-6 z-100 flex-1">
 				<!-- Action Buttons -->
 				{#if !isPastEvent}
 					<div class="space-y-2">
 						<!-- Registration & Payment Row & Add to Calendar Button -->
-						<div class="grid sm:grid-cols-3 grid-cols-2 gap-2">
+						<div class="grid sm:grid-cols-3 grid-cols-2 gap-3 md:gap-2">
 							{#if registrationLink}
-								<a
-									href={registrationLink[0].url}
-									target="_blank"
-									rel="noopener noreferrer"
-									class="bg-ecsess-500 hover:bg-ecsess-600 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
-								>
-									<FilePen class="h-4 w-4" strokeWidth={2.5} />
-									Register
-								</a>
+							<a
+								href={registrationLink[0].url}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="bg-ecsess-500 hover:bg-ecsess-600 flex flex-1 items-center justify-center gap-2 rounded-xl px-4 p3 text-sm font-bold text-white 
+								shadow-md shadow-ecsess-100  transition-all hover:shadow-lg hover:-translate-y-1 
+								"
+							>
+								<FilePen class="h-4 w-4" strokeWidth={2.5} />
+								Register
+							</a>	
+							
 							{:else}
 								<div
-									class="bg-ecsess-500 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md"
+									class="bg-ecsess-500 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white "
 								>
 									<FilePen class="h-4 w-4" strokeWidth={2.5} />
 									Drop In
@@ -207,7 +210,8 @@
 							{/if}
 							<button
 								onclick={addToCalendar}
-								class="hover:cursor-pointer bg-ecsess-700 hover:bg-ecsess-800 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
+								class="hover:cursor-pointer bg-ecsess-700 hover:bg-ecsess-800 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white
+								shadow-md shadow-ecsess-200 transition-all hover:shadow-lg hover:-translate-y-1 "
 							>
 								<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
 								Add to Calendar
@@ -217,14 +221,15 @@
 									href={paymentLink[0].url}
 									target="_blank"
 									rel="noopener noreferrer"
-									class="sm:col-span-1 col-span-2 bg-ecsess-800 hover:bg-ecsess-900 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
+									class="sm:col-span-1 col-span-2 bg-ecsess-800 hover:bg-ecsess-900 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white 
+									shadow-md shadow-ecsess-300 transition-all hover:shadow-lg hover:-translate-y-1 "
 								>
 									<LinkIcon class="h-4 w-4" strokeWidth={2.5} />
 									Pay
 								</a>
 							{:else}
 								<div
-									class="sm:col-span-1 col-span-2 bg-ecsess-800 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md"
+									class="sm:col-span-1 col-span-2 bg-ecsess-800 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white "
 								>
 									Free!
 								</div>
@@ -234,12 +239,12 @@
 					</div>
 				{/if}
 			</div>
-			<div class="pb-4">
+			<div class="p-4 lg:hidden">
 				<p>Click to view more</p>
 			</div>
 			</div>
 		<!-- Back Side -->
-		<div class=" flip-box-back bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl">
+		<div class=" flex flex-col flip-box-back bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl">
 			<!--Flip button-->
 			<div
 				class="
@@ -252,11 +257,11 @@
 					{eventTitle}
 				</h3>
 			</div>
-			<div class="relative h-80 flex flex-1 flex-col z-20 my-2"
+			<div class="relative h-56 md:h-64 xl:h-84 flex flex-col z-20 my-2"
 			onclick={flipCard}
 			>
 				<!-- Description -->
-				<div class="text-ecsess-100 p-6 flex-1 overflow-y-auto">
+				<div class="text-ecsess-100 p-6 flex flex-1 justify-center overflow-y-auto border-y border-ecsess-800">
 					{#if eventDescription}
 						<RichText value={eventDescription} />
 					{:else}
@@ -267,14 +272,15 @@
 
 			<!-- General Links -->
 			<!--add max-h-41 we decide to go back to scrollable-->
-			<div class="relative z-20 gap-4 pb-6 flex flex-wrap w-full items-center justify-center px-6 overflow-auto">
+			<div class="relative z-20 gap-4 flex flex-1 flex-wrap w-full items-center justify-center p-6 overflow-auto ">
 				{#if generalLink}
 					{#each generalLink as link}
 						<a
 							href={link.url}
 							target="_blank"
 							rel="noopener noreferrer"
-							class="bg-ecsess-600 hover:bg-ecsess-700 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
+							class="bg-ecsess-600 hover:bg-ecsess-700 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white 
+							shadow-md shadow-ecsess-200 transition-all hover:shadow-lg hover:-translate-y-1"
 						>
 							<ExternalLinkIcon class="h-4 w-4" strokeWidth={2.5} />
 							{link.title}
@@ -288,5 +294,52 @@
 </div>
 
 <style>
+	.flip-box {
+		height: 100%;
+		width: 100%;
+		perspective: 1000px; /* Remove this if you don't want the 3D effect */
+	}
 
+	.flip-box-inner {
+		display: grid;
+		width: 100%;
+		height: 100%;
+		text-align: center;
+		transition: transform 0.8s;
+		transform-style: preserve-3d;
+	}
+
+	@keyframes rotate-and-back {
+		0% { transform: rotateY(0); }
+		33% { transform: rotateY(5deg); }
+		66% { transform: rotateY(-5deg); }
+		100% { transform: rotateY(0); }
+	}
+
+	@media (min-width: 448px) { /* Apply hover effect only on screens wider than md*/
+		.flip-box:hover .flip-box-front {
+			animation: rotate-and-back 0.3s ease-in-out;
+		}
+	}
+
+	.flip-box-front,
+	.flip-box-back {
+		grid-area: 1/1;
+		width: 100%;
+		-webkit-backface-visibility: hidden; /* Safari */
+		backface-visibility: hidden;
+	}
+	.flip-box-front {
+		z-index: 2;
+		transform: rotateY(0deg);
+		transform-style: preserve-3d;
+	}
+
+	.flip-box-back {
+		transform: rotateY(180deg); 
+	}
+
+	.show-back {
+		transform: rotateY(180deg);
+	}
 </style>
\ No newline at end of file
diff --git a/src/components/event/EventTabsContent.svelte b/src/components/event/EventTabsContent.svelte
index 4cc1097..e5b60c8 100644
--- a/src/components/event/EventTabsContent.svelte
+++ b/src/components/event/EventTabsContent.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import EventBlock from 'components/event/EventBlock.svelte';
-	import type { EventPost, Category, EventLinkKind, LinkType } from '$lib/schemas';
+	import { type EventPost, type EventCategory, EventLinkKind, type LinkType } from '$lib/schemas';
 
 	let { category, events } = $props<{
-		category: Category;
+		category: EventCategory;
 		events: EventPost[];
 	}>();
 
@@ -75,7 +75,7 @@
 	const getPaymentLink = (e: EventPost, type: EventLinkKind ):LinkType[] | null => {
 		let generalLinks: LinkType[] = [];
 		for (const link of e.links ?? []) {
-			if (type == "general" && link.kind === "general" && link.url !== '') {
+			if (type == EventLinkKind.GENERAL && link.kind === EventLinkKind.GENERAL && link.url !== '') {
 				generalLinks.push(link);
 			}
 			else if (link.kind === type && link.url !== '') {
@@ -103,9 +103,9 @@
 							location={e.location}
 							eventDescription={e.description}
 							thumbnail={e.thumbnail}
-							registrationLink={getPaymentLink(e, 'registration')}
-							paymentLink={getPaymentLink(e, 'payment')}
-							generalLink={getPaymentLink(e, 'general')}
+							registrationLink={getPaymentLink(e, EventLinkKind.REGISTRATION)}
+							paymentLink={getPaymentLink(e, EventLinkKind.PAYMENT)}
+							generalLink={getPaymentLink(e, EventLinkKind.GENERAL)}
 							eventCategory={e.category}
 							isPastEvent={false}
 						/>
@@ -129,9 +129,9 @@
 							location={e.location}
 							eventDescription={e.description}
 							thumbnail={e.thumbnail}
-							registrationLink={getPaymentLink(e, 'registration')}
-							paymentLink={getPaymentLink(e, 'payment')}
-							generalLink={getPaymentLink(e, 'general')}
+							registrationLink={getPaymentLink(e, EventLinkKind.REGISTRATION)}
+							paymentLink={getPaymentLink(e, EventLinkKind.PAYMENT)}
+							generalLink={getPaymentLink(e, EventLinkKind.GENERAL)}
 							eventCategory={e.category}
 							isPastEvent={true}
 						/>
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index c8e8bfc..548d296 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -9,18 +9,28 @@ export type EventPost = {
 	time: string;
 	location: string;
 	thumbnail: string;
-	category: string;
+	category: EventCategory;
 	links: LinkType[];
 };
 
-export type Category = 'allEvents' | 'academic' | 'professional' | 'social' | 'technical';
+export enum EventCategory {
+	ALL_EVENTS = 'allEvents',
+	ACADEMIC = 'academic',
+	PROFESSIONAL = 'professional',
+	SOCIAL = 'social',
+	TECHNICAL = 'technical'
+};
 
 export type LinkType = {
 		title: string;
 		kind: EventLinkKind;
 		url: string;
 };
-export type EventLinkKind = 'payment' | 'registration' | 'general';
+export enum EventLinkKind {
+	PAYMENT = 'payment',
+	REGISTRATION = 'registration',
+	GENERAL = 'general'
+};
 
 export type FAQ = {
 	question: string;
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
index 1e39004..b5fecae 100644
--- a/src/routes/events/+page.svelte
+++ b/src/routes/events/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { EventPost, Category } from '$lib/schemas';
+	import { type EventPost, EventCategory } from '$lib/schemas';
 	import Section from 'components/layout/Section.svelte';
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
 	import EventTabsTrigger from 'components/event/EventTabsTrigger.svelte';
@@ -8,16 +8,16 @@
 	let { data } = $props();
 
 	let events: EventPost[] = data.events ?? [];
-	let group = $state<Category>('allEvents');
-	let categories: {value: Category; label: string}[] = [
-	{ value: 'allEvents', label: 'All Events' },
-	{ value: 'academic', label: 'Academic' },
-	{ value: 'professional', label: 'Professional' },
-	{ value: 'social', label: 'Social' },
-	{ value: 'technical', label: 'Technical' }
+	let group = $state<EventCategory>(EventCategory.ALL_EVENTS);
+	let categories: {value: EventCategory; label: string}[] = [
+	{ value: EventCategory.ALL_EVENTS, label: 'All Events' },
+	{ value: EventCategory.ACADEMIC, label: 'Academic' },
+	{ value: EventCategory.PROFESSIONAL, label: 'Professional' },
+	{ value: EventCategory.SOCIAL, label: 'Social' },
+	{ value: EventCategory.TECHNICAL, label: 'Technical' }
 ];
 	// Handle tab change
-	function handleTabChange(selectedCategory: Category) {
+	function handleTabChange(selectedCategory: EventCategory) {
 		group = selectedCategory;
 	}
 </script>