gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-25 02:26:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve CommandPalette style and focus outline

Browse Source 
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
This commit is contained in:
idonahue 2023-04-20 16:42:51 +02:00
parent 19212e5bbf
commit 9459a28486
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/CommandPalette/CommandPalette.svelte
View File

@ -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;