From 98fadbbe7683d8b87b62db8fcf72fb017eb3d930 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Mon, 10 Feb 2025 21:14:45 +0300
Subject: [PATCH] fix: respect effects setting for hover/clicks transitions

is this necessary?
---
 .../components/functional/ConversionPanel.svelte    |  6 +++---
 src/lib/components/functional/Uploader.svelte       |  4 ++--
 src/lib/sections/about/Donate.svelte                | 13 +++++++------
 src/lib/sections/about/Resources.svelte             |  5 +++--
 src/lib/sections/settings/Appearance.svelte         | 13 +++++++++----
 src/routes/convert/+page.svelte                     |  9 +++++++--
 6 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/functional/ConversionPanel.svelte b/src/lib/components/functional/ConversionPanel.svelte
index 823e69b..44caf2c 100644
--- a/src/lib/components/functional/ConversionPanel.svelte
+++ b/src/lib/components/functional/ConversionPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { files } from "$lib/store/index.svelte";
+	import { effects, files } from "$lib/store/index.svelte";
 	import { FolderArchiveIcon, RefreshCw } from "lucide-svelte";
 	import Panel from "../visual/Panel.svelte";
 	import Dropdown from "./Dropdown.svelte";
@@ -11,14 +11,14 @@
 	<div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
 		<button
 			onclick={() => files.convertAll()}
-			class="btn highlight flex gap-3 max-md:w-full"
+			class="btn {$effects ? "" : "!scale-100"} highlight flex gap-3 max-md:w-full"
 			disabled={!files.ready}
 		>
 			<RefreshCw size="24" />
 			<p>Convert all</p>
 		</button>
 		<button
-			class="btn flex gap-3 max-md:w-full"
+			class="btn {$effects ? "" : "!scale-100"} flex gap-3 max-md:w-full"
 			disabled={!files.ready || !files.results}
 			onclick={() => files.downloadAll()}
 		>
diff --git a/src/lib/components/functional/Uploader.svelte b/src/lib/components/functional/Uploader.svelte
index 97efef8..be6fd49 100644
--- a/src/lib/components/functional/Uploader.svelte
+++ b/src/lib/components/functional/Uploader.svelte
@@ -3,7 +3,7 @@
 	import Panel from "../visual/Panel.svelte";
 	import clsx from "clsx";
 	import { onMount } from "svelte";
-	import { files } from "$lib/store/index.svelte";
+	import { effects, files } from "$lib/store/index.svelte";
 	import { converters } from "$lib/converters";
 	import { goto } from "$app/navigation";
 
@@ -61,7 +61,7 @@
 <button
 	onclick={uploadFiles}
 	bind:this={uploaderButton}
-	class={clsx(`hover:scale-105 active:scale-100 duration-200 ${classList}`)}
+	class={clsx(`hover:scale-105 active:scale-100 ${$effects ? "" : "!scale-100"} duration-200 ${classList}`)}
 >
 	<Panel
 		class="flex justify-center items-center w-full h-full flex-col pointer-events-none"
diff --git a/src/lib/sections/about/Donate.svelte b/src/lib/sections/about/Donate.svelte
index 5ecf9f4..3c315eb 100644
--- a/src/lib/sections/about/Donate.svelte
+++ b/src/lib/sections/about/Donate.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import FancyInput from "$lib/components/functional/FancyInput.svelte";
 	import Panel from "$lib/components/visual/Panel.svelte";
