diff options
| author | David Hill <[email protected]> | 2026-02-17 20:09:42 +0000 |
|---|---|---|
| committer | David Hill <[email protected]> | 2026-02-17 20:10:16 +0000 |
| commit | 92912219dfa0ef51c88a329e04e0b69446328c2b (patch) | |
| tree | 9cf928b249c9e57b0a1f326a2ad3a6fb1790271b | |
| parent | bab3124e8b74343fb93a4ff543fb7f9ed1a6f3c3 (diff) | |
| download | opencode-92912219dfa0ef51c88a329e04e0b69446328c2b.tar.gz opencode-92912219dfa0ef51c88a329e04e0b69446328c2b.zip | |
tui: simplify prompt mode toggle icon colors via CSS and tighten message timeline padding
| -rw-r--r-- | packages/app/src/components/prompt-input.tsx | 18 | ||||
| -rw-r--r-- | packages/app/src/index.css | 20 | ||||
| -rw-r--r-- | packages/app/src/pages/session/message-timeline.tsx | 2 |
3 files changed, 23 insertions, 17 deletions
diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx index 628a7ad34..ca7cc0325 100644 --- a/packages/app/src/components/prompt-input.tsx +++ b/packages/app/src/components/prompt-input.tsx @@ -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" 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", - }} - /> + <Icon name="console" class="size-[18px]" /> </div> </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" 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", - }} - /> + <Icon name="prompt" class="size-[18px]" /> </div> </button> </div> diff --git a/packages/app/src/index.css b/packages/app/src/index.css index 4af87bca6..5c0e12c18 100644 --- a/packages/app/src/index.css +++ b/packages/app/src/index.css @@ -1 +1,21 @@ @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; +} diff --git a/packages/app/src/pages/session/message-timeline.tsx b/packages/app/src/pages/session/message-timeline.tsx index 53cf441d6..a8d22ccc8 100644 --- a/packages/app/src/pages/session/message-timeline.tsx +++ b/packages/app/src/pages/session/message-timeline.tsx @@ -165,7 +165,7 @@ export function MessageTimeline(props: { "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true, "w-full": 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, }} > |