From 430158446704f5a6f42e21f7ff5d2fdc975d90d1 Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Thu, 25 Apr 2024 01:54:39 -0400
Subject: [PATCH] NEW THEMES. looks pretty

---
 package.json                                 |  1 +
 src/app.css                                  | 15 ++++----
 src/lib/components/Dropdown.svelte           |  6 ++--
 src/lib/components/DropdownButton.svelte     |  5 +--
 src/lib/components/Forms/RegisterForm.svelte |  2 +-
 src/lib/components/Header.svelte             |  9 ++---
 src/lib/components/Inputs/Button.svelte      |  2 +-
 src/lib/components/Inputs/FormInput.svelte   | 36 ++++++++------------
 src/lib/components/Logo.svelte               |  1 +
 src/lib/components/ThemeHandler.svelte       |  4 +++
 src/routes/(app)/+layout.svelte              |  2 +-
 src/routes/+layout.svelte                    | 21 +++++++++++-
 src/routes/+page.svelte                      |  4 +--
 tailwind.config.js                           |  6 +++-
 yarn.lock                                    |  5 +++
 15 files changed, 68 insertions(+), 51 deletions(-)

diff --git a/package.json b/package.json
index 87f788a..25d1884 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@catppuccin/tailwindcss": "^0.1.6",
 		"@sveltejs/adapter-node": "^5.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
diff --git a/src/app.css b/src/app.css
index 5afbab4..27bea8f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,18 +4,15 @@
 @tailwind components;
 @tailwind utilities;
 
