From 9459a284867f17a69474d411d80f9b3d7aa397d5 Mon Sep 17 00:00:00 2001
From: idonahue <donahue.ian@gmail.com>
Date: Thu, 20 Apr 2023 16:42:51 +0200
Subject: [PATCH] Improve CommandPalette style and focus outline

Updated the styles in CommandPalette to enhance user experience. The changes include making the command title font medium, removing the default focus outline for the input field, and adding a custom box-shadow for the input focus state. Additionally, adjusted the section header color for better visibility.

Changes:
- Set command title font to medium
- Remove default focus outline in the input field
- Apply custom box-shadow for the input focus state
- Update section header text color
---
 .../components/CommandPalette/CommandPalette.svelte   | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/CommandPalette/CommandPalette.svelte b/src/lib/components/CommandPalette/CommandPalette.svelte
index 954ad5b37..e890bc307 100644
--- a/src/lib/components/CommandPalette/CommandPalette.svelte
+++ b/src/lib/components/CommandPalette/CommandPalette.svelte
@@ -190,7 +190,7 @@
 										class="text-color-500 flex w-full items-center gap-2 rounded-lg p-2 px-2  outline-none"
 									>
 										<svelte:component this={command.icon} class="icon h-5 w-5 text-zinc-500 " />
-										<span class="quick-command flex-1 text-left">{command.title}</span>
+										<span class="quick-command flex-1 text-left font-medium">{command.title}</span>
 										{#if command.hotkey}
 											{#each command.hotkey.split('+') as key}
 												<span class="quick-command-key">{key}</span>
@@ -216,9 +216,16 @@
 	}
 	.command-palette-input-field {
 		@apply flex-1 border-0 bg-transparent p-2 outline-none focus:outline-none active:outline-none;
+		outline: none;
+	}
+	.command-palette-input-field:focus {
+		outline: 0;
+		outline-offset: 0;
+		box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(37, 99, 235, 0) 0px 0px 0px 2px,
+			rgba(0, 0, 0, 0) 0px 0px 0px 0px;
 	}
 	.command-palette-section-header {
-		@apply mx-2 mb-2 mt-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300;
+		@apply mx-2 mb-2 mt-2 cursor-default select-none pt-2 text-sm font-semibold text-zinc-400;
 	}
 	.quick-command-key {
 		@apply rounded-sm border border-[#3A393F] bg-[#343338] px-[3px] font-mono text-[11px] shadow;