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 ?? []
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">
{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>
) : (
@ -332,10 +332,10 @@ export function TicketChecklistCard({
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 ? (
<div className="flex items-center gap-2">
<Input
@ -407,38 +407,42 @@ export function TicketChecklistCard({
}
}}
disabled={!canToggle || !actorId}
className="mt-2 flex flex-wrap gap-3"
className="flex flex-wrap items-center gap-4"
>
{options.map((option) => (
<label
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}
</label>
))}
</RadioGroup>
)}
<div className="mt-1 flex flex-wrap items-center gap-2">
<div className="flex flex-wrap items-center gap-1.5">
{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
</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
</Badge>
)}
{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
</Badge>
)}
{templateLabel ? (
<Badge variant="outline" className="rounded-full text-[11px]">
Template: {templateLabel}
<Badge variant="outline" className="rounded-full px-2 py-0.5 text-[10px] font-medium text-slate-500">
{templateLabel}
</Badge>
) : null}
</div>