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:
Felipe Coutinho
2026-01-17 16:56:13 +00:00
parent 75e8b992f0
commit bc28c30b58
4 changed files with 7 additions and 7 deletions

View File

@@ -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>

View File

@@ -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">

View File

@@ -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"

View File

@@ -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"