From ded6eb6c9a37a93d2cdc2e6f8e29349a6d972258 Mon Sep 17 00:00:00 2001
From: Antoine Phan <antoine.phan@mail.mcgill.ca>
Date: Sat, 19 Jul 2025 18:41:11 -0400
Subject: [PATCH] Avatar and council member page update

---
 src/components/Avatar.svelte      | 15 +++++++
 src/components/CouncilCard.svelte | 13 +++---
 src/routes/council/+page.svelte   | 68 +++++++++++++++++++------------
 3 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index e69de29..be2cb62 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	// Reference: https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton-svelte/src/components/Avatar/Avatar.svelte
+	import { Avatar } from '@skeletonlabs/skeleton-svelte';
+    // Note: size, font, etc., are styled with TailwindCSS classes
+	let { name, size, src }: {name: string, size: string, src: string} = $props();
+</script>
+
+<Avatar
+	{name}
+	{src}
+    font={"text-xl text-ecsess-black"}
+	{size}
+	background="bg-ecsess-400"
+	imageBase="object-cover w-full h-full"
+/>
diff --git a/src/components/CouncilCard.svelte b/src/components/CouncilCard.svelte
index 27d7993..1429ea1 100644
--- a/src/components/CouncilCard.svelte
+++ b/src/components/CouncilCard.svelte
@@ -2,16 +2,17 @@
 	let { onViewProfile, name, position, image } = $props();
 	import placeholder from 'assets/placeholderAvatar.png';
 	import Button from 'components/Button.svelte';
+	import Avatar from 'components/Avatar.svelte';
 </script>
 
-<div class="text-ecsess-200 flex max-w-lg items-center gap-6 justify-around rounded-lg bg-transparent p-4">
+<div class="text-ecsess-200 flex max-w-md items-center gap-6 justify-between p-3">
 	<!-- Profile picture -->
-	<div class="size-32 overflow-hidden rounded-full">
-		<img src={image || placeholder} alt={name} class="size-full object-cover" />
-	</div>
+  <div>
+    <Avatar {name} size={"size-26 md:size-32"} src={image}/>
+  </div>
 	<div class="text-left">
-		<div class="text-xl font-bold">{name}</div>
-		<div class="text-ecsess-200 mb-2">{position}</div>
+		<div class="text-xl md:text-2xl font-bold">{name}</div>
+		<div class="text-sm md:text-base text-ecsess-200 mb-2 italic">{position}</div>
 		<Button onclick={onViewProfile}>View Profile</Button>
 	</div>
 </div>
diff --git a/src/routes/council/+page.svelte b/src/routes/council/+page.svelte
index 4a5c717..c876f73 100644
--- a/src/routes/council/+page.svelte
+++ b/src/routes/council/+page.svelte
@@ -16,8 +16,7 @@
 	)[0];
 
 	let vps: CouncilMember[] = data.members.filter(
-		(member: CouncilMember) =>
-			member.position.includes('VP') || member.position.includes('Equity and Mental Health Officer')
+		(member: CouncilMember) => member.position.includes('VP') || member.position.includes('Equity')
 	);
 
 	let ureps: CouncilMember[] = data.members.filter((member: CouncilMember) =>
@@ -43,11 +42,16 @@
 <Section>
 	<p class="page-title">Meet the council!</p>
 	<div>
-		<h1>Our Student Council</h1>
-		<img src={data.councilGoofyPic.url} alt="ECSESS Council, but we are goofy" transition:fly />
+		<img
+			src={data.councilGoofyPic.url}
+			alt="ECSESS Council, but we are goofy"
+			class="ring-ecsess-400 shadow-ecsess-black mb-8 place-self-center rounded-lg shadow-2xl ring-4 lg:w-[90%]"
+			transition:fly
+		/>
 	</div>
-</Section>
-<Section>
+
+	<h1 class="border-b-ecsess-200 w-full border-b-2 lg:w-1/2">Our Student Council!</h1>
+
 	<div>
 		<CardCouncil
 			name={president.name}
@@ -57,8 +61,13 @@
 		/>
 	</div>
 
-	<div class="flex justify-center">
-		<div class="flex flex-row flex-wrap justify-center gap-10 p-4 align-middle">
+	<div class="flex flex-col justify-center">
+		<h2
+			class="border-b-ecsess-200 w-full place-self-center-safe border-b-2 border-dashed md:w-1/2 lg:w-1/3"
+		>
+			Vice Presidents
+		</h2>
+		<div class="flex flex-row flex-wrap justify-baseline gap-10 p-4 align-middle md:justify-center">
 			{#each vps as vp}
 				<CardCouncil
 					name={vp.name}
@@ -67,6 +76,14 @@
 					onViewProfile={() => handleViewProfile(vp)}
 				/>
 			{/each}
+		</div>
+
+		<h2
+			class="border-b-ecsess-200 w-full place-self-center-safe border-b-2 border-dashed md:w-1/2 lg:w-1/3"
+		>
+			Year Representative
+		</h2>
+		<div class="flex flex-row flex-wrap justify-baseline gap-10 p-4 align-middle md:justify-center">
 			{#each ureps as urep}
 				<CardCouncil
 					name={urep.name}
@@ -76,23 +93,22 @@
 				/>
 			{/each}
 		</div>
-
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		{#if selectedMember}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<div
-				class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
-				onclick={() => (selectedMember = null)}
-			>
-				<CouncilCardPopUp
-					name={selectedMember.name}
-					position={selectedMember.position}
-					email={selectedMember.email}
-					positionDescription={selectedMember.positionDescription}
-					yearProgram={selectedMember.yearProgram}
-					image={selectedMember.image}
-				/>
-			</div>
-		{/if}
 	</div>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	{#if selectedMember}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+			onclick={() => (selectedMember = null)}
+		>
+			<CouncilCardPopUp
+				name={selectedMember.name}
+				position={selectedMember.position}
+				email={selectedMember.email}
+				positionDescription={selectedMember.positionDescription}
+				yearProgram={selectedMember.yearProgram}
+				image={selectedMember.image}
+			/>
+		</div>
+	{/if}
 </Section>