Imporved design

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

Author: benjaminstrasser

src/components/ui/theme-selector/index.ts

@@ -0,0 +1 @@
+export { default as ThemeSelector } from './theme-selector.svelte'

src/components/ui/theme-selector/theme-selector.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import Sun from 'lucide-svelte/icons/sun'
+	import Moon from 'lucide-svelte/icons/moon'
+	import Computer from 'lucide-svelte/icons/computer'
+
+	import { ModeWatcher, mode, setMode } from 'mode-watcher'
+	let currentMode: 'dark' | 'light' | 'system' = $mode || 'system'
+
+	$: {
+		setMode(currentMode)
+	}
+</script>
+
+<ModeWatcher />
+
+<div class="inline-flex w-auto items-center rounded-full border border-primary">
+	<input
+		type="radio"
+		id="system"
+		name="mode"
+		class="hidden"
+		value={'system'}
+		bind:group={currentMode}
+	/>
+	<label
+		for="system"
+		class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full {currentMode ===
+		'system'
+			? 'selected'
+			: ''}"
+	>
+		<Computer class="h-[1.2rem] w-[1.2rem]" />
+	</label>
+
+	<input
+		type="radio"
+		id="light"
+		name="mode"
+		class="hidden"
+		value={'light'}
+		bind:group={currentMode}
+	/>
+	<label
+		for="light"
+		class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full {currentMode ===
+		'light'
+			? 'selected'
+			: ''}"
+	>
+		<Sun class="h-[1.2rem] w-[1.2rem]" />
+	</label>
+
+	<input
+		type="radio"
+		id="dark"
+		name="mode"
+		class="hidden"
+		value={'dark'}
+		bind:group={currentMode}
+	/>
+	<label
+		for="dark"
+		class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full {currentMode ===
+		'dark'
+			? 'selected'
+			: ''}"
+	>
+		<Moon class="h-[1.2rem] w-[1.2rem]" />
+	</label>
+</div>
+
+<!--
+    This is obviously not a sound implementation of the selected attribute, but I do not get it to work so this is fine until I get it to work.
+-->
+<style lang="pcss">
+	.selected {
+		@apply border border-primary;
+	}
+</style>

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

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import Check from 'lucide-svelte/icons/check'
+
+	import { ThemeSelector } from '$components/ui/theme-selector'
 </script>
 
 <div class="flex h-screen">
@@ -13,18 +15,18 @@
 
 		<!-- Middle Section -->
 		<div
-			class="flex flex-grow flex-col items-start justify-center space-y-4 p-6 text-2xl font-bold"
+			class="flex flex-grow flex-col items-start justify-center space-y-4 p-6 text-2xl font-semibold"
 		>
 			<div class="flex items-center">
-				<span class="mr-2 rounded-full bg-background p-1"><Check /></span>
+				<span class="mr-2.5 rounded-full bg-background p-1.5"><Check strokeWidth={1} /></span>
 				<span>Efficiently translate your content</span>
 			</div>
 			<div class="flex items-center">
-				<span class="mr-2 rounded-full bg-background p-1"><Check /></span>
+				<span class="mr-2.5 rounded-full bg-background p-1.5"><Check strokeWidth={1} /></span>
 				<span>Open source and self hosting</span>
 			</div>
 			<div class="flex items-center">
-				<span class="mr-2 rounded-full bg-background p-1"><Check /></span>
+				<span class="mr-2.5 rounded-full bg-background p-1.5"><Check strokeWidth={1} /></span>
 				<span>Seamless AI-Autocompletion integrations</span>
 			</div>
 		</div>
@@ -36,6 +38,9 @@
 				<p>Not for everyone, but for most.</p>
 			</div>
 		</div>
+		<div class="p-6">
+			<ThemeSelector />
+		</div>
 	</div>
 
 	<div class="my-auto w-1/2"><slot></slot></div>

src/routes/+layout.svelte

@@ -1,29 +1,9 @@
 <script>
 	import '../app.pcss'
-	import { ModeWatcher } from 'mode-watcher'
-
-	import Sun from 'lucide-svelte/icons/sun'
-	import Moon from 'lucide-svelte/icons/moon'
-
-	import { toggleMode } from 'mode-watcher'
-	import { Button } from '$components/ui/button/index'
-
 	import { Toaster } from '$components/ui/sonner'
 </script>
 
 <main class="h-screen w-screen">
-	<ModeWatcher />
-
-	<Button on:click={toggleMode} variant="outline" size="icon">
-		<Sun
-			class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-		/>
-		<Moon
-			class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-		/>
-		<span class="sr-only">Toggle theme</span>
-	</Button>
-
 	<slot></slot>
 
 	<Toaster />