From 1a7566212093866af862af086d9292463289cb5b Mon Sep 17 00:00:00 2001 From: Felipe Coutinho Date: Thu, 21 May 2026 13:47:53 +0000 Subject: [PATCH] style(ui): refina indicadores e componentes visuais --- src/app/globals.css | 14 ++-- .../components/dashboard-grid-editable.tsx | 2 +- .../components/dashboard-metrics-cards.tsx | 71 ++++++++++++------- .../widgets/income-expense-balance-widget.tsx | 6 +- src/features/inbox/components/inbox-card.tsx | 4 +- .../components/delete-account-form.tsx | 2 +- .../notification-bell-trigger.tsx | 5 +- src/shared/components/ui/card.tsx | 2 +- src/shared/components/ui/separator.tsx | 2 +- 9 files changed, 62 insertions(+), 46 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index e556d4a..ec91138 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -41,9 +41,9 @@ --input: var(--border); --ring: var(--primary); - --chart-1: var(--color-emerald-500); - --chart-2: var(--color-red-500); - --chart-3: var(--color-amber-500); + --chart-1: var(--color-orange-600); + --chart-2: var(--color-orange-400); + --chart-3: var(--color-orange-200); --chart-4: var(--color-blue-500); --chart-5: var(--color-pink-500); --chart-6: var(--color-stone-500); @@ -117,13 +117,13 @@ --destructive: oklch(62% 0.2 28); --destructive-foreground: oklch(98% 0.005 30); - --border: oklch(24.957% 0.00355 48.274); + --border: oklch(31.987% 0.00462 39.069); --input: var(--border); --ring: var(--primary); - --chart-1: var(--color-emerald-500); - --chart-2: var(--color-orange-500); - --chart-3: var(--color-indigo-500); + --chart-1: var(--color-orange-600); + --chart-2: var(--color-orange-400); + --chart-3: var(--color-orange-200); --chart-4: var(--color-amber-500); --chart-5: var(--color-pink-500); --chart-6: var(--color-stone-500); diff --git a/src/features/dashboard/components/dashboard-grid-editable.tsx b/src/features/dashboard/components/dashboard-grid-editable.tsx index 0be3ced..6c080a6 100644 --- a/src/features/dashboard/components/dashboard-grid-editable.tsx +++ b/src/features/dashboard/components/dashboard-grid-editable.tsx @@ -330,7 +330,7 @@ export function DashboardGridEditable({ >
{isEditing && ( -
+
diff --git a/src/features/dashboard/components/dashboard-metrics-cards.tsx b/src/features/dashboard/components/dashboard-metrics-cards.tsx index 0e3ac92..138078d 100644 --- a/src/features/dashboard/components/dashboard-metrics-cards.tsx +++ b/src/features/dashboard/components/dashboard-metrics-cards.tsx @@ -8,6 +8,7 @@ import { MetricsCardInfoButton } from "@/features/dashboard/components/metrics-c import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator"; import type { DashboardCardMetrics } from "@/features/dashboard/overview/dashboard-metrics-queries"; import MoneyValues from "@/shared/components/money-values"; +import { Badge } from "@/shared/components/ui/badge"; import { Card, CardContent, @@ -102,21 +103,22 @@ const getTrend = (current: number, previous: number): Trend => { return "flat"; }; -const getPercentChange = (current: number, previous: number): string => { +const getPercentChange = (current: number, previous: number): string | null => { const EPSILON = 0.01; if (Math.abs(previous) < EPSILON) { if (Math.abs(current) < EPSILON) return "0%"; - return "—"; + return null; } const change = ((current - previous) / Math.abs(previous)) * 100; - if (!Number.isFinite(change)) return "—"; + if (!Number.isFinite(change)) return null; + if (Math.abs(change) < TREND_THRESHOLD) return "0%"; if (change > 999) return "+999%"; if (change < -999) return "-999%"; return formatPercentage(change, { - maximumFractionDigits: 2, - minimumFractionDigits: 2, + maximumFractionDigits: 0, + minimumFractionDigits: 0, signDisplay: "always", }); }; @@ -160,28 +162,45 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) { - -
- - -
+ +
+
+
+ +
-
- - no mês anterior +
+ vs + + + {percentChange ? ( + + ) : ( + 0% + )} + +
+
diff --git a/src/features/dashboard/components/widgets/income-expense-balance-widget.tsx b/src/features/dashboard/components/widgets/income-expense-balance-widget.tsx index 807f57b..92fa782 100644 --- a/src/features/dashboard/components/widgets/income-expense-balance-widget.tsx +++ b/src/features/dashboard/components/widgets/income-expense-balance-widget.tsx @@ -19,15 +19,15 @@ type IncomeExpenseBalanceWidgetProps = { const chartConfig = { receita: { label: "Receita", - color: "var(--success)", + color: "var(--chart-1)", }, despesa: { label: "Despesa", - color: "var(--destructive)", + color: "var(--chart-2)", }, balanco: { label: "Balanço", - color: "var(--warning)", + color: "var(--chart-3)", }, } satisfies ChartConfig; diff --git a/src/features/inbox/components/inbox-card.tsx b/src/features/inbox/components/inbox-card.tsx index 5aa4f3f..f7a7b35 100644 --- a/src/features/inbox/components/inbox-card.tsx +++ b/src/features/inbox/components/inbox-card.tsx @@ -213,8 +213,8 @@ export const InboxCard = memo(function InboxCard({ variant="ghost" onClick={() => onViewDetails?.(item)} className="text-muted-foreground hover:text-foreground" - aria-label="Ver detalhes" - title="Ver detalhes" + aria-label="detalhes" + title="detalhes" > diff --git a/src/features/settings/components/delete-account-form.tsx b/src/features/settings/components/delete-account-form.tsx index c4f7edc..9f91e27 100644 --- a/src/features/settings/components/delete-account-form.tsx +++ b/src/features/settings/components/delete-account-form.tsx @@ -169,7 +169,7 @@ export function DeleteAccountForm() { > - {isResetAction ? "Zerar sua conta?" : "Você tem certeza?"} + {isResetAction ? "ZERAR sua conta?" : "Você tem certeza?"} {isResetAction diff --git a/src/shared/components/navigation/navbar/notification-bell/notification-bell-trigger.tsx b/src/shared/components/navigation/navbar/notification-bell/notification-bell-trigger.tsx index 83b2216..0c8c194 100644 --- a/src/shared/components/navigation/navbar/notification-bell/notification-bell-trigger.tsx +++ b/src/shared/components/navigation/navbar/notification-bell/notification-bell-trigger.tsx @@ -36,9 +36,6 @@ export function NotificationBellTrigger({ "group relative shadow-none transition-all duration-200", "hover:border-black/20 hover:bg-black/10 hover:text-black focus-visible:ring-2 focus-visible:ring-black/20 dark:hover:border-white/20 dark:hover:bg-white/10 dark:hover:text-white dark:focus-visible:ring-white/20", "data-[state=open]:bg-black/10 data-[state=open]:text-black dark:data-[state=open]:bg-white/10 dark:data-[state=open]:text-white", - hasAnySourceItems - ? "text-black dark:text-white" - : "text-black/75 dark:text-white/75", )} > {displayCount} - + ) : null} diff --git a/src/shared/components/ui/card.tsx b/src/shared/components/ui/card.tsx index 4a6a1b1..1e094d5 100644 --- a/src/shared/components/ui/card.tsx +++ b/src/shared/components/ui/card.tsx @@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {