From c282ec0378b1664d27a7ef1b5e00b64683611f61 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sat, 25 Dec 2021 23:56:54 -0700
Subject: [PATCH] Add a background to each of the options

---
 web-svelte/src/views/lobby/multiplayer.svelte | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/web-svelte/src/views/lobby/multiplayer.svelte b/web-svelte/src/views/lobby/multiplayer.svelte
index 4f74989..7f96055 100644
--- a/web-svelte/src/views/lobby/multiplayer.svelte
+++ b/web-svelte/src/views/lobby/multiplayer.svelte
@@ -103,15 +103,17 @@ function toggleOption(e: CustomEvent<string>) {
 			<h2>Options</h2>
 			<div class="options-box">
 				{#each visibleOptions as option}
-					<SciFiCheckbox
-						name="{option.name}"
-						id="{option.id}"
-						disabled="{!$isHost}"
-						bind:state="{option.active}"
-						on:toggle="{toggleOption}"
-					>
-						{option.name}
-					</SciFiCheckbox>
+					<div>
+						<SciFiCheckbox
+							name="{option.name}"
+							id="{option.id}"
+							disabled="{!$isHost}"
+							bind:state="{option.active}"
+							on:toggle="{toggleOption}"
+						>
+							{option.name}
+						</SciFiCheckbox>
+					</div>
 				{/each}
 			</div>
 		</div>
@@ -183,6 +185,13 @@ h1 {
 	display: flex;
 	justify-content: space-evenly;
 	flex-wrap: wrap;
+
+	> div {
+		background: rgba(255, 255, 255, 0.1);
+		border-radius: 5px;
+		padding: 3px 7px;
+		margin-bottom: 10px;
+	}
 }
 
 .info-button-container {