dshgfdshjagd

src/app.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200..1000&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -6,6 +8,11 @@ html {
 	@apply dark:bg-neutral-950;
 	@apply dark:text-neutral-200;
 	@apply transition-colors;
+
+	font-family: 'Nunito', sans-serif;
+	font-optical-sizing: auto;
+	font-weight: 400;
+	font-style: normal;
 }
 
 strong {

src/hooks.server.js

@@ -1,4 +1,4 @@
-import { redirect } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 import { getSession } from '$lib/server/database';
 import { COOKIE } from '$lib/config';
 
@@ -25,7 +25,9 @@ export async function handle({ event, resolve }) {
 		};
 	}
 
-	if (event.route.id.includes('(app)') && !user) return redirect(303, '/');
+	if (event.route.id) {
+		if (event.route.id.includes('(app)') && !user) return redirect(303, '/');
+	}
 
 	return await resolve(event);
 }

src/lib/components/Dropdown.svelte

@@ -9,12 +9,14 @@
 	}
 </script>
 
-<div class="relative w-fit text-sm">
+<div class="flex relative w-fit">
-	<button class="w-min" on:click={toggle}><Menu></Menu></button>
+	<button class="my-auto w-min" on:click={toggle}>
+		<Menu class="w-5 h-5"></Menu>
+	</button>
 	{#if visible}
 		<button
 			transition:slide
-			class="w-52 z-10 h-fit translate-y-12 py-2 bg-neutral-900 rounded-lg origin-top right-0 absolute"
+			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"
 		>
 			<slot />
 		</button>

src/lib/components/DropdownButton.svelte

@@ -2,6 +2,9 @@
 	export let href = '';
 </script>
 
-<a {href} class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-neutral-600">
+<a
+	{href}
+	class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-neutral-300 hover:dark:bg-neutral-800"
+>
 	<slot />
 </a>

src/lib/components/Header.svelte

@@ -1,24 +1,50 @@
 <script>
+	import { Sun, Moon } from 'lucide-svelte';
+
+	import { user, darkMode } from '$lib/stores';
+
 	import HeaderLink from '$lib/components/HeaderLink.svelte';
 	import Dropdown from '$lib/components/Dropdown.svelte';
 	import DropdownButton from '$lib/components/DropdownButton.svelte';
+	import Logo from '$lib/components/Logo.svelte';
 </script>
 
 <div
-	class="flex place-content-between px-4 w-full h-full rounded-xl transition-colors py-auto bg-neutral-200 dark:bg-neutral-900"
+	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"
 >
-	<div class="flex my-auto space-x-4">
+	<div class="flex my-auto space-x-6">
-		<p class="my-auto text-xl transition-all hover:scale-105 focus:scale-105 active:scale-95">
+		<a
-			File Uploader
+			href="/dashboard"
-		</p>
+			class="flex-none my-auto w-20 text-xl transition-all fill-black dark:fill-white hover:scale-105 focus:scale-105 active:scale-95"
-		<div class="flex my-auto space-x-2">
+		>
+			<Logo></Logo>
+		</a>
+		<div class="flex my-auto space-x-3">
 			<HeaderLink href="/dashboard">Dashboard</HeaderLink>
+			<HeaderLink href="/uploads">Uploads</HeaderLink>
+			<HeaderLink href="/admin">Admin</HeaderLink>
 		</div>
 	</div>
 	<div class="flex my-auto space-x-2">
+		<p class="font-bold">{$user?.username}</p>
 		<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"
+					on:click={() => {
+						$darkMode = !$darkMode;
+					}}
+				>
+					{#if $darkMode}
+						<Sun class="my-auto w-5 h-5" />
+					{:else}
+						<Moon class="my-auto w-5 h-5" />
+					{/if}
+					<p>Theme</p>
+				</button>
+			</div>
 			<DropdownButton>
-				<p class="my-auto">Uploads</p>
+				<p class="my-auto">ShareX Profile</p>
 			</DropdownButton>
 			<DropdownButton>
 				<p class="my-auto">Settings</p>

src/lib/components/Inputs/Button.svelte

@@ -11,13 +11,7 @@
 	{disabled}
 >
 	<div
-		class="flex space-x-2 rounded-lg border-b-2 p-2 transition-colors
+		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"
-        
-        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"
 	>
 		<slot />
 	</div>

src/routes/(app)/+layout.svelte

@@ -8,7 +8,7 @@
 		<Header></Header>
 	</div>
 
-	<div class="w-full min-h-[calc(100vh-4rem)] my-2">
+	<div class="w-full min-h-[calc(100vh-4.5rem)] my-2">
 		<slot />
 	</div>
 

src/routes/(app)/dashboard/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { user } from '$lib/stores';
+	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
 
 	export let data;
 

src/routes/+error.svelte

@@ -16,11 +16,9 @@
 		</div>
 		<div class="flex space-x-2">
 			<Button click={goBack}>
-				<Undo />
 				<p>Go Back</p>
 			</Button>
 			<Link style="button" href="/">
-				<Home />
 				<p>Go Home</p>
 			</Link>
 		</div>