From 17fe70ad71abd7bf59b78a65faa44a1702cd5128 Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdras@renan.dev>
Date: Mon, 15 Dec 2025 20:37:51 -0300
Subject: [PATCH] style(checklist): melhora layout do item de pergunta
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../tickets/ticket-checklist-card.tsx         | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/tickets/ticket-checklist-card.tsx b/src/components/tickets/ticket-checklist-card.tsx
index c6428ef..edbeb55 100644
--- a/src/components/tickets/ticket-checklist-card.tsx
+++ b/src/components/tickets/ticket-checklist-card.tsx
@@ -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>