feat(v1.4.0): design system semântico, correções de revalidação e melhorias de UX
- Adicionar tokens semânticos de estado (success, warning, info) no globals.css - Migrar ~60+ componentes de cores hardcoded do Tailwind para tokens semânticos - Unificar 3 arrays duplicados de cores de categorias em importação única - Corrigir widgets de boleto/fatura que não atualizavam após pagamento (actions de fatura e antecipação não invalidavam cache do dashboard) - Corrigir scroll em listas Popover+Command (modal prop) - Adicionar link "detalhes" no card de orçamento para página da categoria - Adicionar indicadores de tendência coloridos nos cards de métricas - Estender cores de chart de 6 para 10 - Normalizar dark mode e remover tokens não utilizados Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
@@ -365,7 +365,7 @@ export function AnticipateInstallmentsDialog({
|
||||
{Number(formState.discount) > 0 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<dt className="text-muted-foreground">Desconto</dt>
|
||||
<dd className="font-medium tabular-nums text-green-600">
|
||||
<dd className="font-medium tabular-nums text-success">
|
||||
-{" "}
|
||||
<MoneyValues
|
||||
amount={Number(formState.discount)}
|
||||
|
||||
@@ -49,9 +49,9 @@ export function CategoriaSelectContent({
|
||||
|
||||
export function TransactionTypeSelectContent({ label }: { label: string }) {
|
||||
const colorMap: Record<string, string> = {
|
||||
Receita: "bg-emerald-600 dark:bg-emerald-400",
|
||||
Despesa: "bg-red-600 dark:bg-red-400",
|
||||
Transferência: "bg-blue-600 dark:bg-blue-400",
|
||||
Receita: "bg-success",
|
||||
Despesa: "bg-destructive",
|
||||
Transferência: "bg-info",
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -92,7 +92,7 @@ export function AnticipationCard({
|
||||
{Number(anticipation.discount) > 0 && (
|
||||
<div>
|
||||
<dt className="text-muted-foreground">Desconto</dt>
|
||||
<dd className="mt-1 font-medium tabular-nums text-green-600">
|
||||
<dd className="mt-1 font-medium tabular-nums text-success">
|
||||
- <MoneyValues amount={Number(anticipation.discount)} />
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
@@ -67,7 +67,7 @@ export function EstabelecimentoInput({
|
||||
}, [estabelecimentos, searchValue]);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<Popover open={open} onOpenChange={setOpen} modal>
|
||||
<PopoverTrigger asChild>
|
||||
<div className="relative">
|
||||
<Input
|
||||
@@ -112,7 +112,7 @@ export function EstabelecimentoInput({
|
||||
className={cn(
|
||||
"size-4 shrink-0",
|
||||
value === item
|
||||
? "opacity-100 text-green-500"
|
||||
? "opacity-100 text-success"
|
||||
: "opacity-5",
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -30,7 +30,7 @@ export function InstallmentTimeline({
|
||||
{/* Linha de conexão */}
|
||||
<div className="absolute left-0 right-0 top-6 h-0.5 bg-border">
|
||||
<div
|
||||
className="h-full bg-green-600 transition-all duration-300"
|
||||
className="h-full bg-success transition-all duration-300"
|
||||
style={{
|
||||
width: `${
|
||||
((currentInstallment - 1) / (totalInstallments - 1)) * 100
|
||||
@@ -41,7 +41,7 @@ export function InstallmentTimeline({
|
||||
|
||||
{/* Ponto 1: Data de Compra */}
|
||||
<div className="relative z-10 flex flex-col items-center gap-2">
|
||||
<div className="flex size-4 items-center justify-center rounded-full border-2 border-green-600 bg-green-600 shadow-sm">
|
||||
<div className="flex size-4 items-center justify-center rounded-full border-2 border-success bg-success shadow-sm">
|
||||
<RiCheckLine className="size-5 text-white" />
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
@@ -57,7 +57,7 @@ export function InstallmentTimeline({
|
||||
{/* Ponto 2: Parcela Atual */}
|
||||
<div className="relative z-10 flex flex-col items-center gap-2">
|
||||
<div
|
||||
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-orange-600 bg-orange-600`}
|
||||
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-warning bg-warning`}
|
||||
>
|
||||
<RiArrowDownFill className="size-5 text-white" />
|
||||
</div>
|
||||
@@ -74,7 +74,7 @@ export function InstallmentTimeline({
|
||||
{/* Ponto 3: Última Parcela */}
|
||||
<div className="relative z-10 flex flex-col items-center gap-2">
|
||||
<div
|
||||
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-green-600 bg-green-600`}
|
||||
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-success bg-success`}
|
||||
>
|
||||
<RiCheckLine className="size-5 text-white" />
|
||||
</div>
|
||||
|
||||
@@ -388,7 +388,11 @@ export function LancamentosFilters({
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Categoria</label>
|
||||
<Popover open={categoriaOpen} onOpenChange={setCategoriaOpen}>
|
||||
<Popover
|
||||
open={categoriaOpen}
|
||||
onOpenChange={setCategoriaOpen}
|
||||
modal
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
|
||||
@@ -324,10 +324,8 @@ const buildColumns = ({
|
||||
showPositiveSign={isReceita}
|
||||
className={cn(
|
||||
"whitespace-nowrap",
|
||||
isReceita
|
||||
? "text-green-600 dark:text-green-400"
|
||||
: "text-foreground",
|
||||
isTransfer && "text-blue-700 dark:text-blue-500",
|
||||
isReceita ? "text-success" : "text-foreground",
|
||||
isTransfer && "text-info",
|
||||
)}
|
||||
/>
|
||||
);
|
||||
@@ -545,7 +543,7 @@ const buildColumns = ({
|
||||
{loading ? (
|
||||
<Spinner className="size-4" />
|
||||
) : (
|
||||
<Icon className={cn("size-4", settled && "text-green-600")} />
|
||||
<Icon className={cn("size-4", settled && "text-success")} />
|
||||
)}
|
||||
<span className="sr-only">
|
||||
{settled ? "Desfazer pagamento" : "Marcar como pago"}
|
||||
@@ -631,7 +629,7 @@ const buildColumns = ({
|
||||
|
||||
{row.original.isAnticipated && (
|
||||
<DropdownMenuItem disabled>
|
||||
<RiCheckLine className="size-4 text-green-500" />
|
||||
<RiCheckLine className="size-4 text-success" />
|
||||
Parcela Antecipada
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
@@ -799,7 +797,7 @@ export function LancamentosTable({
|
||||
variant="outline"
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
<RiAddCircleLine className="size-4 text-green-500" />
|
||||
<RiAddCircleLine className="size-4 text-success" />
|
||||
Nova Receita
|
||||
</Button>
|
||||
<Button
|
||||
@@ -807,7 +805,7 @@ export function LancamentosTable({
|
||||
variant="outline"
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
<RiAddCircleLine className="size-4 text-red-500" />
|
||||
<RiAddCircleLine className="size-4 text-destructive" />
|
||||
Nova Despesa
|
||||
</Button>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user