style(notes): polimento visual nas tarefas e modal de detalhes

Ícone de tarefa concluída em card e detalhes simplificado para
RiCheckLine verde sem caixa. Checkbox no modal de edição usa bg/border
success com texto success-foreground (claro no light, escuro no dark).
Footer do modal de detalhes reordenado: Cancelar à esquerda, Alterar
primário à direita.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-04-20 19:23:36 +00:00
parent c41fafc319
commit cbc17c8513
22 changed files with 52 additions and 66 deletions

View File

@@ -97,15 +97,11 @@ export function NoteCard({
<div className="min-h-0 flex-1 space-y-2 overflow-hidden">
{sortedTasks.slice(0, 5).map((task) => (
<div key={task.id} className="flex items-start gap-2 text-sm">
<div
className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border ${
task.completed
? "bg-success border-success"
: "border-input"
}`}
>
{task.completed && (
<RiCheckLine className="h-3 w-3 text-background" />
<div className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center">
{task.completed ? (
<RiCheckLine className="h-4 w-4 text-success" />
) : (
<div className="h-4 w-4 rounded-sm border border-input" />
)}
</div>
<span

View File

@@ -65,15 +65,11 @@ export function NoteDetailsDialog({
key={task.id}
className="flex items-center gap-3 rounded-md px-3 py-1.5"
>
<div
className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border ${
task.completed
? "bg-success border-success"
: "border-input"
}`}
>
{task.completed && (
<RiCheckLine className="h-4 w-4 text-primary-foreground" />
<div className="flex h-4 w-4 shrink-0 items-center justify-center">
{task.completed ? (
<RiCheckLine className="h-4 w-4 text-success" />
) : (
<div className="h-4 w-4 rounded-sm border border-input" />
)}
</div>
<span
@@ -95,23 +91,22 @@ export function NoteDetailsDialog({
)}
<DialogFooter>
<DialogClose asChild>
<Button type="button" variant="outline">
Cancelar
</Button>
</DialogClose>
{onEdit && (
<Button
type="button"
variant="outline"
onClick={() => {
onOpenChange(false);
onEdit(note);
}}
>
Editar
Alterar
</Button>
)}
<DialogClose asChild>
<Button type="button" variant="outline">
Fechar
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>

View File

@@ -94,13 +94,14 @@ export function NoteDialog({
}
}, [dialogOpen, note, resetForm]);
const dialogTitle = mode === "create" ? "Nova anotação" : "Editar anotação";
const dialogTitle =
mode === "create" ? "Nova anotação" : "Atualizar anotação";
const description =
mode === "create"
? "Crie uma nota simples ou uma lista de tarefas."
: note?.type === "tarefa"
? "Editando lista de tarefas."
: "Editando nota.";
? "Atualize sua lista de tarefas"
: "Atualize sua nota";
const submitLabel = mode === "create" ? "Salvar" : "Atualizar";
const titleCount = formState.title.length;
@@ -361,7 +362,6 @@ export function NoteDialog({
className="shrink-0 gap-1.5"
>
<RiAddCircleFill className="h-4 w-4" />
Adicionar
</Button>
</div>
</div>
@@ -374,7 +374,7 @@ export function NoteDialog({
className="flex items-center gap-3 rounded-md px-3 py-1.5 hover:bg-muted/50"
>
<Checkbox
className="data-[state=checked]:bg-success data-[state=checked]:border-success"
className="data-[state=checked]:bg-success! data-[state=checked]:border-success! data-[state=checked]:text-success-foreground!"
checked={task.completed}
onCheckedChange={() => handleToggleTask(task.id)}
disabled={isPending}