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

fix(ui): improve question tool contrast

Browse Source 
Make question tool prompt, labels, and the type pill use primary text color for readability in light mode, and bump the Q header line to text-sm.
This commit is contained in:
Shantur Rathore
2026-02-04 00:20:19 +00:00
parent df02b7cdca
commit a6b1f4ba19
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/ui/src/components/tool-call/question-block.tsx
View File

@@ -199,9 +199,9 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
const customChecked = () => customValue().length > 0 const customChecked = () => customValue().length > 0
return ( return (
<div class="rounded-md border border-base bg-surface-secondary p-3"> <div class="rounded-md border border-base bg-surface-secondary p-3 text-primary">
<div class="flex items-baseline justify-between gap-2"> <div class="flex items-baseline justify-between gap-2">
<div class="text-xs"> <div class="text-sm text-primary">
{t("toolCall.question.number", { number: i() + 1 })} <span class="font-semibold">{q?.header}</span> {t("toolCall.question.number", { number: i() + 1 })} <span class="font-semibold">{q?.header}</span>
</div> </div>
<Show when={multi()}> <Show when={multi()}>
@@ -209,7 +209,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
</Show> </Show>
</div> </div>
<div class="mt-1 text-sm font-medium">{q?.question}</div> <div class="mt-1 text-sm font-medium text-primary">{q?.question}</div>
<div class="mt-3 flex flex-col gap-1"> <div class="mt-3 flex flex-col gap-1">
<For each={q?.options ?? []}> <For each={q?.options ?? []}>
@@ -232,7 +232,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
onChange={() => toggleOption(i(), opt.label)} onChange={() => toggleOption(i(), opt.label)}
/> />
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-sm leading-tight">{opt.label}</div> <div class="text-sm leading-tight text-primary">{opt.label}</div>
<div class="text-xs text-muted leading-tight">{opt.description}</div> <div class="text-xs text-muted leading-tight">{opt.description}</div>
</div> </div>
</label> </label>
@@ -267,12 +267,12 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
toggleFromCustomInput(i(), input) toggleFromCustomInput(i(), input)
}} }}
/> />
<div class="flex flex-1 flex-col gap-2"> <div class="flex flex-1 flex-col gap-2">
<div class="text-sm leading-tight">{t("toolCall.question.custom.label")}</div> <div class="text-sm leading-tight text-primary">{t("toolCall.question.custom.label")}</div>
<input <input
class="w-full rounded-md border border-base bg-surface-base px-2 py-1 text-sm text-primary" class="w-full rounded-md border border-base bg-surface-base px-2 py-1 text-sm text-primary"
type="text" type="text"
placeholder={t("toolCall.question.custom.placeholder")} placeholder={t("toolCall.question.custom.placeholder")}
disabled={!props.active() || props.submitting()} disabled={!props.active() || props.submitting()}
value={customValue()} value={customValue()}
onFocus={(e) => { onFocus={(e) => {

1
packages/ui/src/styles/messaging/tool-call.css
View File

@@ -322,6 +322,7 @@
border-radius: 0.375rem; border-radius: 0.375rem;
border: 1px solid var(--tool-call-border-color, var(--border-base)); border: 1px solid var(--tool-call-border-color, var(--border-base));
background-color: var(--surface-code); background-color: var(--surface-code);
color: var(--text-primary);
} }
.tool-call-permission-title code { .tool-call-permission-title code {