forked from git.gladyson/openmonetis
style: ajustes visuais em notificação, timeline e layout
- Alterar ícone de notificação para outline (RiNotification3Line) - Mudar cor da timeline de parcelas de azul para verde - Reduzir padding do month picker (p-5 → p-4) - Remover md:py-6 do layout dashboard Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -58,7 +58,7 @@ export default async function DashboardLayout({
|
|||||||
<SiteHeader notificationsSnapshot={notificationsSnapshot} />
|
<SiteHeader notificationsSnapshot={notificationsSnapshot} />
|
||||||
<div className="flex flex-1 flex-col">
|
<div className="flex flex-1 flex-col">
|
||||||
<div className="@container/main flex flex-1 flex-col gap-2">
|
<div className="@container/main flex flex-1 flex-col gap-2">
|
||||||
<div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
|
<div className="flex flex-col gap-4 py-4 md:gap-6">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ export function InstallmentTimeline({
|
|||||||
const lastInstallmentDate = calculateLastInstallmentDate(
|
const lastInstallmentDate = calculateLastInstallmentDate(
|
||||||
period,
|
period,
|
||||||
currentInstallment,
|
currentInstallment,
|
||||||
totalInstallments
|
totalInstallments,
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -30,7 +30,7 @@ export function InstallmentTimeline({
|
|||||||
{/* Linha de conexão */}
|
{/* Linha de conexão */}
|
||||||
<div className="absolute left-0 right-0 top-6 h-0.5 bg-border">
|
<div className="absolute left-0 right-0 top-6 h-0.5 bg-border">
|
||||||
<div
|
<div
|
||||||
className="h-full bg-blue-600 transition-all duration-300"
|
className="h-full bg-green-600 transition-all duration-300"
|
||||||
style={{
|
style={{
|
||||||
width: `${
|
width: `${
|
||||||
((currentInstallment - 1) / (totalInstallments - 1)) * 100
|
((currentInstallment - 1) / (totalInstallments - 1)) * 100
|
||||||
@@ -41,7 +41,7 @@ export function InstallmentTimeline({
|
|||||||
|
|
||||||
{/* Ponto 1: Data de Compra */}
|
{/* Ponto 1: Data de Compra */}
|
||||||
<div className="relative z-10 flex flex-col items-center gap-2">
|
<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-blue-600 bg-blue-600 shadow-sm">
|
<div className="flex size-4 items-center justify-center rounded-full border-2 border-green-600 bg-green-600 shadow-sm">
|
||||||
<RiCheckLine className="size-5 text-white" />
|
<RiCheckLine className="size-5 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
|
|||||||
@@ -79,7 +79,7 @@ export default function MonthNavigation() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="sticky top-0 z-30 w-full flex-row bg-month-picker text-month-picker-foreground p-5">
|
<Card className="sticky top-0 z-30 w-full flex-row bg-month-picker text-month-picker-foreground p-4">
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<NavigationButton
|
<NavigationButton
|
||||||
direction="left"
|
direction="left"
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ import { cn } from "@/lib/utils/ui";
|
|||||||
import {
|
import {
|
||||||
RiAlertFill,
|
RiAlertFill,
|
||||||
RiCheckboxCircleFill,
|
RiCheckboxCircleFill,
|
||||||
RiNotification3Fill,
|
RiNotification3Line,
|
||||||
RiTimeLine,
|
RiTimeLine,
|
||||||
} from "@remixicon/react";
|
} from "@remixicon/react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
@@ -82,7 +82,7 @@ export function NotificationBell({
|
|||||||
"data-[state=open]:bg-accent/60 data-[state=open]:text-foreground border"
|
"data-[state=open]:bg-accent/60 data-[state=open]:text-foreground border"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<RiNotification3Fill
|
<RiNotification3Line
|
||||||
className={cn(
|
className={cn(
|
||||||
"size-4 transition-transform duration-200",
|
"size-4 transition-transform duration-200",
|
||||||
open ? "scale-90" : "scale-100"
|
open ? "scale-90" : "scale-100"
|
||||||
|
|||||||
Reference in New Issue
Block a user