minor about page improvements

website/src/lib/components/ModeSwitch.svelte

@@ -1,34 +1,24 @@
 <script lang="ts">
-	import * as Popover from '$lib/components/ui/popover';
 	import { Button } from '$lib/components/ui/button';
 	import { Moon, Sun } from 'lucide-svelte';
-	import { mode, resetMode, setMode, systemPrefersMode } from 'mode-watcher';
+	import { mode, setMode, systemPrefersMode } from 'mode-watcher';
 	import { _ } from 'svelte-i18n';
 
 	export let size = '20';
-	let open = false;
 
 	$: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
 </script>
 
-<Popover.Root bind:open>
-	<Popover.Trigger {...$$restProps}>
-		{#if selectedMode === 'light'}
-			<Sun {size} class="mr-1" />
-		{:else}
-			<Moon {size} class="mr-1" />
-		{/if}
-	</Popover.Trigger>
-	<Popover.Content class=" w-fit flex flex-col p-2">
-		{#each ['light', 'dark'] as m}
-			<Button
-				variant="ghost"
-				class="h-8 justify-start"
-				on:click={() => {
-					setMode(m);
-					open = false;
-				}}>{$_(`menu.${m}`)}</Button
-			>
-		{/each}
-	</Popover.Content>
-</Popover.Root>
+<Button
+	variant="ghost"
+	class="h-8 px-1.5 {$$props.class ?? ''}"
+	on:click={() => {
+		setMode(selectedMode === 'light' ? 'dark' : 'light');
+	}}
+>
+	{#if selectedMode === 'light'}
+		<Sun {size} />
+	{:else}
+		<Moon {size} />
+	{/if}
+</Button>