From 69a634341c67212f6bf8bee635872510f931ed14 Mon Sep 17 00:00:00 2001
From: Dlurak <84224239+Dlurak@users.noreply.github.com>
Date: Sat, 20 Jul 2024 23:15:25 +0200
Subject: [PATCH] Optical optimizations for the keyboard modal

---
 src/lib/components/layout/KeyboardModal/Key.svelte              | 2 +-
 src/lib/components/layout/KeyboardModal/KeyboardHelper.svelte   | 1 +
 src/lib/components/layout/KeyboardModal/KeyboardShortcut.svelte | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/layout/KeyboardModal/Key.svelte b/src/lib/components/layout/KeyboardModal/Key.svelte
index 5e9ce4c..889b05f 100644
--- 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
index cc51533..9543e36 100644
--- 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
index 270edd4..7a76c5f 100644
--- 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]}