From 48c6c3098527109d8ed8d112cd70b38f3fcaee4d Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Mon, 10 Jul 2023 18:43:28 +0100
Subject: [PATCH] feat(*): Restyle the estimation page buttons

---
 src/routes/estimation/[roomId]/+page.svelte | 52 +++++++++++++++++++--
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/routes/estimation/[roomId]/+page.svelte b/src/routes/estimation/[roomId]/+page.svelte
index 41f317d..32097e6 100644
--- a/src/routes/estimation/[roomId]/+page.svelte
+++ b/src/routes/estimation/[roomId]/+page.svelte
@@ -138,6 +138,7 @@
 
 {#if showRestartButton}
 	<button
+		class="button button-red"
 		on:click={() => restartEstimation()}
 		on:keydown={(event) => {
 			if (event.key === 'Enter' || event.key === ' ') {
@@ -150,7 +151,7 @@
 	>
 {/if}
 
-<UsersList {users} {showEstimates} />
+<UsersList {users} {showEstimates} {userId} />
 
 <Estimates onEstimateClick={handleEstimateClick} />
 
@@ -160,6 +161,51 @@
 {/if}
 
 <style>
-	/* CSS styles */
-	/* ... */
+	.button {
+		appearance: none;
+		border: 1px solid rgba(27, 31, 35, 0.15);
+		border-radius: 6px;
+		box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0;
+		box-sizing: border-box;
+		color: #fff;
+		cursor: pointer;
+		display: inline-block;
+		font-family: -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif,
+			'Apple Color Emoji', 'Segoe UI Emoji';
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 20px;
+		padding: 6px 16px;
+		position: relative;
+		text-align: center;
+		text-decoration: none;
+		user-select: none;
+		-webkit-user-select: none;
+		touch-action: manipulation;
+		vertical-align: middle;
+		white-space: nowrap;
+	}
+
+	.button:focus:not(:focus-visible):not(.focus-visible) {
+		box-shadow: none;
+		outline: none;
+	}
+
+	.button:disabled {
+		border-color: rgba(27, 31, 35, 0.1);
+		color: rgba(255, 255, 255, 0.8);
+		cursor: default;
+	}
+
+	.button:focus {
+		outline: none;
+	}
+
+	.button-red {
+		background-color: #b60223;
+	}
+
+	.button-red:hover {
+		background-color: #a2021f;
+	}
 </style>