Improve style and accessibility in the settings modal (#206)

src/lib/components/SettingsModal.svelte

@@ -57,7 +57,7 @@
 		</p>
 		<button
 			type="submit"
-			class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-colors hover:ring"
+			class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
 		>
 			Apply
 		</button>

src/lib/components/Switch.svelte

@@ -5,7 +5,7 @@
 
 <input bind:checked type="checkbox" {name} class="peer pointer-events-none absolute opacity-0" />
 <div
-	class="relative inline-flex h-5 w-9 items-center rounded-full bg-gray-300 p-1 shadow-inner transition-all peer-checked:bg-black hover:bg-gray-400  peer-checked:[&>div]:translate-x-3.5"
+	class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full bg-gray-300 p-1 shadow-inner ring-gray-400 transition-all peer-checked:bg-black peer-focus-visible:ring peer-focus-visible:ring-offset-1 hover:bg-gray-400 peer-checked:[&>div]:translate-x-3.5"
 >
 	<div class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-all" />
 </div>