From 9f1b893a968581421da38fb297c6db51b4bdcb67 Mon Sep 17 00:00:00 2001
From: Antoine Phan <antoine.phan@mail.mcgill.ca>
Date: Sat, 19 Jul 2025 16:36:44 -0400
Subject: [PATCH] Update FAQ accordion and button

---
 src/components/Button.svelte       |  2 +-
 src/components/FAQAccordion.svelte | 80 ++++++------------------------
 src/routes/+page.svelte            | 16 +++---
 3 files changed, 24 insertions(+), 74 deletions(-)

diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 17ce62c..fb195ff 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -4,7 +4,7 @@
 
 <button
 	class="bg-ecsess-600 hover:bg-ecsess-400 active:bg-ecsess-800
-            m-1 inline-block rounded-lg border-none px-4
+            inline-block rounded-lg border-none px-4
             py-2 text-white transition-all
             duration-200 ease-out
             hover:shadow-2xl"
diff --git a/src/components/FAQAccordion.svelte b/src/components/FAQAccordion.svelte
index 34ed63a..73fb1bd 100644
--- a/src/components/FAQAccordion.svelte
+++ b/src/components/FAQAccordion.svelte
@@ -1,16 +1,12 @@
-<script>
-	// import { slide } from 'svelte/transition';
+<script lang="ts">
+	import type { FAQ } from '$lib/schemas';
 	import { Accordion } from '@skeletonlabs/skeleton-svelte';
 
-	// FAQ closed by default
-	let isOpen = $state(false);
-	// const toggle = () => (isOpen = !isOpen);
-
 	// Variable to be included into the component
-	let { /** @type {String} */ entries } = $props();
+	let { entries }: { entries: FAQ[] } = $props();
 </script>
 
-<Accordion classes="w-[500px] max-w-[500px] transition-all ease-in-out" multiple>
+<Accordion multiple>
 	{#snippet iconClosed()}
 		<svg
 			width="20"
@@ -24,6 +20,7 @@
 			><path d="M9 5l7 7-7 7" />
 		</svg>
 	{/snippet}
+
 	{#snippet iconOpen()}
 		<svg
 			class="rotate-90"
@@ -38,21 +35,22 @@
 			><path d="M9 5l7 7-7 7" />
 		</svg>
 	{/snippet}
-	
+
 	{#each entries as entry, index}
 		<Accordion.Item
 			value={index.toString()}
-			classes="border-ecsess-200 mb-4 overflow-hidden rounded-xl border-2"
-			leadClasses="text-xl font-bold"
-			controlClasses="hover:bg-ecsess-black-hover
-            flex w-inherit cursor-pointer items-center justify-between
-            py-4 transition-colors ease-in-out"
-			panelClasses=" border-t-ecsess-200 max-h-fit border-t-2 bg-transparent p-4 bg-ecsess-400"
+			classes="border-ecsess-200 mb-4 rounded-xl border-2 hover:bg-ecsess-black-hover"
+			leadClasses="text-lg font-bold"
+			controlClasses="
+            flex cursor-pointer justify-between
+            py-4 ease-in-out"
+			panelClasses=" border-t-ecsess-200 border-t-2 bg-transparent p-4 bg-ecsess-400"
 		>
 			<!-- Control -->
 			{#snippet lead()}
 				{entry.question}
 			{/snippet}
+
 			{#snippet control()}{/snippet}
 
 			<!-- Panel -->
@@ -61,54 +59,4 @@
 	{/each}
 </Accordion>
 
-<!-- 
-<div class="accordion-wrapper w-full max-w-[500px]">
-	<div
-		class="accordion-item
-    border-ecsess-200 mb-4 overflow-hidden rounded-xl border-2
-    {isOpen ? '' : 'open'}"
-	>
-		<button
-			class="accordion-header hover:bg-ecsess-black-hover
-            flex h-16 w-full cursor-pointer items-center justify-between
-            px-4 transition-colors ease-in-out"
-			onclick={toggle}
-			aria-expanded={isOpen}
-		>
-			<span class="text-xl font-bold">{question}</span>
-			<svg
-				class="accordion-icon transform-cpu transition-all ease-in-out"
-				width="20"
-				height="20"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path d="M9 5l7 7-7 7" />
-			</svg>
-		</button>
-
-		{#if isOpen}
-			<div
-				class="accordion-content border-t-ecsess-200 max-h-fit border-t-2 bg-transparent p-4 transition-all ease-in"
-				transition:slide={{ duration: 300 }}
-			>
-				<p>{answer}</p>
-			</div>
-		{/if}
-	</div>
-</div> -->
-
-<!-- <style>
-	[aria-expanded='true'] .accordion-icon {
-		transform: rotate(90deg);
-	}
-
-	.accordion-item.open .accordion-header,
-	.accordion-item.open .accordion-content {
-		background-color: var(--color-ecsess-black-hover);
-	}
-</style> -->
+<!--  -->
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5edaa75..3550d05 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -34,13 +34,15 @@
 
 <!-- Picture, FAQ -->
 <Section black>
-	<div>
-		<h1>Our Student Council</h1>
-		<img src={data.councilPhoto} alt="ECSESS Council" />
-	</div>
-	<div>
-		<h1>FAQ</h1>
-		<FaqAccordion entries={data.faqs} />
+	<div class="md:grid md:grid-cols-3 md:gap-6">
+		<div class="col-span-2">
+			<h1>Our Student Council</h1>
+			<img src={data.councilPhoto} alt="ECSESS Council" />
+		</div>
+		<div class="col-span-1 place-self-center md:place-content-around m-6 w-full">
+			<h1>FAQ</h1>
+			<FaqAccordion entries={data.faqs} />
+		</div>
 	</div>
 </Section>
 <!-- Office Hours Calendar -->