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

---
 src/components/EstimateGroupsList.svelte | 52 +++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/components/EstimateGroupsList.svelte b/src/components/EstimateGroupsList.svelte
index 5190262..390f7c1 100644
--- a/src/components/EstimateGroupsList.svelte
+++ b/src/components/EstimateGroupsList.svelte
@@ -7,7 +7,7 @@
 	<ul>
 		{#each Object.keys(estimateGroups) as estimate}
 			<li>
-				Estimate: {estimate}
+				<h4>{estimate}</h4>
 				<ul>
 					{#if estimateGroups[estimate].length >= 5}
 						<li>5+ people</li>
@@ -21,3 +21,53 @@
 		{/each}
 	</ul>
 </div>
+
+<style>
+	#estimate-groups-list {
+		margin-bottom: 30px;
+		text-align: center;
+	}
+
+	#estimate-groups-list h2 {
+		font-size: 24px;
+		margin-bottom: 10px;
+	}
+
+	#estimate-groups-list ul {
+		list-style-type: none;
+		padding-left: 0;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		align-items: center;
+	}
+
+	#estimate-groups-list li {
+		background-color: #f4f4f4;
+		padding: 10px;
+		margin: 10px;
+		text-align: center;
+	}
+
+	#estimate-groups-list h4 {
+		font-size: 18px;
+		margin-bottom: 5px;
+	}
+
+	#estimate-groups-list ul ul {
+		margin-top: 5px;
+		text-align: left;
+	}
+
+	#estimate-groups-list ul ul li {
+		font-size: 14px;
+		color: #888;
+	}
+
+	#estimate-groups-list ul ul li::before {
+		content: '- ';
+		color: #ccc;
+		display: inline;
+		margin-right: 5px;
+	}
+</style>