-html {
-	@apply dark:bg-neutral-950;
-	@apply dark:text-neutral-200;
-	@apply transition-colors;
+html,
+body {
+	@apply bg-base;
+	@apply text-text;
+
+	@apply transition-all;
 
 	font-family: 'Nunito', sans-serif;
 	font-optical-sizing: auto;
 	font-weight: 400;
 	font-style: normal;
 }
-
-strong {
-	@apply dark:text-white;
-	@apply transition-colors;
-}
diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte
index 742b9f0..e51cd78 100644
--- a/src/lib/components/Dropdown.svelte
+++ b/src/lib/components/Dropdown.svelte
@@ -14,11 +14,11 @@
 		<Menu class="w-5 h-5"></Menu>
 	</button>
 	{#if visible}
-		<button
+		<div
 			transition:slide
-			class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-neutral-200 dark:bg-neutral-900 rounded-lg origin-top right-0 absolute transition-all"
+			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"
 		>
 			<slot />
-		</button>
+		</div>
 	{/if}
 </div>
diff --git a/src/lib/components/DropdownButton.svelte b/src/lib/components/DropdownButton.svelte
index c5cb810..482ecbb 100644
--- a/src/lib/components/DropdownButton.svelte
+++ b/src/lib/components/DropdownButton.svelte
@@ -2,9 +2,6 @@
 	export let href = '';
 </script>
 
-<a
-	{href}
-	class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-neutral-300 hover:dark:bg-neutral-800"
->
+<a {href} class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-overlay0">
 	<slot />
 </a>
diff --git a/src/lib/components/Forms/RegisterForm.svelte b/src/lib/components/Forms/RegisterForm.svelte
index df3dd7b..022dd52 100644
--- a/src/lib/components/Forms/RegisterForm.svelte
+++ b/src/lib/components/Forms/RegisterForm.svelte
@@ -113,7 +113,7 @@
 						<ButtonText>Register</ButtonText>
 					</Button>
 				</div>
-				<p class="text-xs text-center text-neutral-500/50 dark:text-white/30">
+				<p class="text-xs text-center text-overlay1">
 					By registering an account you agree to the <br />
 					<a class="underline" href="/terms" data-sveltekit-reload>Terms of Service</a> and
 					<a class="underline" href="/privacy" data-sveltekit-reload>Privacy Policy</a>.
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 2c06651..6d6c6f0 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div
-	class="flex place-content-between px-4 my-2 w-full h-full rounded-xl transition-colors py-auto bg-neutral-200 dark:bg-neutral-900"
+	class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust"
 >
 	<div class="flex my-auto space-x-6">
 		<a
@@ -30,7 +30,7 @@
 		<Dropdown>
 			<div>
 				<button
-					class="flex px-3 py-1.5 space-x-1.5 w-full transition-all hover:bg-neutral-300 hover:dark:bg-neutral-800"
+					class="flex px-3 py-1.5 space-x-1.5 w-full transition-all hover:bg-overlay0"
 					on:click={() => {
 						$darkMode = !$darkMode;
 					}}
@@ -43,10 +43,7 @@
 					<p>Theme</p>
 				</button>
 			</div>
-			<DropdownButton>
-				<p class="my-auto">ShareX Profile</p>
-			</DropdownButton>
-			<DropdownButton>
+			<DropdownButton href="/settings">
 				<p class="my-auto">Settings</p>
 			</DropdownButton>
 			<DropdownButton href="/api/auth/logout">
diff --git a/src/lib/components/Inputs/Button.svelte b/src/lib/components/Inputs/Button.svelte
index 0c04d33..0685cfc 100644
--- a/src/lib/components/Inputs/Button.svelte
+++ b/src/lib/components/Inputs/Button.svelte
@@ -11,7 +11,7 @@
 	{disabled}
 >
 	<div
-		class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 bg-neutral-200 hover:border-neutral-500 hover:group-disabled/button:border-neutral-400 dark:border-neutral-700 dark:bg-neutral-900 hover:dark:border-neutral-500 hover:group-disabled/button:dark:border-neutral-700"
+		class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors hadow-md bg-crust border-overlay2"
 	>
 		<slot />
 	</div>
diff --git a/src/lib/components/Inputs/FormInput.svelte b/src/lib/components/Inputs/FormInput.svelte
index 211ef80..83547e1 100644
--- a/src/lib/components/Inputs/FormInput.svelte
+++ b/src/lib/components/Inputs/FormInput.svelte
@@ -7,14 +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 transition-colors bg-neutral-200 dark:bg-neutral-900">
-		<div
-			class="py-0.5 pr-1 border-r-2 transition-colors border-neutral-400 dark:border-neutral-700"
-		>
+	<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">
 			<slot />
 		</div>
 		<input
-			class="py-0.5 transition-colors bg-neutral-200 dark:bg-neutral-900 peer"
+			class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
 			type="username"
 			{name}
 			{id}
@@ -22,22 +20,20 @@
 			{required}
 			bind:value
 		/>
-		<div class="peer-invalid:flex hidden my-auto">
+		<div class="hidden my-auto peer-invalid:flex">
 			<CircleAlert />
 		</div>
-		<div class="peer-invalid:hidden my-auto">
+		<div class="my-auto peer-invalid:hidden">
 			<Check />
 		</div>
 	</div>
 {:else if type === 'email'}
-	<div class="flex p-2 space-x-1 rounded-lg transition-colors bg-neutral-200 dark:bg-neutral-900">
-		<div
-			class="py-0.5 pr-1 border-r-2 transition-colors border-neutral-400 dark:border-neutral-700"
-		>
+	<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">
 			<slot />
 		</div>
 		<input
-			class="py-0.5 transition-colors bg-neutral-200 dark:bg-neutral-900 peer"
+			class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
 			type="email"
 			{name}
 			{id}
@@ -45,22 +41,20 @@
 			{required}
 			bind:value
 		/>
-		<div class="peer-invalid:flex hidden my-auto">
+		<div class="hidden my-auto peer-invalid:flex">
 			<CircleAlert />
 		</div>
-		<div class="peer-invalid:hidden my-auto">
+		<div class="my-auto peer-invalid:hidden">
 			<Check />
 		</div>
 	</div>
 {:else if type === 'password'}
-	<div class="flex p-2 space-x-1 rounded-lg transition-colors bg-neutral-200 dark:bg-neutral-900">
-		<div
-			class="py-0.5 pr-1 border-r-2 transition-colors border-neutral-400 dark:border-neutral-700"
-		>
+	<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">
 			<slot />
 		</div>
 		<input
-			class="py-0.5 transition-colors bg-neutral-200 dark:bg-neutral-900 peer"
+			class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
 			type="password"
 			{name}
 			{id}
@@ -68,10 +62,10 @@
 			{required}
 			bind:value
 		/>
-		<div class="peer-invalid:flex hidden my-auto">
+		<div class="hidden my-auto peer-invalid:flex">
 			<CircleAlert />
 		</div>
-		<div class="peer-invalid:hidden my-auto">
+		<div class="my-auto peer-invalid:hidden">
 			<Check />
 		</div>
 	</div>
diff --git a/src/lib/components/Logo.svelte b/src/lib/components/Logo.svelte
index 9eed7a1..935e5c3 100644
--- a/src/lib/components/Logo.svelte
+++ b/src/lib/components/Logo.svelte
@@ -2,6 +2,7 @@
 	viewBox="0 0 1200 628"
 	version="1.1"
 	id="svg1"
+	class="transition-colors fill-text"
 	xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 	xmlns:
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/src/lib/components/ThemeHandler.svelte b/src/lib/components/ThemeHandler.svelte
index 56a870c..c443267 100644
--- a/src/lib/components/ThemeHandler.svelte
+++ b/src/lib/components/ThemeHandler.svelte
@@ -15,9 +15,11 @@
 			if ($darkMode) {
 				console.log('[ThemeHandler.svelte] Setting dark mode from store');
 				html.classList.add('dark');
+				html.classList.add('frappe');
 			} else {
 				console.log('[ThemeHandler.svelte] Setting light mode from store');
 				html.classList.remove('dark');
+				html.classList.remove('frappe');
 			}
 		});
 	}
