From 14c312807eacefdd84a6f4b4555a2aa73824983a Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Mon, 10 Jul 2023 13:26:39 +0100
Subject: [PATCH] feat(*): Update styling of users list component

---
 src/components/UsersList.svelte | 67 +++++++++++++++++++++++++--------
 1 file changed, 51 insertions(+), 16 deletions(-)

diff --git a/src/components/UsersList.svelte b/src/components/UsersList.svelte
index 1d00199..546b16f 100644
--- a/src/components/UsersList.svelte
+++ b/src/components/UsersList.svelte
@@ -1,22 +1,57 @@
 <script lang="ts">
-	export let estimates: any;
-	export let handleEstimateChange: any;
-	export let currentUserIndex: number;
+	export let users: any;
+	export let showEstimates: boolean = false;
 </script>
 
 <div id="users-list">
 	<h2>Users</h2>
-	<ul>
-		{#each estimates as user, index}
-			<li>
-				{user.name}
-				<input
-					type="number"
-					value={user.estimate}
-					on:input={(e) => handleEstimateChange(e, user)}
-					disabled={currentUserIndex !== index ? true : null}
-				/>
-			</li>
-		{/each}
-	</ul>
+	{#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>
+
+<style>
+	.user-card {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 60px;
+		height: 80px;
+		border: 1px solid #ccc;
+		border-radius: 8px;
+		margin: 10px;
+		background-color: #fff;
+		text-align: center;
+	}
+
+	.user-card-null {
+		background-color: #ccc;
+		color: #fff;
+	}
+
+	.user-card-green {
+		background-color: #6bbf6b;
+		color: #fff;
+	}
+
+	.estimate {
+		font-size: 24px;
+		font-weight: bold;
+		margin: 0;
+	}
+
+	.name {
+		font-size: 16px;
+		margin-top: 10px;
+	}
+</style>