From 90533682caaee0f300ba9bcebcc49492940a4e1b Mon Sep 17 00:00:00 2001 From: Gustavo Gaiotti Date: Thu, 9 Jul 2026 17:18:43 -0300 Subject: [PATCH 1/4] refactor(frontend): replace raw palette colors with design tokens --- frontend/src/app/(app)/categories/page.tsx | 2 +- frontend/src/app/(app)/dashboard/page.tsx | 2 +- frontend/src/app/(app)/ledger/join/[token]/page.tsx | 6 +++--- frontend/src/app/(app)/ledger/page.tsx | 2 +- frontend/src/app/(app)/settings/page.tsx | 8 ++++---- frontend/src/app/(app)/transactions/page.tsx | 2 +- frontend/src/app/(auth)/forgot-password/page.tsx | 2 +- frontend/src/app/(auth)/login/page.tsx | 4 ++-- frontend/src/app/(auth)/register/page.tsx | 8 ++++---- frontend/src/app/(auth)/reset-password/page.tsx | 4 ++-- frontend/src/app/onboarding/page.tsx | 2 +- frontend/src/components/categories/CategoryFormModal.tsx | 2 +- frontend/src/components/dashboard/CoupleSplitPanel.tsx | 4 ++-- frontend/src/components/dashboard/NotificationBell.tsx | 8 +++++--- frontend/src/components/ledger/InviteModal.tsx | 2 +- .../src/components/transactions/TransactionFilters.tsx | 8 ++++---- frontend/src/components/transactions/TransactionTable.tsx | 4 ++-- 17 files changed, 36 insertions(+), 34 deletions(-) diff --git a/frontend/src/app/(app)/categories/page.tsx b/frontend/src/app/(app)/categories/page.tsx index 3526d5b..6e0dd65 100644 --- a/frontend/src/app/(app)/categories/page.tsx +++ b/frontend/src/app/(app)/categories/page.tsx @@ -66,7 +66,7 @@ export default function CategoriesPage() { /> {errorMessage ? ( -
+
{errorMessage}
) : null} diff --git a/frontend/src/app/(app)/dashboard/page.tsx b/frontend/src/app/(app)/dashboard/page.tsx index 47a8f8b..51f4476 100644 --- a/frontend/src/app/(app)/dashboard/page.tsx +++ b/frontend/src/app/(app)/dashboard/page.tsx @@ -203,7 +203,7 @@ export default function DashboardPage() { ) : null} {hasError ? ( -
+
Algumas seções não carregaram. Verifique a permissão da fatura e a disponibilidade da API.
) : null} diff --git a/frontend/src/app/(app)/ledger/join/[token]/page.tsx b/frontend/src/app/(app)/ledger/join/[token]/page.tsx index 7cea305..9a32dfb 100644 --- a/frontend/src/app/(app)/ledger/join/[token]/page.tsx +++ b/frontend/src/app/(app)/ledger/join/[token]/page.tsx @@ -18,14 +18,14 @@ export default function JoinLedgerPage() { if (acceptErrorMessage) { return (
-
-

+

+

Convite indisponível

Não foi possível aceitar

-

{acceptErrorMessage}

+

{acceptErrorMessage}

O convite pode ter sido cancelado, expirado ou ja utilizado.

diff --git a/frontend/src/app/(app)/ledger/page.tsx b/frontend/src/app/(app)/ledger/page.tsx index 01e0adf..77c4542 100644 --- a/frontend/src/app/(app)/ledger/page.tsx +++ b/frontend/src/app/(app)/ledger/page.tsx @@ -142,7 +142,7 @@ export default function LedgerPage() { Cancelar
- {nameError ?

{nameError}

: null} + {nameError ?

{nameError}

: null}
) : (
diff --git a/frontend/src/app/(app)/settings/page.tsx b/frontend/src/app/(app)/settings/page.tsx index 1201f03..cfed98e 100644 --- a/frontend/src/app/(app)/settings/page.tsx +++ b/frontend/src/app/(app)/settings/page.tsx @@ -101,7 +101,7 @@ export default function SettingsPage() { {...profileForm.register("displayName")} /> {profileForm.formState.errors.displayName ? ( - + {profileForm.formState.errors.displayName.message} ) : null} @@ -143,7 +143,7 @@ export default function SettingsPage() { {...passwordForm.register("currentPassword")} /> {passwordForm.formState.errors.currentPassword ? ( - + {passwordForm.formState.errors.currentPassword.message} ) : null} @@ -159,7 +159,7 @@ export default function SettingsPage() { {...passwordForm.register("newPassword")} /> {passwordForm.formState.errors.newPassword ? ( - + {passwordForm.formState.errors.newPassword.message} ) : null} @@ -175,7 +175,7 @@ export default function SettingsPage() { {...passwordForm.register("confirmPassword")} /> {passwordForm.formState.errors.confirmPassword ? ( - + {passwordForm.formState.errors.confirmPassword.message} ) : null} diff --git a/frontend/src/app/(app)/transactions/page.tsx b/frontend/src/app/(app)/transactions/page.tsx index 9723308..4ed9ed6 100644 --- a/frontend/src/app/(app)/transactions/page.tsx +++ b/frontend/src/app/(app)/transactions/page.tsx @@ -31,7 +31,7 @@ function getNetBalanceClassName(value: number) { return "text-[var(--expense)]"; } - return "text-amber-300"; + return "text-[var(--accent-amber)]"; } export default function TransactionsPage() { diff --git a/frontend/src/app/(auth)/forgot-password/page.tsx b/frontend/src/app/(auth)/forgot-password/page.tsx index 3a9d7c8..40132ee 100644 --- a/frontend/src/app/(auth)/forgot-password/page.tsx +++ b/frontend/src/app/(auth)/forgot-password/page.tsx @@ -70,7 +70,7 @@ export default function ForgotPasswordPage() { {...form.register("email")} /> {form.formState.errors.email ? ( - + {form.formState.errors.email.message} ) : null} diff --git a/frontend/src/app/(auth)/login/page.tsx b/frontend/src/app/(auth)/login/page.tsx index 07769e7..927546d 100644 --- a/frontend/src/app/(auth)/login/page.tsx +++ b/frontend/src/app/(auth)/login/page.tsx @@ -132,7 +132,7 @@ export default function LoginPage() { {...form.register("email")} /> {form.formState.errors.email ? ( - + {form.formState.errors.email.message} ) : null} @@ -153,7 +153,7 @@ export default function LoginPage() { {...form.register("password")} /> {form.formState.errors.password ? ( - + {form.formState.errors.password.message} ) : null} diff --git a/frontend/src/app/(auth)/register/page.tsx b/frontend/src/app/(auth)/register/page.tsx index b03533a..d7416cd 100644 --- a/frontend/src/app/(auth)/register/page.tsx +++ b/frontend/src/app/(auth)/register/page.tsx @@ -68,7 +68,7 @@ export default function RegisterPage() { {...form.register("displayName")} /> {form.formState.errors.displayName ? ( - + {form.formState.errors.displayName.message} ) : null} @@ -81,7 +81,7 @@ export default function RegisterPage() { {...form.register("email")} /> {form.formState.errors.email ? ( - + {form.formState.errors.email.message} ) : null} @@ -97,13 +97,13 @@ export default function RegisterPage() { Força: {strength} {form.formState.errors.password ? ( - + {form.formState.errors.password.message} ) : null} {registerMutation.isError ? ( -

+

Não foi possível cadastrar. Tente novamente.

) : null} diff --git a/frontend/src/app/(auth)/reset-password/page.tsx b/frontend/src/app/(auth)/reset-password/page.tsx index e3a06c7..32d0fd2 100644 --- a/frontend/src/app/(auth)/reset-password/page.tsx +++ b/frontend/src/app/(auth)/reset-password/page.tsx @@ -62,7 +62,7 @@ function ResetPasswordForm() { {...form.register("newPassword")} /> {form.formState.errors.newPassword ? ( - + {form.formState.errors.newPassword.message} ) : null} @@ -78,7 +78,7 @@ function ResetPasswordForm() { {...form.register("confirmPassword")} /> {form.formState.errors.confirmPassword ? ( - + {form.formState.errors.confirmPassword.message} ) : null} diff --git a/frontend/src/app/onboarding/page.tsx b/frontend/src/app/onboarding/page.tsx index 6a3bf2a..024c6eb 100644 --- a/frontend/src/app/onboarding/page.tsx +++ b/frontend/src/app/onboarding/page.tsx @@ -77,7 +77,7 @@ export default function OnboardingPage() { {createLedgerMutation.isPending ? "Criando..." : "Criar fatura"} {createLedgerMutation.isError ? ( -

Não foi possível criar a fatura.

+

Não foi possível criar a fatura.

) : null} diff --git a/frontend/src/components/dashboard/CoupleSplitPanel.tsx b/frontend/src/components/dashboard/CoupleSplitPanel.tsx index 5ccb4f4..defa3cf 100644 --- a/frontend/src/components/dashboard/CoupleSplitPanel.tsx +++ b/frontend/src/components/dashboard/CoupleSplitPanel.tsx @@ -38,10 +38,10 @@ export function CoupleSplitPanel({ data }: CoupleSplitPanelProps) { : "Equilibrado"; const statusClassName = delta > 0 - ? "border border-emerald-400/40 bg-emerald-500/12 text-[var(--income)]" + ? "border border-[color-mix(in_srgb,var(--income)_40%,transparent)] bg-[color-mix(in_srgb,var(--income)_12%,transparent)] text-[var(--income)]" : delta < 0 ? "danger-chip" - : "border border-amber-400/35 bg-amber-500/12 text-[var(--accent-amber)]"; + : "border border-[color-mix(in_srgb,var(--accent-amber)_35%,transparent)] bg-[color-mix(in_srgb,var(--accent-amber)_12%,transparent)] text-[var(--accent-amber)]"; return (
{unreadCount > 0 ? ( - + {unreadCount > 9 ? "9+" : unreadCount} ) : null} @@ -133,7 +133,9 @@ export function NotificationBell() { ) : null} {notifications.isError ? ( -

Não foi possível carregar as notificações.

+

+ Não foi possível carregar as notificações. +

) : null} {!notifications.isLoading && !notifications.isError ? ( @@ -175,7 +177,7 @@ export function NotificationBell() { ) : null} {markSeen.isError ? ( -

+

As notificações foram abertas, mas não foi possível sincronizar o status.

) : null} diff --git a/frontend/src/components/ledger/InviteModal.tsx b/frontend/src/components/ledger/InviteModal.tsx index c3dd45e..6fe212f 100644 --- a/frontend/src/components/ledger/InviteModal.tsx +++ b/frontend/src/components/ledger/InviteModal.tsx @@ -42,7 +42,7 @@ export function InviteModal({ open, onClose, onSubmit, isSubmitting = false }: I diff --git a/frontend/src/components/transactions/TransactionFilters.tsx b/frontend/src/components/transactions/TransactionFilters.tsx index 6c52748..95ee911 100644 --- a/frontend/src/components/transactions/TransactionFilters.tsx +++ b/frontend/src/components/transactions/TransactionFilters.tsx @@ -19,12 +19,12 @@ export function TransactionFilters({ active, onChange }: TransactionFiltersProps const className = option === "INCOME" ? isActive - ? "border-emerald-400/80 bg-emerald-500/15 text-emerald-200" - : "border-emerald-500/25 bg-emerald-500/5 text-emerald-300 hover:border-emerald-400/50 hover:bg-emerald-500/10" + ? "border-[color-mix(in_srgb,var(--income)_80%,transparent)] bg-[color-mix(in_srgb,var(--income)_15%,transparent)] text-[var(--income)]" + : "border-[color-mix(in_srgb,var(--income)_25%,transparent)] bg-[color-mix(in_srgb,var(--income)_5%,transparent)] text-[var(--income)] hover:border-[color-mix(in_srgb,var(--income)_50%,transparent)] hover:bg-[color-mix(in_srgb,var(--income)_10%,transparent)]" : option === "EXPENSE" ? isActive - ? "border-red-400/80 bg-red-500/15 text-red-200" - : "border-red-500/25 bg-red-500/5 text-red-300 hover:border-red-400/50 hover:bg-red-500/10" + ? "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger-text)]" + : "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger-text)] hover:border-[var(--danger-border)] hover:bg-[var(--danger-bg)]" : isActive ? "border-[var(--accent)] bg-[var(--accent-muted)] text-[var(--accent-hover)]" : "border-[var(--surface-edge)] bg-[var(--bg-elevated)] text-[var(--text-secondary)] hover:bg-[var(--bg-muted)]"; diff --git a/frontend/src/components/transactions/TransactionTable.tsx b/frontend/src/components/transactions/TransactionTable.tsx index 927d271..67c85e4 100644 --- a/frontend/src/components/transactions/TransactionTable.tsx +++ b/frontend/src/components/transactions/TransactionTable.tsx @@ -64,7 +64,7 @@ export function TransactionTable({ items, onEdit, onDelete, deletingId }: Transa +
)} diff --git a/frontend/src/app/(auth)/login/page.tsx b/frontend/src/app/(auth)/login/page.tsx index 927546d..4b703e3 100644 --- a/frontend/src/app/(auth)/login/page.tsx +++ b/frontend/src/app/(auth)/login/page.tsx @@ -8,6 +8,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { BrandWordmark } from "@/components/brand/BrandWordmark"; import { ThemeToggle } from "@/components/theme/ThemeToggle"; +import { Alert, Button, Field, Input } from "@/components/ui"; import { useLogin } from "@/hooks/useAuth"; import { getMyLedger } from "@/lib/api/ledger"; import { useAuthStore } from "@/lib/store/auth.store"; @@ -122,50 +123,41 @@ export default function LoginPage() {

- - + {loginMutation.isError ? ( -

- Credenciais inválidas ou servidor indisponível. -

+ Credenciais inválidas ou servidor indisponível. ) : null} - +

Não tem conta?{" "} diff --git a/frontend/src/app/(auth)/register/page.tsx b/frontend/src/app/(auth)/register/page.tsx index d7416cd..b605bc1 100644 --- a/frontend/src/app/(auth)/register/page.tsx +++ b/frontend/src/app/(auth)/register/page.tsx @@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { useForm, useWatch } from "react-hook-form"; import { BrandWordmark } from "@/components/brand/BrandWordmark"; import { ThemeToggle } from "@/components/theme/ThemeToggle"; +import { Alert, Button, Field, Input } from "@/components/ui"; import { useRegister } from "@/hooks/useAuth"; import { registerSchema, type RegisterSchema } from "@/lib/validators/auth.schemas"; @@ -61,62 +62,48 @@ export default function RegisterPage() { Configure o Zenith em menos de um minuto.

- - - +

Força: {strength}

+ {registerMutation.isError ? ( -

- Não foi possível cadastrar. Tente novamente. -

+ Não foi possível cadastrar. Tente novamente. ) : null} - +

Já tem conta?{" "} diff --git a/frontend/src/app/(auth)/reset-password/page.tsx b/frontend/src/app/(auth)/reset-password/page.tsx index 32d0fd2..2a4e014 100644 --- a/frontend/src/app/(auth)/reset-password/page.tsx +++ b/frontend/src/app/(auth)/reset-password/page.tsx @@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { BrandWordmark } from "@/components/brand/BrandWordmark"; import { ThemeToggle } from "@/components/theme/ThemeToggle"; +import { Alert, Button, Field, Input } from "@/components/ui"; import { useResetPassword } from "@/hooks/useAuth"; import { resetPasswordSchema, type ResetPasswordSchema } from "@/lib/validators/auth.schemas"; @@ -53,47 +54,40 @@ function ResetPasswordForm() {

- - + {mutation.isError ? ( -

+ Link inválido ou expirado. Solicite um novo link de redefinição. -

+ ) : null} - +
);