diff options
| author | Adam <[email protected]> | 2026-02-17 07:34:02 -0600 |
|---|---|---|
| committer | GitHub <[email protected]> | 2026-02-17 07:34:02 -0600 |
| commit | 277c68d8e5f95b57d44e00ea180c359ada56bd3c (patch) | |
| tree | c0337894919ad136360206b99a6c77683ceef28e /packages/app/src | |
| parent | 10985671ad9553e7ac594ede30981166f69ba3c5 (diff) | |
| download | opencode-277c68d8e5f95b57d44e00ea180c359ada56bd3c.tar.gz opencode-277c68d8e5f95b57d44e00ea180c359ada56bd3c.zip | |
chore: app polish (#13976)
Co-authored-by: David Hill <[email protected]>
Diffstat (limited to 'packages/app/src')
| -rw-r--r-- | packages/app/src/components/prompt-input.tsx | 48 | ||||
| -rw-r--r-- | packages/app/src/components/titlebar.tsx | 2 |
2 files changed, 30 insertions, 20 deletions
diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx index 7813e01cd..54b9286eb 100644 --- a/packages/app/src/components/prompt-input.tsx +++ b/packages/app/src/components/prompt-input.tsx @@ -1334,7 +1334,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => { <div class="shrink-0"> <div data-component="prompt-mode-toggle" - class="relative h-8 w-[68px] rounded-[4px] bg-surface-inset-base shadow-[var(--shadow-xs-border-base)] p-0 flex items-center gap-1 overflow-visible" + class="relative h-6 w-[68px] rounded-[4px] bg-surface-inset-base border border-[0.5px] border-border-weak-base p-0 flex items-center gap-1 overflow-visible" > <div class="absolute inset-y-0 left-0 w-[calc((100%-4px)/2)] rounded-[4px] bg-surface-raised-stronger-non-alpha shadow-[var(--shadow-xs-border)] transition-transform duration-200 ease-out will-change-transform" @@ -1344,33 +1344,43 @@ export const PromptInput: Component<PromptInputProps> = (props) => { /> <button type="button" - class="relative z-10 flex-1 h-full flex items-center justify-center rounded-[4px]" + class="relative z-10 flex-1 h-full p-0.5 flex items-center justify-center" aria-pressed={store.mode === "shell"} onClick={() => setMode("shell")} > - <Icon - name="console" - size="normal" - classList={{ - "text-icon-strong-base": store.mode === "shell", - "text-icon-weak": store.mode !== "shell", - }} - /> + <div + class="w-full h-full flex items-center justify-center rounded-[2px] transition-colors hover:bg-surface-inset-base" + classList={{ "hover:bg-transparent": store.mode === "shell" }} + > + <Icon + name="console" + class="size-[18px]" + classList={{ + "text-icon-strong-base": store.mode === "shell", + "text-icon-weak": store.mode !== "shell", + }} + /> + </div> </button> <button type="button" - class="relative z-10 flex-1 h-full flex items-center justify-center rounded-[4px]" + class="relative z-10 flex-1 h-full p-0.5 flex items-center justify-center" aria-pressed={store.mode === "normal"} onClick={() => setMode("normal")} > - <Icon - name="prompt" - size="normal" - classList={{ - "text-icon-interactive-base": store.mode === "normal", - "text-icon-weak": store.mode !== "normal", - }} - /> + <div + class="w-full h-full flex items-center justify-center rounded-[2px] transition-colors hover:bg-surface-inset-base" + classList={{ "hover:bg-transparent": store.mode === "normal" }} + > + <Icon + name="prompt" + class="size-[18px]" + classList={{ + "text-icon-interactive-base": store.mode === "normal", + "text-icon-weak": store.mode !== "normal", + }} + /> + </div> </button> </div> </div> diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx index e10fbe3b3..262b3e073 100644 --- a/packages/app/src/components/titlebar.tsx +++ b/packages/app/src/components/titlebar.tsx @@ -278,7 +278,7 @@ export function Titlebar() { }} onMouseDown={drag} > - <div id="opencode-titlebar-right" class="flex items-center gap-3 shrink-0 justify-end" /> + <div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" /> <Show when={windows()}> <div class="w-6 shrink-0" /> <div data-tauri-decorum-tb class="flex flex-row" /> |