fix: button themes

Author: hanaCasey

src/lib/components/LightSwitch.svelte

@@ -15,11 +15,11 @@
 	}
 </script>
 
-<div class="flex items-center gap-2">
-	<span class="text-xs text-surface-600-400 hidden sm:block">
+<div class="flex items-center gap-2.5 min-h-10 py-1">
+	<span class="text-xs text-surface-600-400 hidden sm:block shrink-0">
 		{checked ? 'Dark' : 'Light'}
 	</span>
-	<Switch {checked} {onCheckedChange}>
+	<Switch class="shrink-0" {checked} {onCheckedChange}>
 		<Switch.Control>
 			<Switch.Thumb />
 		</Switch.Control>

src/lib/components/ThemePicker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Menu, Portal } from '@skeletonlabs/skeleton-svelte';
+
 	const themes = [
 		{ value: 'lucid', label: 'Lucid' },
 		{ value: 'cerberus', label: 'Cerberus' },
@@ -31,7 +33,7 @@
 </script>
 
 <select
-	class="select text-sm preset-tonal-surface rounded-base px-2 py-1 cursor-pointer"
+	class="btn btn-sm preset-tonal-surface"
 	value={selected}
 	onchange={onChange}
 >

src/routes/+layout.svelte

@@ -69,7 +69,7 @@
 			<AppBar.Lead>
 				<a
 					href="{base}/"
-					class="flex items-center gap-2 rounded-container preset-tonal-surface hover:preset-filled-surface-100-900 px-1 py-0.5 -ml-1 shrink-0"
+					class="flex items-center gap-2 py-1 -ml-1 shrink-0 min-h-10"
 				>
 					<img
 						src="{base}/lucid_logo.svg"
@@ -83,7 +83,7 @@
 			</AppBar.Lead>
 			<AppBar.Headline />
 			<AppBar.Trail>
-				<div class="flex items-center gap-3">
+				<div class="flex items-center gap-2 sm:gap-3">
 					<ThemePicker />
 					<LightSwitch />
 				</div>