Fix contrast issues

frontend/src/lib/components/Avatar.svelte

@@ -12,7 +12,7 @@
 
 <div class="dropdown dropdown-bottom dropdown-end" tabindex="0" role="button">
 	<div class="avatar placeholder">
-		<div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
+		<div class="bg-neutral rounded-full text-neutral-200 w-10 ml-4">
 			{#if user.profile_pic}
 				<img src={user.profile_pic} alt="User Profile" />
 			{:else}
@@ -24,7 +24,7 @@
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<ul
 		tabindex="0"
-		class="dropdown-content z-[1] menu p-2 shadow bg-primary-content mt-2 rounded-box w-52"
+		class="dropdown-content z-[1] text-neutral-200 menu p-2 shadow bg-neutral mt-2 rounded-box w-52"
 	>
 		<!-- svelte-ignore a11y-missing-attribute -->
 		<!-- svelte-ignore a11y-missing-attribute -->

frontend/src/lib/components/CollectionCard.svelte

@@ -117,7 +117,7 @@
 				</button>
 			{:else}
 				<div class="dropdown dropdown-end">
-					<div tabindex="0" role="button" class="btn btn-neutral">
+					<div tabindex="0" role="button" class="btn btn-neutral-200">
 						<DotsHorizontal class="w-6 h-6" />
 					</div>
 					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->

frontend/src/lib/components/Navbar.svelte

@@ -11,6 +11,7 @@
 	import Flower from '~icons/mdi/flower';
 	import Water from '~icons/mdi/water';
 	import AboutModal from './AboutModal.svelte';
+	import AccountMultiple from '~icons/mdi/account-multiple';
 	import Avatar from './Avatar.svelte';
 	import PaletteOutline from '~icons/mdi/palette-outline';
 	import { page } from '$app/stores';
@@ -82,6 +83,9 @@
 					<li>
 						<button on:click={() => goto('/map')}>Map</button>
 					</li>
+					<li>
+						<button on:click={() => goto('/users')}>Users</button>
+					</li>
 				{/if}
 
 				{#if !data.user}
@@ -134,6 +138,11 @@
 				<li>
 					<button class="btn btn-neutral" on:click={() => goto('/map')}>Map</button>
 				</li>
+				<li>
+					<button class="btn btn-neutral" on:click={() => goto('/users')}
+						><AccountMultiple /></button
+					>
+				</li>
 			{/if}
 
 			{#if !data.user}

frontend/src/routes/+error.svelte

@@ -4,21 +4,20 @@
 	import Lost from '$lib/assets/undraw_lost.svg';
 </script>
 
-<h1>{$page.status}: {$page.error?.message}</h1>
-
 {#if $page.status === 404}
 	<div
 		class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8"
 	>
 		<div class="mx-auto max-w-md text-center">
 			<img src={Lost} alt="Lost in the forest" />
-			<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+			<h1 class="text-center text-5xl font-extrabold mt-2">
+				{$page.status}: {$page.error?.message}
+			</h1>
+			<h1 class="mt-4 text-xl font-bold tracking-tight text-foreground">
 				Oops, looks like you've wandered off the beaten path.
 			</h1>
-			<p class="mt-4 text-muted-foreground">
+
-				We couldn't find the page you were looking for. Don't worry, we can help you find your way
+			<p class="mt-4 text-muted-foreground">We couldn't find the page you were looking for.</p>
-				back.ry, we can
-			</p>
 			<div class="mt-6 flex flex-col items-center gap-4 sm:flex-row">
 				<button class="btn btn-neutral" on:click={() => goto('/')}>Go to Homepage</button>
 			</div>

frontend/tailwind.config.js

@@ -29,7 +29,7 @@ export default {
 					'accent-content': '#f2eaea',
 
 					neutral: '#2b2a2a',
-					'neutral-focus': '#1c1b1b',
+					'neutral-focus': '#272525',
 					'neutral-content': '#e9e7e7',
 
 					'base-100': '#121212', // Dark background