From dbff210343d1d5e0ca1599578f84b78df776ab08 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Wed, 5 Feb 2025 16:21:44 +0300
Subject: [PATCH] some bug fixes

shorten button labels, comment out fly anim, fix gradients hidden on other pages w/ one image in conversion
---
 package.json                                |  1 -
 src/app.html                                |  1 -
 src/lib/sections/about/Resources.svelte     |  4 +-
 src/lib/sections/settings/Appearance.svelte |  4 +-
 src/routes/+layout.svelte                   | 69 +++++++++++----------
 5 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index bc0036e..6071405 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.4",
 		"@types/eslint": "^9.6.1",
-		"@types/js-cookie": "^3.0.6",
 		"@types/jsmediatags": "^3.9.6",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.18.0",
diff --git a/src/app.html b/src/app.html
index f0af328..cb0f2f0 100644
--- a/src/app.html
+++ b/src/app.html
@@ -8,7 +8,6 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		%sveltekit.head%
 		<script>
-			// FIXME: flash of dark mode when using light mode
 			(function() {
 				// Apply theme before DOM is loaded
 				let theme = localStorage.getItem("theme");
diff --git a/src/lib/sections/about/Resources.svelte b/src/lib/sections/about/Resources.svelte
index bc167c9..c1d5d60 100644
--- a/src/lib/sections/about/Resources.svelte
+++ b/src/lib/sections/about/Resources.svelte
@@ -20,7 +20,7 @@
 			class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
 		>
 			<MessageCircleMoreIcon size="24" class="inline-block mr-2" />
-			Discord server
+			Discord
 		</a>
 		<a
 			href="https://github.com/not-nullptr/VERT"
@@ -29,7 +29,7 @@
 			class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
 		>
 			<GithubIcon size="24" class="inline-block mr-2" />
-			Source code
+			Source
 		</a>
 	</div>
 </Panel>
diff --git a/src/lib/sections/settings/Appearance.svelte b/src/lib/sections/settings/Appearance.svelte
index e07e6cb..5cdbccf 100644
--- a/src/lib/sections/settings/Appearance.svelte
+++ b/src/lib/sections/settings/Appearance.svelte
@@ -131,7 +131,7 @@
 							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
 						>
 							<PlayIcon size="24" class="inline-block mr-2" />
-							Enable animations
+							Enable
 						</button>
 
 						<button
@@ -140,7 +140,7 @@
 							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
 						>
 							<PauseIcon size="24" class="inline-block mr-2" />
-							Disable animations
+							Disable
 						</button>
 					</div>
 				</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5658a4a..47495a7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -143,6 +143,12 @@
 
 	<div class="grid grid-rows-1 grid-cols-1 h-full flex-grow">
 		{#key data.pathname}
+			<div
+				class="row-start-1 col-start-1"
+				transition:fade={{ duration, easing: quintOut }}
+			>
+				<!--
+			FIXME fly animations cause issues for some reason (page height extending during transition, causing scrollbar to disappear briefly (on mobile) & ability to scroll)
 			<div
 				class="row-start-1 col-start-1"
 				in:fly={{
@@ -156,7 +162,6 @@
 					duration,
 					easing: quintOut,
 				}}
-			>
 				<div
 					class="flex flex-col h-full pb-36 md:pb-0"
 					in:fade={{
@@ -170,6 +175,8 @@
 						delay: 200,
 					}}
 				>
+			>-->
+				<div class="flex flex-col h-full pb-36 md:pb-0">
 					{@render children()}
 				</div>
 			</div>
@@ -202,35 +209,33 @@
 </div>
 
 <!-- Gradients placed here to prevent it overlapping in transitions -->
-{#if $showGradient}
-	{#if data.pathname === "/"}
-		<div
-			class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
-		>
-			<VertVBig class="fill-[--fg] opacity-50" />
-		</div>
-		<div
-			id="gradient-bg"
-			class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-			style="background: var(--bg-gradient);"
-		></div>
-	{:else if data.pathname === "/convert"}
-		<div
-			id="gradient-bg"
-			class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-			style="background: var(--bg-gradient-{$gradientColor || 'pink'});"
-		></div>
-	{:else if data.pathname === "/settings"}
-		<div
-			id="gradient-bg"
-			class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-			style="background: var(--bg-gradient-blue);"
-		></div>
-	{:else if data.pathname === "/about"}
-		<div
-			id="gradient-bg"
-			class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-			style="background: var(--bg-gradient-pink);"
-		></div>
-	{/if}
+{#if data.pathname === "/"}
+	<div
+		class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
+	>
+		<VertVBig class="fill-[--fg] opacity-50" />
+	</div>
+	<div
+		id="gradient-bg"
+		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+		style="background: var(--bg-gradient);"
+	></div>
+{:else if data.pathname === "/convert" && $showGradient}
+	<div
+		id="gradient-bg"
+		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+		style="background: var(--bg-gradient-{$gradientColor || 'pink'});"
+	></div>
+{:else if data.pathname === "/settings"}
+	<div
+		id="gradient-bg"
+		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+		style="background: var(--bg-gradient-blue);"
+	></div>
+{:else if data.pathname === "/about"}
+	<div
+		id="gradient-bg"
+		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+		style="background: var(--bg-gradient-pink);"
+	></div>
 {/if}