salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: emphasize command palette button

Browse Source
This commit is contained in:
Shantur Rathore
2026-02-20 00:24:24 +00:00
parent 77103b7292
commit 0e5695a903
3 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/src/components/instance/instance-shell2.tsx
View File

@@ -625,7 +625,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
<div class="flex flex-wrap items-center justify-center gap-1">
<button
type="button"
class="connection-status-button px-2 py-0.5 text-xs"
class="connection-status-button command-palette-button px-2 py-0.5 text-xs"
onClick={handleCommandPaletteClick}
aria-label={t("instanceShell.commandPalette.openAriaLabel")}
style={{ flex: "0 0 auto", width: "auto" }}
@@ -721,7 +721,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
<div class="session-toolbar-center flex items-center justify-center gap-2 min-w-[160px]">
<button
type="button"
class="connection-status-button px-2 py-0.5 text-xs"
class="connection-status-button command-palette-button px-2 py-0.5 text-xs"
onClick={handleCommandPaletteClick}
aria-label={t("instanceShell.commandPalette.openAriaLabel")}
style={{ flex: "0 0 auto", width: "auto" }}

2
packages/ui/src/components/message-list-header.tsx
View File

@@ -51,7 +51,7 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
<div class="connection-status-shortcut-action">
<button
type="button"
class="connection-status-button"
class="connection-status-button command-palette-button"
onClick={props.onCommandPalette}
aria-label={t("messageListHeader.commandPalette.ariaLabel")}
>

11
packages/ui/src/styles/messaging/message-section.css
View File

@@ -130,6 +130,17 @@
color: var(--text-primary);
}
/* Make the command palette trigger stand out in the header. */
.connection-status-button.command-palette-button {
border-color: var(--accent-primary);
background-color: var(--surface-secondary);
}
.connection-status-button.command-palette-button:hover {
border-color: var(--accent-primary);
background-color: var(--surface-hover);
}
.connection-status-button:hover {
background-color: var(--surface-hover);
}