mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-10 03:11:46 +00:00
style(ui): polimento visual — tema, cards, dark mode e landing page
Raio de borda global 0.625rem → 0.7rem; ajustes finos em --card e --border. DotPattern removido do layout, tela de auth e landing page. Account-card redesenhado (cores de saldo, tooltip de flags de exclusão). Budget-card, card-item, calendário (day-cell, event-modal) com layout revisado. Auth-card-shell simplificado (sem glassmorphism/blob). Landing page com mainFeatures + extraFeatures em grid único e dark mode nos botões de CTA. Imagens de preview da landing atualizadas. CSS --data-7..10 removidas. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,34 +1,32 @@
|
||||
"use client";
|
||||
|
||||
import { EVENT_TYPE_STYLES } from "@/features/calendar/components/day-cell";
|
||||
import StatusDot from "@/shared/components/status-dot";
|
||||
import { Card } from "@/shared/components/ui/card";
|
||||
import type { CalendarEvent } from "@/shared/lib/types/calendar";
|
||||
import { cn } from "@/shared/utils/ui";
|
||||
|
||||
const LEGEND_ITEMS: Array<{
|
||||
type?: CalendarEvent["type"];
|
||||
label: string;
|
||||
dotColor?: string;
|
||||
}> = [
|
||||
{ type: "transaction", label: "Lançamentos" },
|
||||
{ type: "boleto", label: "Boleto com vencimento" },
|
||||
{ type: "card", label: "Vencimento de cartão" },
|
||||
{ label: "Pagamento fatura", dotColor: "bg-success" },
|
||||
const LEGEND_ITEMS = [
|
||||
{ label: "Lançamentos", ...EVENT_TYPE_STYLES.transaction },
|
||||
{ label: "Boletos", ...EVENT_TYPE_STYLES.boleto },
|
||||
{ label: "Fatura de Cartão", ...EVENT_TYPE_STYLES.card },
|
||||
];
|
||||
|
||||
export function CalendarLegend() {
|
||||
return (
|
||||
<Card className="flex flex-row gap-2 p-2 text-sm">
|
||||
{LEGEND_ITEMS.map((item, index) => {
|
||||
const dotColor =
|
||||
item.dotColor || (item.type ? EVENT_TYPE_STYLES[item.type].dot : "");
|
||||
return (
|
||||
<span key={item.type || index} className="flex items-center gap-2">
|
||||
<StatusDot color={dotColor} />
|
||||
{item.label}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</Card>
|
||||
<ul className="flex items-center justify-start gap-2 px-1">
|
||||
{LEGEND_ITEMS.map((item) => (
|
||||
<li
|
||||
key={item.label}
|
||||
className={cn(
|
||||
"flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium",
|
||||
item.wrapper,
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn("size-1.5 shrink-0 rounded-full", item.dot)}
|
||||
aria-hidden
|
||||
/>
|
||||
{item.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user