From b1555b7fd7d2db654d53ff1ebe065a54001b0e55 Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Fri, 24 May 2024 02:01:12 -0400
Subject: [PATCH] i love web design!

---
 src/app.css                                  |  4 ++++
 src/error.html                               |  4 ++--
 src/lib/components/Dropdown.svelte           |  5 +----
 src/lib/components/File.svelte               |  2 +-
 src/lib/components/Footer.svelte             |  2 +-
 src/lib/components/Forms/LoginForm.svelte    |  2 +-
 src/lib/components/Forms/RegisterForm.svelte |  2 +-
 src/lib/components/Header.svelte             |  4 +---
 src/lib/components/Inputs/Button.svelte      |  4 ++--
 src/lib/components/Inputs/FormInput.svelte   | 18 +++++++++---------
 src/lib/components/Inputs/Link.svelte        |  2 +-
 src/lib/components/Logo.svelte               |  2 +-
 src/routes/(app)/dashboard/+page.svelte      |  8 ++------
 13 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/app.css b/src/app.css
index 27bea8f..958a04e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -16,3 +16,7 @@ body {
 	font-weight: 400;
 	font-style: normal;
 }
+
+* {
+	@apply transition-colors;
+}
diff --git a/src/error.html b/src/error.html
index b266e78..afc1b49 100644
--- a/src/error.html
+++ b/src/error.html
@@ -28,14 +28,14 @@
 				<div class="flex space-x-2">
 					<button on:click="history.back();">
 						<div
-							class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
+							class="flex p-2 space-x-2 rounded-lg border-b-2 border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
 						>
 							<p>Go Back</p>
 						</div>
 					</button>
 					<a
 						href="/"
-						class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
+						class="flex p-2 space-x-2 rounded-lg border-b-2 border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
 					>
 						<p>Go Home</p>
 					</a>
diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte
index 946d2b7..8b7756c 100644
--- a/src/lib/components/Dropdown.svelte
+++ b/src/lib/components/Dropdown.svelte
@@ -10,10 +10,7 @@
 </script>
 
 <div class="flex relative w-fit">
