From 476e8f002f6b921e22483217d1ffc4c17094cee0 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 23 Feb 2024 01:31:28 -0800
Subject: [PATCH] fix: styling

---
 src/lib/components/ChangelogModal.svelte | 68 ++++++++++++------------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/ChangelogModal.svelte b/src/lib/components/ChangelogModal.svelte
index 612bd095..87559132 100644
--- a/src/lib/components/ChangelogModal.svelte
+++ b/src/lib/components/ChangelogModal.svelte
@@ -60,40 +60,42 @@
 			<div class="mb-3">
 				{#if changelog}
 					{#each Object.keys(changelog) as version}
-						<div class="font-bold text-xl mb-1">
-							v{version} - {changelog[version].date}
-						</div>
-
-						<hr class=" dark:border-gray-800 my-2" />
-
-						{#each Object.keys(changelog[version]).filter((section) => section !== 'date') as section}
-							<div class="">
-								<div
-									class="font-bold capitalize text-xs {section === 'added'
-										? 'text-white bg-blue-600'
-										: section === 'fixed'
-										? 'text-white bg-green-600'
-										: section === 'changed'
-										? 'text-white bg-yellow-600'
-										: section === 'removed'
-										? 'text-white bg-red-600'
-										: ''}  w-fit px-3 rounded-full my-3"
-								>
-									{section}
-								</div>
-
-								<div class="my-1.5 px-1.5">
-									{#each Object.keys(changelog[version][section]) as item}
-										<div class="text-sm mb-2">
-											<div class="font-semibold">
-												{changelog[version][section][item].title}
-											</div>
-											<div class="my-1.5">{changelog[version][section][item].content}</div>
-										</div>
-									{/each}
-								</div>
+						<div class=" mb-3 pr-2">
+							<div class="font-bold text-xl mb-1 dark:text-white">
+								v{version} - {changelog[version].date}
 							</div>
-						{/each}
+
+							<hr class=" dark:border-gray-800 my-2" />
+
+							{#each Object.keys(changelog[version]).filter((section) => section !== 'date') as section}
+								<div class="">
+									<div
+										class="font-bold uppercase text-xs {section === 'added'
+											? 'text-white bg-blue-600'
+											: section === 'fixed'
+											? 'text-white bg-green-600'
+											: section === 'changed'
+											? 'text-white bg-yellow-600'
+											: section === 'removed'
+											? 'text-white bg-red-600'
+											: ''}  w-fit px-3 rounded-full my-2"
+									>
+										{section}
+									</div>
+
+									<div class="my-1.5 px-1.5">
+										{#each Object.keys(changelog[version][section]) as item}
+											<div class="text-sm mb-2">
+												<div class="font-semibold uppercase">
+													{changelog[version][section][item].title}
+												</div>
+												<div class="mb-2 mt-1">{changelog[version][section][item].content}</div>
+											</div>
+										{/each}
+									</div>
+								</div>
+							{/each}
+						</div>
 					{/each}
 				{/if}
 			</div>