From a482df809a0eea955f9e50240286c9db0e55bac0 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Sat, 7 Jan 2023 16:33:00 -0800
Subject: [PATCH] Format details buttons.

---
 src/routes/game/[id]/+page.svelte | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/routes/game/[id]/+page.svelte b/src/routes/game/[id]/+page.svelte
index c870702..a62cc41 100644
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@@ -37,7 +37,7 @@
 		firstParagraphEnd = game?.description?.indexOf('</ p>') + 5;
 	}
 
-	function remoceFromCollection() {
+	function removeFromCollection() {
 		boredState.update((n) => ({
 			...n,
 			dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: game }
@@ -65,7 +65,7 @@
 			<!-- <img src={game.image_url} alt={`Image of ${game.name}`} /> -->
 		</a>
 	</div>
-	<div style="display: grid; place-items: center; gap: 2rem;">
+	<div style="display: grid; place-items: center; gap: 3rem;">
 		<div class="details">
 			{#if game?.year_published}
 				<p>Year: {game?.year_published}</p>
@@ -88,9 +88,9 @@
 				</LinkWithIcon>
 			</p>
 		</div>
-		<div>
+		<div style="display: grid; gap: 1.5rem; place-content: center;">
 			{#if existsInCollection}
-				<Button size="md" kind="danger" icon on:click={() => remoceFromCollection()}>
+				<Button size="md" kind="danger" icon on:click={() => removeFromCollection()}>
 					Remove from collection <MinusCircleIcon width="24" height="24" />
 				</Button>
 			{:else}
@@ -108,8 +108,6 @@
 					Add to collection <PlusCircleIcon width="24" height="24" />
 				</Button>
 			{/if}
-		</div>
-		<div>
 			{#if existsInWishlist}
 				<Button size="md" kind="danger" icon on:click={() => removeFromWishList()}>
 					Remove from wishlist <MinusCircleIcon width="24" height="24" />
@@ -176,7 +174,7 @@
 		border-radius: 4px;
 		margin: 0;
 		padding: 1rem;
-		max-width: 30rem;
+		max-width: 25rem;
 		background-color: var(--color-btn-primary-active);
 	}