Optical optimizations for the keyboard modal

Dlurak · Jul 20, 2024 · 69a6343 · 69a6343
1 parent 8f74d5d
commit 69a6343
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/src/lib/components/layout/KeyboardModal/Key.svelte b/src/lib/components/layout/KeyboardModal/Key.svelte
@@ -22,7 +22,7 @@
 	export let isApple: boolean;
 </script>
 
-<kbd class="rounded-sm bg-zinc-300 px-1">
+<kbd class="rounded-sm bg-zinc-300 px-1 dark:bg-zinc-600">
 	{keyFmter({
 		key,
 		isApple,

diff --git a/src/lib/components/layout/KeyboardModal/KeyboardHelper.svelte b/src/lib/components/layout/KeyboardModal/KeyboardHelper.svelte
@@ -32,6 +32,7 @@
 	class="
 		h-fit min-h-48 min-w-96 max-w-[90%] rounded-md px-2 py-2 outline-none
 		backdrop:bg-black backdrop:opacity-50 backdrop:saturate-50
+		dark:bg-zinc-800 dark:text-white
 		print:hidden
 	"
 >

diff --git a/src/lib/components/layout/KeyboardModal/KeyboardShortcut.svelte b/src/lib/components/layout/KeyboardModal/KeyboardShortcut.svelte
@@ -12,7 +12,7 @@
 		<Store store={shortcut.description} />
 	</b>
 
-	<ul>
+	<ul class="grid grid-cols-2 gap-1">
 		{#each shortcut.keys as keys}
 			{@const all = [...keys.modifier, ...keys.keys]}