From 4dc5d86a740590bbc4076eb68d3a56498b6552a8 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Mon, 15 Jul 2024 21:02:44 +0100
Subject: [PATCH] feat(#46): Add color to alternate columns

---
 src/routes/mydex/boxes/+page.svelte | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/routes/mydex/boxes/+page.svelte b/src/routes/mydex/boxes/+page.svelte
index 9d628a4..6c92fed 100644
--- a/src/routes/mydex/boxes/+page.svelte
+++ b/src/routes/mydex/boxes/+page.svelte
@@ -67,11 +67,11 @@
 			{#each boxNumbers as boxNumber}
 				<div class="mb-8">
 					<h2 class="text-xl font-bold mb-4">Box {boxNumber}</h2>
-					<div class="grid grid-cols-6">
+					<div class="grid grid-cols-6 gap-4">
 						{#each combinedData as { pokedexEntry, catchRecord }}
 							{#if pokedexEntry[currentPlacement].box === boxNumber}
 								<div
-									class="border p-2"
+									class="pokemon-box"
 									style="grid-column-start: {pokedexEntry[currentPlacement]
 										.column}; grid-row-start: {pokedexEntry[currentPlacement].row}"
 								>
@@ -105,3 +105,15 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.pokemon-box {
+		border: 1px solid #ddd;
+		padding: 1rem;
+		background-color: #f9f9f9;
+	}
+
+	.pokemon-box:nth-child(even) {
+		background-color: #ffffff;
+	}
+</style>