esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(checklist): melhora layout do item de pergunta

Browse source 
- Opcoes de resposta como botoes com estilo pill
- Opcao selecionada em preto com texto branco
- Badges menores e mais compactos
- Icone ? com estilo cyan
- Melhor espacamento geral

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
esdrasrenan 2025-12-15 20:37:51 -03:00
parent 358e1256b9
commit 17fe70ad71
1 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/tickets/ticket-checklist-card.tsx
View file

@ -309,10 +309,10 @@ export function TicketChecklistCard({
const options = item.options ?? [] const options = item.options ?? []
return ( return (
<div key={item.id} className="flex items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2"> <div key={item.id} className="flex items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3">
<div className="flex min-w-0 flex-1 items-start gap-3"> <div className="flex min-w-0 flex-1 items-start gap-3">
{isQuestion ? ( {isQuestion ? (
<div className="mt-1 flex size-5 shrink-0 items-center justify-center rounded-full border border-slate-300 bg-slate-50 text-xs font-medium text-slate-600"> <div className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border border-cyan-300 bg-cyan-50 text-xs font-semibold text-cyan-600">
? ?
</div> </div>
) : ( ) : (
@ -332,10 +332,10 @@ export function TicketChecklistCard({
toast.error(error instanceof Error ? error.message : "Falha ao atualizar checklist.") toast.error(error instanceof Error ? error.message : "Falha ao atualizar checklist.")
} }
}} }}
className="mt-1" className="mt-0.5"
/> />
)} )}
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1 space-y-2">
{editingId === item.id && canEdit && !isResolved ? ( {editingId === item.id && canEdit && !isResolved ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Input <Input
@ -407,38 +407,42 @@ export function TicketChecklistCard({
} }
}} }}
disabled={!canToggle || !actorId} disabled={!canToggle || !actorId}
className="mt-2 flex flex-wrap gap-3" className="flex flex-wrap items-center gap-4"
> >
{options.map((option) => ( {options.map((option) => (
<label <label
key={option} key={option}
className="flex cursor-pointer items-center gap-1.5 text-sm text-slate-700" className={`flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-1.5 text-sm transition-colors ${
item.answer === option
? "border-neutral-900 bg-neutral-900 text-white"
: "border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50"
}`}
> >
<RadioGroupItem value={option} /> <RadioGroupItem value={option} className="sr-only" />
{option} {option}
</label> </label>
))} ))}
</RadioGroup> </RadioGroup>
)} )}
<div className="mt-1 flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-1.5">
{required ? ( {required ? (
<Badge variant="secondary" className="rounded-full text-[11px]"> <Badge variant="secondary" className="rounded-full px-2 py-0.5 text-[10px] font-medium">
Obrigatório Obrigatório
</Badge> </Badge>
) : ( ) : (
<Badge variant="outline" className="rounded-full text-[11px]"> <Badge variant="outline" className="rounded-full px-2 py-0.5 text-[10px] font-medium">
Opcional Opcional
</Badge> </Badge>
)} )}
{isQuestion && ( {isQuestion && (
<Badge variant="outline" className="rounded-full border-cyan-200 bg-cyan-50 text-[11px] text-cyan-700"> <Badge variant="outline" className="rounded-full border-cyan-200 bg-cyan-50 px-2 py-0.5 text-[10px] font-medium text-cyan-700">
Pergunta Pergunta
</Badge> </Badge>
)} )}
{templateLabel ? ( {templateLabel ? (
<Badge variant="outline" className="rounded-full text-[11px]"> <Badge variant="outline" className="rounded-full px-2 py-0.5 text-[10px] font-medium text-slate-500">
Template: {templateLabel} {templateLabel}
</Badge> </Badge>
) : null} ) : null}
</div> </div>