From 5076700b3fee374a025900cdd5b03d1c2b1d69d8 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 23 Feb 2024 00:59:48 -0800
Subject: [PATCH] feat: colour code sections

---
 src/lib/components/ChangelogModal.svelte | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ChangelogModal.svelte b/src/lib/components/ChangelogModal.svelte
index fb980789..c8eb2b8f 100644
--- a/src/lib/components/ChangelogModal.svelte
+++ b/src/lib/components/ChangelogModal.svelte
@@ -23,7 +23,7 @@
 	<div class="px-5 py-4 dark:text-gray-300">
 		<div class="flex justify-between items-start">
 			<div class="text-xl font-bold">
-				{WEBUI_NAME}
+				What’s New in {WEBUI_NAME}
 				<!-- <Confetti x={[-1, -0.25]} y={[0, 0.5]} /> -->
 			</div>
 			<button
@@ -61,8 +61,20 @@
 						</div>
 
 						{#each Object.keys(changelog[version]).filter((section) => section !== 'date') as section}
-							<div class="text-lg">
-								<div class="font-bold capitalize">{section}</div>
+							<div class="">
+								<div
+									class="font-bold capitalize text-xs {section === 'added'
+										? 'text-white bg-blue-500'
+										: section === 'fixed'
+										? 'text-white bg-green-500'
+										: section === 'changed'
+										? 'text-white bg-yellow-500'
+										: section === 'removed'
+										? 'text-white bg-red-500'
+										: ''}  w-fit px-3 rounded-full my-3"
+								>
+									{section}
+								</div>
 
 								<div class="my-2">
 									{#each Object.keys(changelog[version][section]) as item}