From 3f8d9de2bf8d764c84e03f81c25071c4feac7543 Mon Sep 17 00:00:00 2001
From: Antoine Phan <hoangtuan11102@gmail.com>
Date: Thu, 22 Jan 2026 01:22:23 -0500
Subject: [PATCH] Changes to some colour contrast, reworded, and refactor some
 duplicated code

---
 src/components/Button.svelte     | 23 +++----------
 src/components/QuickLinks.svelte | 58 ++++++++++++++------------------
 src/routes/+page.svelte          | 27 +++------------
 3 files changed, 34 insertions(+), 74 deletions(-)

diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 6a36362..9982870 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -1,28 +1,13 @@
 <script lang="ts">
-	type ButtonSize = 'sm' | 'md' | 'lg';
-
-	let {
-		children,
-		onclick = null,
-		disabled = false,
-		size = 'md' as ButtonSize,
-		class: className = ''
-	} = $props();
-
-	const sizeClasses: Record<ButtonSize, string> = {
-		sm: 'px-3 py-1.5',
-		md: 'px-4 py-2',
-		lg: 'px-2 py-2'
-	};
+	let { children, onclick = null, disabled = false, class: className = '' } = $props();
 </script>
 
 <button
 	{disabled}
 	{onclick}
-	class="border-ecsess-200 bg-ecsess-500 rounded-md border
-		{sizeClasses[size]}
-		text-ecsess-50 hover:bg-ecsess-600/50 hover:border-ecsess-300 text-sm
-		font-semibold transition-colors {className}"
+	class="bg-ecsess-600 text-ecsess-50
+		hover:bg-ecsess-700 w-fit rounded-md
+		px-6 py-3 text-sm font-semibold transition-colors hover:cursor-pointer {className}"
 >
 	{@render children()}
 </button>
diff --git a/src/components/QuickLinks.svelte b/src/components/QuickLinks.svelte
index 4395ab1..c4b9427 100644
--- a/src/components/QuickLinks.svelte
+++ b/src/components/QuickLinks.svelte
@@ -3,39 +3,33 @@
 	import Button from 'components/Button.svelte';
 </script>
 
-<div class="mt-3 grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:mt-0">
-	<Link href="/events">
-		<Button
-			class="ql-btn flex h-full min-h-[48px] w-full cursor-pointer items-center justify-center sm:min-h-[56px]"
-		>
-			ECSESS Events
-		</Button>
-	</Link>
+<div>
+	<p
+		class="text-ecsess-50 decoration-ecsess-200 mt-2 mb-6 text-base font-bold tracking-wide underline decoration-2 underline-offset-8"
+	>
+		Popular resources
+	</p>
 
-	<Link href="/r/trot5th" external>
-		<Button
-			class="ql-btn flex h-full min-h-[48px] w-full cursor-pointer items-center justify-center sm:min-h-[56px]"
-		>
-			Trottier 5th booking
-		</Button>
-	</Link>
+	<div class="mt-3 grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:mt-0">
+		<Link href="/events">
+			<Button class="flex h-full w-full items-center justify-center">ECSESS Events</Button>
+		</Link>
 
-	<Link href="/r/ctrlz" external>
-		<Button
-			size="lg"
-			class="ql-btn flex h-full min-h-[48px] w-full cursor-pointer items-center justify-center sm:min-h-[56px]"
-		>
-			Ctrl+Z (feedback) form
-		</Button>
-	</Link>
+		<Link href="/r/trot5th" external>
+			<Button class="flex h-full w-full items-center justify-center">
+				Trottier 5th Room Booking
+			</Button>
+		</Link>
 
-	<!-- Sponsorship disabled -->
-	<Link href="#">
-		<Button
-			disabled
-			class="ql-btn flex h-full min-h-[48px] w-full cursor-not-allowed items-center justify-center sm:min-h-[56px]"
-		>
-			Sponsorship
-		</Button>
-	</Link>
+		<Link href="/r/ctrlz" external>
+			<Button class="flex h-full w-full items-center justify-center">Ctrl+Z feedback form</Button>
+		</Link>
+
+		<!-- Sponsorship disabled -->
+		<Link href="/sponsorship">
+			<Button disabled class="flex h-full w-full items-center justify-center">
+				Sponsor ECSESS
+			</Button>
+		</Link>
+	</div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8be54d2..521f981 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -40,7 +40,7 @@
 		<div
 			class="order-2 mb-2 flex items-center justify-center p-4 lg:col-start-1 lg:row-start-2 lg:mb-6 lg:place-self-center"
 		>
-			<div class="max-w-[36rem] text-center lg:text-center">
+			<div class="max-w-xl text-center lg:text-center">
 				<RichText value={data.description} />
 			</div>
 		</div>
@@ -56,28 +56,9 @@
 			</div>
 		</div>
 
-		<!-- Quick Links (Desktop) -->
-		<div class="hidden p-4 lg:col-start-1 lg:row-start-3 lg:flex lg:place-self-center">
-			<div>
-				<p
-					class="text-ecsess-50 decoration-ecsess-200 mt-2 mb-4 text-base font-bold tracking-wide underline decoration-2 underline-offset-8"
-				>
-					Commonly searched for
-				</p>
-				<QuickLinks />
-			</div>
-		</div>
-
-		<!-- Quick Links (mobile) -->
-		<div class="order-4 p-3 lg:hidden">
-			<div>
-				<p
-					class="text-ecsess-50 decoration-ecsess-200 mt-4 mb-4 text-center text-base font-bold tracking-wide underline decoration-2 underline-offset-8"
-				>
-					Commonly searched for
-				</p>
-				<QuickLinks />
-			</div>
+		<!-- Quick Links -->
+		<div class="order-4 p-3 lg:col-start-1 lg:row-start-3 lg:flex lg:place-self-center lg:p-4">
+			<QuickLinks />
 		</div>
 	</div>
 </Section>