From 9655fc6baeb6924282236046e1cf80be02f5fa8c Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Thu, 25 Apr 2024 02:15:57 -0400
Subject: [PATCH] transitions, theme stuff, layout stuff

---
 src/lib/components/Dropdown.svelte              |  9 ++++++---
 src/lib/components/Footer.svelte                |  3 +--
 src/lib/components/Forms/LoginForm.svelte       |  4 ++--
 src/lib/components/Forms/RegisterForm.svelte    |  4 ++--
 src/lib/components/HeaderLink.svelte            |  2 +-
 src/routes/(app)/+layout.svelte                 | 15 +++++++++++----
 src/routes/(landing)/+layout.svelte             | 10 ++++++++++
 src/routes/{ => (landing)}/+page.svelte         |  4 ++--
 src/routes/{ => (landing)}/privacy/+page.svelte |  0
 src/routes/{ => (landing)}/terms/+page.svelte   |  0
 src/routes/+layout.svelte                       |  8 ++++----
 11 files changed, 39 insertions(+), 20 deletions(-)
 create mode 100644 src/routes/(landing)/+layout.svelte
 rename src/routes/{ => (landing)}/+page.svelte (92%)
 rename src/routes/{ => (landing)}/privacy/+page.svelte (100%)
 rename src/routes/{ => (landing)}/terms/+page.svelte (100%)

diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte
index e51cd78..946d2b7 100644
--- a/src/lib/components/Dropdown.svelte
+++ b/src/lib/components/Dropdown.svelte
@@ -10,13 +10,16 @@
 </script>
 
 <div class="flex relative w-fit">
-	<button class="my-auto w-min" on:click={toggle}>
-		<Menu class="w-5 h-5"></Menu>
+	<button
+		class="my-auto w-min transition-colors hover:text-overlay2 {visible && 'text-overlay2'}"
+		on:click={toggle}
+	>
+		<Menu size="20"></Menu>
 	</button>
 	{#if visible}
 		<div
 			transition:slide
-			class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-crust rounded-lg origin-top right-0 absolute transition-all shadow-md"
+			class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-crust rounded-lg origin-top right-0 absolute transition-all shadow-md translate-x-3.5"
 		>
 			<slot />
 		</div>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 78bf97a..ee78767 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,4 +1,3 @@
 <div
-	class="w-full h-full py-auto flex px-4 place-content-between rounded-xl
-    bg-neutral-200 dark:bg-neutral-900 transition-colors"
+	class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust"
 ></div>
diff --git a/src/lib/components/Forms/LoginForm.svelte b/src/lib/components/Forms/LoginForm.svelte
index 2bbd020..6f62ea5 100644
--- a/src/lib/components/Forms/LoginForm.svelte
+++ b/src/lib/components/Forms/LoginForm.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { blur } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 	import { Mail, SquareAsterisk, LogIn, Undo } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
@@ -46,7 +46,7 @@
 	}
 </script>
 
-<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-full">
+<div class="flex justify-center items-center h-full">
 	<div class="flex flex-col space-y-2">
 		<div class="transition-colors fill-black dark:fill-white">
 			<Logo />
diff --git a/src/lib/components/Forms/RegisterForm.svelte b/src/lib/components/Forms/RegisterForm.svelte
index 022dd52..941904c 100644
--- a/src/lib/components/Forms/RegisterForm.svelte
+++ b/src/lib/components/Forms/RegisterForm.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { blur } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 	import { Mail, SquareAsterisk, Undo, User, UserPlus } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
@@ -56,7 +56,7 @@
 	}
 </script>
 
-<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-full">
+<div class="flex justify-center items-center h-full">
 	<div class="flex flex-col space-y-2">
 		<div class="transition-colors fill-black dark:fill-white">
 			<Logo />
diff --git a/src/lib/components/HeaderLink.svelte b/src/lib/components/HeaderLink.svelte
index 5022fd7..a9a8cba 100644
--- a/src/lib/components/HeaderLink.svelte
+++ b/src/lib/components/HeaderLink.svelte
@@ -13,7 +13,7 @@
 	{href}
 	class="my-auto md:text-lg transition-all {selected
 		? 'font-bold tracking-wider'
-		: 'hover:text-neutral-500 focus:text-neutral-500'}"
+		: 'hover:text-overlay2 focus:text-overlay2'}"
 >
 	<slot />
 </a>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 66989e8..84fbaa3 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,16 +1,23 @@
 <script>
+	import { page } from '$app/stores';
+	import { fade } from 'svelte/transition';
+
 	import Header from '$lib/components/Header.svelte';
 	import Footer from '$lib/components/Footer.svelte';
+
+	let show = false;
 </script>
 
-<div class="my-2 w-full min-h-screen">
+<div class="container my-2 w-full min-h-screen">
 	<div class="w-full h-12">
 		<Header></Header>
 	</div>
 
-	<div class="w-full min-h-[calc(100vh-4.5rem)] my-2">
-		<slot />
-	</div>
+	{#key $page.url}
+		<div in:fade|global class="w-full min-h-[calc(100vh-4.5rem)] my-2">
+			<slot />
+		</div>
+	{/key}
 
 	<div class="w-full h-20">
 		<Footer></Footer>
diff --git a/src/routes/(landing)/+layout.svelte b/src/routes/(landing)/+layout.svelte
new file mode 100644
index 0000000..45e5f8e
--- /dev/null
+++ b/src/routes/(landing)/+layout.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { page } from '$app/stores';
+	import { fade } from 'svelte/transition';
+</script>
+
+{#key $page.url}
+	<div in:fade class="container">
+		<slot />
+	</div>
+{/key}
diff --git a/src/routes/+page.svelte b/src/routes/(landing)/+page.svelte
similarity index 92%
rename from src/routes/+page.svelte
rename to src/routes/(landing)/+page.svelte
index fa028ac..5a8a298 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/(landing)/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { blur } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 	import { LogIn, UserPlus } from 'lucide-svelte';
 	import { writable } from 'svelte/store';
 	import { page } from '$app/stores';
@@ -27,7 +27,7 @@
 
 <div class="h-[85vh] md:h-screen">
 	{#if $state === '/landing'}
-		<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-full">
+		<div class="flex justify-center items-center h-full">
 			<div class="flex flex-col space-y-1.5">
 				<div>
 					<Logo />
diff --git a/src/routes/privacy/+page.svelte b/src/routes/(landing)/privacy/+page.svelte
similarity index 100%
rename from src/routes/privacy/+page.svelte
rename to src/routes/(landing)/privacy/+page.svelte
diff --git a/src/routes/terms/+page.svelte b/src/routes/(landing)/terms/+page.svelte
similarity index 100%
rename from src/routes/terms/+page.svelte
rename to src/routes/(landing)/terms/+page.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a9c4645..e244218 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,10 +3,12 @@
 
 	import { Toaster } from 'svelte-sonner';
 	import { CircleAlert, TriangleAlert, Info, Check, Loader } from 'lucide-svelte';
+	import { page } from '$app/stores';
 
-	import { darkMode, user } from '$lib/stores.js';
+	import { user } from '$lib/stores.js';
 	import ThemeHandler from '$lib/components/ThemeHandler.svelte';
 	import PageMeta from '$lib/components/PageMeta.svelte';
+	import { fade } from 'svelte/transition';
 
 	export let data;
 
@@ -35,6 +37,4 @@
 	<TriangleAlert size="20" class="text-text" slot="warning-icon" />
 </Toaster>
 
-<div class="container">
-	<slot />
-</div>
+<slot />