+	import { effects } from "$lib/store/index.svelte";
 	import {
 		CalendarHeartIcon,
 		HandCoinsIcon,
@@ -41,29 +42,29 @@
 	<div class="flex flex-col gap-3 w-full">
 		<div class="flex gap-3 w-full">
 			<button
-				class="btn flex-1 p-4 rounded-lg bg-accent-red text-black flex items-center justify-center"
+				class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg bg-accent-red text-black flex items-center justify-center"
 			>
 				<HandCoinsIcon size="24" class="inline-block mr-2" />
 				One-time
 			</button>
 
 			<button
-				class="btn flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
+				class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
 			>
 				<CalendarHeartIcon size="24" class="inline-block mr-2" />
 				Monthly
 			</button>
 		</div>
 		<div class="flex gap-3 w-full">
-			<button class="btn bg-accent-red text-black p-4 rounded-lg flex-1"
+			<button class="btn {$effects ? "" : "!scale-100"} bg-accent-red text-black p-4 rounded-lg flex-1"
 				>$1 USD</button
 			>
 			<button
-				class="btn bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
+				class="btn {$effects ? "" : "!scale-100"} bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
 				>$5 USD</button
 			>
 			<button
-				class="btn bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
+				class="btn {$effects ? "" : "!scale-100"} bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
 				>$10 USD</button
 			>
 			<!-- <div class="relative flex items-center flex-[2]">
@@ -86,7 +87,7 @@
 		</p>
 
 		<button
-			class="btn flex-1 p-3 rounded-3xl bg-accent-red text-black flex items-center justify-center"
+			class="btn {$effects ? "" : "!scale-100"} flex-1 p-3 rounded-3xl bg-accent-red text-black flex items-center justify-center"
 		>
 			<WalletIcon size="24" class="inline-block mr-2" />
 			Pay now
diff --git a/src/lib/sections/about/Resources.svelte b/src/lib/sections/about/Resources.svelte
index 3c0d71f..315bc71 100644
--- a/src/lib/sections/about/Resources.svelte
+++ b/src/lib/sections/about/Resources.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import { DISCORD_URL, GITHUB_URL_VERT } from "$lib/consts";
+	import { effects } from "$lib/store/index.svelte";
 	import { GithubIcon, LinkIcon, MessageCircleMoreIcon } from "lucide-svelte";
 </script>
 
@@ -18,7 +19,7 @@
 			href={DISCORD_URL}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
+			class="btn {$effects ? "" : "!scale-100"} 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
@@ -27,7 +28,7 @@
 			href={GITHUB_URL_VERT}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
+			class="btn {$effects ? "" : "!scale-100"} 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
diff --git a/src/lib/sections/settings/Appearance.svelte b/src/lib/sections/settings/Appearance.svelte
index baa7465..574f3ce 100644
--- a/src/lib/sections/settings/Appearance.svelte
+++ b/src/lib/sections/settings/Appearance.svelte
@@ -55,6 +55,11 @@
 		if (effectsUnsubscribe) effectsUnsubscribe();
 		if (themeUnsubscribe) themeUnsubscribe();
 	});
+
+	$effect(() => {
+        updateEffectsClasses($effects);
+        updateThemeClasses($theme);
+    });
 </script>
 
 <Panel class="flex flex-col gap-8 p-6">
@@ -80,7 +85,7 @@
 						<button
 							bind:this={lightElement}
 							onclick={() => setTheme("light")}
-							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
+							class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
 						>
 							<SunIcon size="24" class="inline-block mr-2" />
 							Light
@@ -89,7 +94,7 @@
 						<button
 							bind:this={darkElement}
 							onclick={() => setTheme("dark")}
-							class="btn flex-1 p-4 rounded-lg text-black flex items-center justify-center"
+							class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black flex items-center justify-center"
 						>
 							<MoonIcon size="24" class="inline-block mr-2" />
 							Dark
@@ -110,7 +115,7 @@
 						<button
 							bind:this={enableEffectsElement}
 							onclick={() => setEffects(true)}
-							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
+							class="btn {$effects ? "" : "!scale-100"} 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
@@ -119,7 +124,7 @@
 						<button
 							bind:this={disableEffectsElement}
 							onclick={() => setEffects(false)}
-							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
+							class="btn {$effects ? "" : "!scale-100"} 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
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index 1c6a690..299ece3 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -5,6 +5,7 @@
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import ProgressBar from "$lib/components/visual/ProgressBar.svelte";
 	import {
+		effects,
 		files,
 		gradientColor,
 		showGradient,
@@ -148,7 +149,9 @@
 						/>
 						<div class="w-full flex items-center justify-between">
 							<button
-								class="btn p-0 w-14 h-14 text-black {isAudio
+								class="btn {$effects
+									? ''
+									: '!scale-100'} p-0 w-14 h-14 text-black {isAudio
 									? 'bg-accent-purple'
 									: isVideo
 										? 'bg-accent-red'
@@ -159,7 +162,9 @@
 								<RotateCwIcon size="24" />
 							</button>
 							<button
-								class="btn p-0 w-14 h-14"
+								class="btn {$effects
+									? ''
+									: '!scale-100'} p-0 w-14 h-14"
 								onclick={file.download}
 								disabled={!file.result}
 							>