From 5fa234884e2f7b253c8b0668f0ef2ac6617f8fa9 Mon Sep 17 00:00:00 2001 From: Felipe Coutinho Date: Sat, 25 Apr 2026 14:46:05 +0000 Subject: [PATCH] =?UTF-8?q?style(ui):=20refresh=20em=20badges=20de=20tipo,?= =?UTF-8?q?=20radio=20buttons=20e=20antecipa=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TransactionTypeBadge: substitui StatusDot por ícones direcionais (RiArrowRightDownLine receita, RiArrowRightUpLine despesa, RiArrowLeftRightLine transferência), adiciona borda e shadow sutil e dessaturação no dark mode; rótulo "Transferência" abreviado para "Transf." - RadioGroup: indicador trocado de RiCircleLine por RiCheckLine com fundo sólido primary no estado selecionado - Tabela de seleção de parcelas no dialog de antecipação reduzida para três colunas (estabelecimento, fatura, valor); coluna de vencimento removida e nome do estabelecimento absorve a parcela - Inter agora carrega explicitamente os pesos 500, 600 e 700 Co-Authored-By: Claude Opus 4.7 --- public/fonts/font_index.ts | 1 + .../installment-selection-table.tsx | 22 ++++------ .../components/transaction-type-badge.tsx | 41 +++++++++++-------- src/shared/components/ui/radio-group.tsx | 8 ++-- 4 files changed, 36 insertions(+), 36 deletions(-) diff --git a/public/fonts/font_index.ts b/public/fonts/font_index.ts index fcd2af3..c077cbd 100644 --- a/public/fonts/font_index.ts +++ b/public/fonts/font_index.ts @@ -5,5 +5,6 @@ export const inter = Inter({ display: "swap", variable: "--font-inter", fallback: ["ui-sans-serif", "system-ui"], + weight: ["500", "600", "700"], preload: true, }); diff --git a/src/features/transactions/components/dialogs/anticipate-installments-dialog/installment-selection-table.tsx b/src/features/transactions/components/dialogs/anticipate-installments-dialog/installment-selection-table.tsx index eff3ad1..35c113f 100644 --- a/src/features/transactions/components/dialogs/anticipate-installments-dialog/installment-selection-table.tsx +++ b/src/features/transactions/components/dialogs/anticipate-installments-dialog/installment-selection-table.tsx @@ -1,7 +1,5 @@ "use client"; -import { format } from "date-fns"; -import { ptBR } from "date-fns/locale"; import MoneyValues from "@/shared/components/money-values"; import { Badge } from "@/shared/components/ui/badge"; import { Checkbox } from "@/shared/components/ui/checkbox"; @@ -44,11 +42,6 @@ export function InstallmentSelectionTable({ } }; - const formatDate = (date: Date | null) => { - if (!date) return "—"; - return format(date, "dd/MM/yyyy", { locale: ptBR }); - }; - if (installments.length === 0) { return (
@@ -63,11 +56,11 @@ export function InstallmentSelectionTable({ } return ( -
+
- + - Parcela - Período - Vencimento + Estabelecimento + Fatura Valor @@ -103,6 +95,7 @@ export function InstallmentSelectionTable({ /> + {inst.name}{" "} {formatCurrentInstallment( inst.currentInstallment ?? 0, @@ -110,12 +103,11 @@ export function InstallmentSelectionTable({ )} + {formatShortPeriodLabel(inst.period)} - - {formatDate(inst.dueDate)} - + diff --git a/src/shared/components/transaction-type-badge.tsx b/src/shared/components/transaction-type-badge.tsx index 683a487..0d4b5e9 100644 --- a/src/shared/components/transaction-type-badge.tsx +++ b/src/shared/components/transaction-type-badge.tsx @@ -1,6 +1,11 @@ +import { + type RemixiconComponentType, + RiArrowLeftRightLine, + RiArrowRightDownLine, + RiArrowRightUpLine, +} from "@remixicon/react"; import { Badge } from "@/shared/components/ui/badge"; import { cn } from "@/shared/utils/ui"; -import StatusDot from "./status-dot"; type FinancialKind = | "receita" @@ -26,29 +31,33 @@ type TransactionTypeBadgeProps = { type BadgeConfig = { label: string; className: string; - dotClassName: string; + Icon: RemixiconComponentType; }; const BADGE_CONFIG: Record = { receita: { label: "Receita", - className: "bg-success/10 text-success dark:bg-success/10", - dotClassName: "bg-success/80", + className: + "border-success/30 bg-success/5 text-success dark:saturate-90 dark:border-success/50 dark:bg-transparent", + Icon: RiArrowRightDownLine, }, despesa: { label: "Despesa", - className: "bg-destructive/10 text-destructive dark:bg-destructive/10", - dotClassName: "bg-destructive/80", + className: + "border-destructive/30 bg-destructive/5 text-destructive dark:saturate-90 dark:border-destructive/50 dark:bg-transparent", + Icon: RiArrowRightUpLine, }, transferência: { - label: "Transferência", - className: "bg-info/10 text-info dark:bg-info/10", - dotClassName: "bg-info/80", + label: "Transf.", + className: + "border-info/30 bg-info/5 text-info dark:saturate-90 dark:border-info/50 dark:bg-transparent", + Icon: RiArrowLeftRightLine, }, "saldo inicial": { label: "Saldo Inicial", - className: "bg-success/10 text-success dark:bg-success/10", - dotClassName: "bg-success/80", + className: + "border-success/30 bg-success/5 text-success dark:saturate-90 dark:border-success/50 dark:bg-transparent", + Icon: RiArrowRightDownLine, }, }; @@ -66,22 +75,20 @@ export function TransactionTypeBadge({ const normalizedKind = normalizeKind(kind); const config = normalizedKind ? BADGE_CONFIG[normalizedKind] : null; const label = config?.label ?? kind; + const Icon = config?.Icon; return ( - + {Icon ? : null} {label} ); diff --git a/src/shared/components/ui/radio-group.tsx b/src/shared/components/ui/radio-group.tsx index f7d61ac..cd10f51 100644 --- a/src/shared/components/ui/radio-group.tsx +++ b/src/shared/components/ui/radio-group.tsx @@ -1,7 +1,7 @@ "use client"; import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"; -import { RiCircleLine } from "@remixicon/react"; +import { RiCheckLine } from "@remixicon/react"; import type * as React from "react"; import { cn } from "@/shared/utils/ui"; @@ -26,16 +26,16 @@ function RadioGroupItem({ - + );