-	<button
-		class="my-auto w-min transition-colors hover:text-overlay2 {visible && 'text-overlay2'}"
-		on:click={toggle}
-	>
+	<button class="my-auto w-min hover:text-overlay2 {visible && 'text-overlay2'}" on:click={toggle}>
 		<Menu size="20"></Menu>
 	</button>
 	{#if visible}
diff --git a/src/lib/components/File.svelte b/src/lib/components/File.svelte
index 9535237..b078164 100644
--- a/src/lib/components/File.svelte
+++ b/src/lib/components/File.svelte
@@ -12,7 +12,7 @@
 	let percent = 0;
 </script>
 
-<div class="rounded-md bg-mantle">
+<div class="rounded-md transition-all bg-mantle">
 	<div
 		in:fade|global={{ delay: 100 * i }}
 		class="flex px-1.5 w-full h-14 rounded-md transition-all"
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index ee78767..51f9313 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,3 +1,3 @@
 <div
-	class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust"
+	class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md py-auto bg-crust"
 ></div>
diff --git a/src/lib/components/Forms/LoginForm.svelte b/src/lib/components/Forms/LoginForm.svelte
index 599ada1..223d52c 100644
--- a/src/lib/components/Forms/LoginForm.svelte
+++ b/src/lib/components/Forms/LoginForm.svelte
@@ -49,7 +49,7 @@
 
 <div class="flex justify-center items-center h-full">
 	<div class="flex flex-col space-y-2">
-		<div class="transition-colors fill-text">
+		<div class=" fill-text">
 			<Logo />
 		</div>
 		<form on:submit|preventDefault>
diff --git a/src/lib/components/Forms/RegisterForm.svelte b/src/lib/components/Forms/RegisterForm.svelte
index a15329f..6c58234 100644
--- a/src/lib/components/Forms/RegisterForm.svelte
+++ b/src/lib/components/Forms/RegisterForm.svelte
@@ -60,7 +60,7 @@
 
 <div class="flex justify-center items-center h-full">
 	<div class="flex flex-col space-y-2">
-		<div class="transition-colors fill-text">
+		<div class=" fill-text">
 			<Logo />
 		</div>
 		<form on:submit|preventDefault>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 4ffa58c..8c921b2 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -9,9 +9,7 @@
 	import Logo from '$lib/components/Logo.svelte';
 </script>
 
-<div
-	class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust"
->
+<div class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md py-auto bg-crust">
 	<div class="flex my-auto md:space-x-6">
 		<a
 			href="/dashboard"
diff --git a/src/lib/components/Inputs/Button.svelte b/src/lib/components/Inputs/Button.svelte
index ea7b9c8..edda9e1 100644
--- a/src/lib/components/Inputs/Button.svelte
+++ b/src/lib/components/Inputs/Button.svelte
@@ -5,13 +5,13 @@
 </script>
 
 <button
-	class="group/button {pulse ? 'animate-pulse cursor-wait' : ''} transition-colors"
+	class="group/button {pulse ? 'animate-pulse cursor-wait' : ''} "
 	type="button"
 	on:click={click}
 	{disabled}
 >
 	<div
-		class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors hadow-md bg-crust border-overlay2 hover:border-overlay0 group-disabled/button:border-overlay0 group-disabled/button:hover:border-overlay0"
+		class="flex p-2 space-x-2 rounded-lg border-b-2 hadow-md bg-crust border-overlay2 hover:border-overlay0 group-disabled/button:border-overlay0 group-disabled/button:hover:border-overlay0"
 	>
 		<slot />
 	</div>
diff --git a/src/lib/components/Inputs/FormInput.svelte b/src/lib/components/Inputs/FormInput.svelte
index 83547e1..9f9ac13 100644
--- a/src/lib/components/Inputs/FormInput.svelte
+++ b/src/lib/components/Inputs/FormInput.svelte
@@ -7,12 +7,12 @@
 <!-- insane that i have to do this because -->
 <!-- 'type' attribute cannot be dynamic if input uses two-way binding -->
 {#if type === 'username'}
-	<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
-		<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
+	<div class="flex p-2 space-x-1 rounded-lg shadow-md bg-crust">
+		<div class="py-0.5 pr-1 border-r-2 border-overlay2">
 			<slot />
 		</div>
 		<input
-			class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
+			class="py-0.5 bg-crust peer placeholder:text-overlay1"
 			type="username"
 			{name}
 			{id}
@@ -28,12 +28,12 @@
 		</div>
 	</div>
 {:else if type === 'email'}
-	<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
-		<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
+	<div class="flex p-2 space-x-1 rounded-lg shadow-md bg-crust">
+		<div class="py-0.5 pr-1 border-r-2 border-overlay2">
 			<slot />
 		</div>
 		<input
-			class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
+			class="py-0.5 bg-crust peer placeholder:text-overlay1"
 			type="email"
 			{name}
 			{id}
@@ -49,12 +49,12 @@
 		</div>
 	</div>
 {:else if type === 'password'}
-	<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
-		<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
+	<div class="flex p-2 space-x-1 rounded-lg shadow-md bg-crust">
+		<div class="py-0.5 pr-1 border-r-2 border-overlay2">
 			<slot />
 		</div>
 		<input
-			class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
+			class="py-0.5 bg-crust peer placeholder:text-overlay1"
 			type="password"
 			{name}
 			{id}
diff --git a/src/lib/components/Inputs/Link.svelte b/src/lib/components/Inputs/Link.svelte
index f6e1ed6..da926e2 100644
--- a/src/lib/components/Inputs/Link.svelte
+++ b/src/lib/components/Inputs/Link.svelte
@@ -10,7 +10,7 @@
 {:else if style === 'button'}
 	<a
 		{href}
-		class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400
+		class="flex p-2 space-x-2 rounded-lg border-b-2 border-neutral-400
 	       hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
 	>
 		<slot />
diff --git a/src/lib/components/Logo.svelte b/src/lib/components/Logo.svelte
index 315f72e..b88fdf0 100644
--- a/src/lib/components/Logo.svelte
+++ b/src/lib/components/Logo.svelte
@@ -2,7 +2,7 @@
 	viewBox="0 0 1200 628"
 	version="1.1"
 	id="svg1"
-	class="transition-colors fill-inherit"
+	class=" fill-inherit"
 	xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 	xmlns:
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/(app)/dashboard/+page.svelte b/src/routes/(app)/dashboard/+page.svelte
index 41a357e..77d6074 100644
--- a/src/routes/(app)/dashboard/+page.svelte
+++ b/src/routes/(app)/dashboard/+page.svelte
@@ -43,9 +43,7 @@
 							input.click();
 						}}
 					>
-						<div
-							class="flex m-auto text-lg transition-colors text-surface2 group-hover:text-overlay1"
-						>
+						<div class="flex m-auto text-lg text-surface2 group-hover:text-overlay1">
 							<Upload></Upload>
 						</div>
 					</button>
@@ -56,9 +54,7 @@
 								running = true;
 							}}
 						>
-							<div
-								class="flex m-auto text-lg transition-colors text-surface2 group-hover:text-green"
-							>
+							<div class="flex m-auto text-lg text-surface2 group-hover:text-green">
 								<Check class=""></Check>
 							</div>
 						</button>