@@ -31,9 +33,11 @@
 		if (darkMode) {
 			console.log('[ThemeHandler.svelte] Setting dark mode from localStorage');
 			html.classList.add('dark');
+			html.classList.add('frappe');
 		} else {
 			console.log('[ThemeHandler.svelte] Setting light mode from localStorage');
 			html.classList.remove('dark');
+			html.classList.remove('frappe');
 		}
 	</script>
 </svelte:head>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 9b8686e..66989e8 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -3,7 +3,7 @@
 	import Footer from '$lib/components/Footer.svelte';
 </script>
 
-<div class="w-full min-h-screen">
+<div class="my-2 w-full min-h-screen">
 	<div class="w-full h-12">
 		<Header></Header>
 	</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f16ca36..a9c4645 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
 	import '../app.css';
 
 	import { Toaster } from 'svelte-sonner';
+	import { CircleAlert, TriangleAlert, Info, Check, Loader } from 'lucide-svelte';
 
 	import { darkMode, user } from '$lib/stores.js';
 	import ThemeHandler from '$lib/components/ThemeHandler.svelte';
@@ -14,7 +15,25 @@
 
 <PageMeta title="cirro's file uploader" />
 <ThemeHandler />
-<Toaster theme={$darkMode ? 'dark' : 'light'} position={'bottom-center'} />
+<Toaster
+	position={'bottom-center'}
+	toastOptions={{
+		classes: {
+			toast: '!bg-crust !fill-text !border-crust',
+			title: '!text-text',
+			description: '!text-subtext0',
+			actionButton: 'bg-zinc-400',
+			cancelButton: 'bg-orange-400',
+			closeButton: 'bg-lime-400'
+		}
+	}}
+>
+	<Loader size="20" class="animate-spin text-text" slot="loading-icon" />
+	<Check size="20" class="text-text" slot="success-icon" />
+	<CircleAlert size="20" class="text-text" slot="error-icon" />
+	<Info size="20" class="text-text" slot="info-icon" />
+	<TriangleAlert size="20" class="text-text" slot="warning-icon" />
+</Toaster>
 
 <div class="container">
 	<slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 86b0b3b..fa028ac 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -30,9 +30,7 @@
 		<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-full">
 			<div class="flex flex-col space-y-1.5">
 				<div>
-					<div class="transition-colors fill-black dark:fill-white">
-						<Logo />
-					</div>
+					<Logo />
 					<p>Currently hosting <strong>0</strong> files.</p>
 					<p class="italic">The best file uploader <strong>ever!!!</strong></p>
 				</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 834ee43..2d45666 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,5 +6,9 @@ export default {
 		extend: {},
 		container: { center: true }
 	},
-	plugins: []
+	plugins: [
+		require('@catppuccin/tailwindcss')({
+			defaultFlavour: 'latte'
+		})
+	]
 };
diff --git a/yarn.lock b/yarn.lock
index 78ea5f7..8348597 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,6 +15,11 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
+"@catppuccin/tailwindcss@^0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@catppuccin/tailwindcss/-/tailwindcss-0.1.6.tgz#d97c491e1523ead83009e32d0a34c364c2a0ca5b"
+  integrity sha512-V+Y0AwZ5SSyvOVAcDl7Ng30xy+m82OKnEJ+9+kcZZ7lRyXuZrAb2GScdq9XR3v+ggt8qiZ/G4TvaC9cJ88AAXA==
+
 "@esbuild/aix-ppc64@0.19.12":
   version "0.19.12"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"