mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-09 11:01:45 +00:00
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:
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user