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

fix(ui): repair question tool styling

Browse Source 
Use token-backed surface/background classes for the question tool cards and ensure radio/checkbox inputs use accent-color so the view renders correctly in both light and dark themes.
This commit is contained in:
Shantur Rathore
2026-02-04 00:14:50 +00:00
parent 06b0d03c31
commit df02b7cdca
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -199,7 +199,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
const customChecked = () => customValue().length > 0 const customChecked = () => customValue().length > 0
return ( return (
<div class="rounded-md border border-base/60 bg-surface/30 p-3"> <div class="rounded-md border border-base bg-surface-secondary p-3">
<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-xs">
{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>
@@ -226,6 +226,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
}} }}
type={inputType()} type={inputType()}
name={groupName()} name={groupName()}
class="mt-0.5 accent-[var(--accent-primary)]"
checked={checked()} checked={checked()}
disabled={!props.active() || props.submitting()} disabled={!props.active() || props.submitting()}
onChange={() => toggleOption(i(), opt.label)} onChange={() => toggleOption(i(), opt.label)}
@@ -249,6 +250,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
}} }}
type={inputType()} type={inputType()}
name={groupName()} name={groupName()}
class="mt-0.5 accent-[var(--accent-primary)]"
checked={customChecked()} checked={customChecked()}
disabled={!props.active() || props.submitting()} disabled={!props.active() || props.submitting()}
onChange={(e) => { onChange={(e) => {
@@ -265,14 +267,14 @@ 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">{t("toolCall.question.custom.label")}</div>
<input <input
class="w-full rounded-md border border-base/50 bg-surface px-2 py-1 text-sm" 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) => {
if (!props.active()) return if (!props.active()) return
// Keep the radio/checkbox selected while editing. // Keep the radio/checkbox selected while editing.