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} />
|
||||
<div className="flex flex-1 flex-col">
|
||||
<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}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,7 @@ export function InstallmentTimeline({
|
||||
const lastInstallmentDate = calculateLastInstallmentDate(
|
||||
period,
|
||||
currentInstallment,
|
||||
totalInstallments
|
||||
totalInstallments,
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -30,7 +30,7 @@ export function InstallmentTimeline({
|
||||
{/* Linha de conexão */}
|
||||
<div className="absolute left-0 right-0 top-6 h-0.5 bg-border">
|
||||
<div
|
||||
className="h-full bg-blue-600 transition-all duration-300"
|
||||
className="h-full bg-green-600 transition-all duration-300"
|
||||
style={{
|
||||
width: `${
|
||||
((currentInstallment - 1) / (totalInstallments - 1)) * 100
|
||||
@@ -41,7 +41,7 @@ export function InstallmentTimeline({
|
||||
|
||||
{/* Ponto 1: Data de Compra */}
|
||||
<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" />
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
|
||||
@@ -79,7 +79,7 @@ export default function MonthNavigation() {
|
||||
};
|
||||
|
||||
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">
|
||||
<NavigationButton
|
||||
direction="left"
|
||||
|
||||
@@ -25,7 +25,7 @@ import { cn } from "@/lib/utils/ui";
|
||||
import {
|
||||
RiAlertFill,
|
||||
RiCheckboxCircleFill,
|
||||
RiNotification3Fill,
|
||||
RiNotification3Line,
|
||||
RiTimeLine,
|
||||
} from "@remixicon/react";
|
||||
import { useState } from "react";
|
||||
@@ -82,7 +82,7 @@ export function NotificationBell({
|
||||
"data-[state=open]:bg-accent/60 data-[state=open]:text-foreground border"
|
||||
)}
|
||||
>
|
||||
<RiNotification3Fill
|
||||
<RiNotification3Line
|
||||
className={cn(
|
||||
"size-4 transition-transform duration-200",
|
||||
open ? "scale-90" : "scale-100"
|
||||
|
||||
Reference in New Issue
Block a user