From 25b12a202caa709e7e0de1c226fd184c184729e3 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Mon, 10 Jul 2023 18:42:25 +0100
Subject: [PATCH] feat(*): Restyle the users list component

---
 src/components/UsersList.svelte | 55 ++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/components/UsersList.svelte b/src/components/UsersList.svelte
index 546b16f..2a9629f 100644
--- a/src/components/UsersList.svelte
+++ b/src/components/UsersList.svelte
@@ -1,25 +1,48 @@
 <script lang="ts">
 	export let users: any;
 	export let showEstimates: boolean = false;
+	export let userId: string;
 </script>
 
 <div id="users-list">
-	<h2>Users</h2>
-	{#each users as user}
-		<div class="name">{user.name}</div>
-		<div
-			class="user-card"
-			class:user-card-null={user.estimate === null}
-			class:user-card-green={user.estimate !== null}
-		>
-			{#if user.estimate !== null && showEstimates}
-				<p class="estimate">{user.estimate}</p>
-			{/if}
-		</div>
-	{/each}
+	<div class="users-container">
+		{#each users as user}
+			<div class="user-wrapper">
+				<div class="name">{user.name}</div>
+				<div class="user-card"
+					class:user-card-null={user.estimate === null}
+					class:user-card-green={user.estimate !== null}
+				>
+					{#if user.estimate !== null && (showEstimates || user.userId === userId)}
+						<p class="estimate">{user.estimate}</p>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
 </div>
 
 <style>
+	#users-list {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 30px;
+	}
+
+	.users-container {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	.user-wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
 	.user-card {
 		display: flex;
 		flex-direction: column;
@@ -48,10 +71,14 @@
 		font-size: 24px;
 		font-weight: bold;
 		margin: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
 	}
 
 	.name {
 		font-size: 16px;
-		margin-top: 10px;
+		margin-bottom: 5px;
 	}
 </style>