From 989b0af73f31b719fdd2baf1033161bbeeb147c8 Mon Sep 17 00:00:00 2001
From: zzzmlssqnzzz <melissa.qian@mail.mcgill.ca>
Date: Thu, 19 Jun 2025 00:15:29 -0400
Subject: [PATCH] modifying card council component

---
 src/components/CouncilCard.svelte | 55 +++++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/components/CouncilCard.svelte b/src/components/CouncilCard.svelte
index 343ddb8..3567354 100644
--- a/src/components/CouncilCard.svelte
+++ b/src/components/CouncilCard.svelte
@@ -15,17 +15,52 @@
 	import { Avatar } from '@skeletonlabs/skeleton-svelte';
 </script>
 
+<style>
+	.card{
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		background-color:transparent;
+		padding: 1.5rem;
+		border-radius: 20px;
+		color:  #0A3D2A;
+		background-color: #E8FFD9;
+		max-width: 500px;
+	}
+
+	.profile-img{
+    border-radius: 10%;
+    overflow: hidden;
+	}
+
+	.profile-img :global(img) {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+</style>
+
 <div class="card h-1/2 max-h-1/2 w-full max-w-1/6 rounded-lg border-4 p-4">
 	<!-- <img class="size-4/5" src={placeholder} alt="Placeholder"> -->
 	<!-- <Avatar src={placeholder} {name} /> -->
-	{#if image}
-		<Avatar src={image} {name} />
-	{:else}
-		<Avatar src={placeholder} {name} />
-	{/if}
-	<p class="pb-2 text-xl font-bold">{name} - <span class="text-sm"> {yearProgram} </span></p>
-	<hr />
-	<p class="py-2 text-base font-bold">~ {position} ~</p>
-	<p class="underline">{email}</p>
-	<p class="text-sm">{positionDescription}</p>
+	<div class="avatar-container justify-left">
+		<div class="profile-img justify-center">
+			{#if image}
+				<Avatar src={image} {name}/>
+			{:else}
+				<Avatar src={placeholder} {name} />
+			{/if}
+		</div>	
+	<span class="yearProgram text-sm justify-center"> {yearProgram} </span>
+	</div>
+	<div class="content">
+		<p class="pb-2 text-xl font-bold">{name} </p>
+		<hr />
+		<p class="py-2 text-base">{position}</p>
+		<p class="pb-2 text-xs">{positionDescription}</p>
+		<hr />
+
+		<p class="py-2 text-sm underline">{email}</p>
+	</div>
 </div>