sandvich
/
opencode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tui: simplify prompt mode toggle icon colors via CSS and tighten message timeline padding

pull/13453/head
David Hill 2026-02-17 20:09:42 +00:00
parent bab3124e8b
commit 92912219df
3 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/app/src/components/prompt-input.tsx
View File

@ -1361,14 +1361,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
class="w-full h-full flex items-center justify-center rounded-[2px] transition-colors hover:bg-surface-inset-base" 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" }} classList={{ "hover:bg-transparent": store.mode === "shell" }}
> >
<Icon <Icon name="console" class="size-[18px]" />
name="console"
class="size-[18px]"
classList={{
"text-icon-strong-base": store.mode === "shell",
"text-icon-weak": store.mode !== "shell",
}}
/>
</div> </div>
</button> </button>
<button <button
@ -1381,14 +1374,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
class="w-full h-full flex items-center justify-center rounded-[2px] transition-colors hover:bg-surface-inset-base" 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" }} classList={{ "hover:bg-transparent": store.mode === "normal" }}
> >
<Icon <Icon name="prompt" class="size-[18px]" />
name="prompt"
class="size-[18px]"
classList={{
"text-icon-interactive-base": store.mode === "normal",
"text-icon-weak": store.mode !== "normal",
}}
/>
</div> </div>
</button> </button>
</div> </div>

20
packages/app/src/index.css
View File

@ -1 +1,21 @@
@import "@opencode-ai/ui/styles/tailwind"; @import "@opencode-ai/ui/styles/tailwind";
[data-component="prompt-mode-toggle"] [data-slot="icon-svg"] {
color: var(--icon-base);
}
[data-component="prompt-mode-toggle"] [data-slot="icon-svg"] * {
color: inherit;
}
[data-component="prompt-mode-toggle"] button[aria-pressed="true"] [data-slot="icon-svg"] {
color: var(--icon-strong-base);
}
[data-component="prompt-mode-toggle"] [data-slot="icon-svg"] [stroke]:not([stroke="none"]) {
stroke: currentColor;
}
[data-component="prompt-mode-toggle"] [data-slot="icon-svg"] [fill]:not([fill="none"]) {
fill: currentColor;
}

2
packages/app/src/pages/session/message-timeline.tsx
View File

@ -165,7 +165,7 @@ export function MessageTimeline(props: {
"sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true, "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
"w-full": true, "w-full": true,
"pb-4": true, "pb-4": true,
"pl-2 pr-4 md:pl-4 md:pr-6": true, "pl-2 pr-3 md:pl-4 md:pr-3": true,
"md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered, "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
}} }}
> >