From 22a88de9938b88a61bfaf0c0617e8ccabe828e84 Mon Sep 17 00:00:00 2001 From: Alexsandro Date: Wed, 15 Apr 2026 14:35:26 -0300 Subject: [PATCH] style(ui): update auth pages layout and navigation capitalization This commit improves the visual design of the auth pages by adding a new layout wrapper with an animated blob background effect and updating the auth card shell with a glassmorphism style. It also updates the navigation items to use capitalized labels instead of lowercase for better readability. --- src/app/(auth)/layout.tsx | 23 +++++++ src/app/(auth)/login/page.tsx | 18 +---- src/app/(auth)/signup/page.tsx | 18 +---- src/app/(dashboard)/layout.tsx | 66 +++++++++---------- src/app/(dashboard)/settings/page.tsx | 1 + src/app/globals.css | 19 ++++++ .../auth/components/auth-card-shell.tsx | 11 ++-- src/features/landing/constants.ts | 12 ++-- .../navigation/navbar/nav-items.tsx | 30 ++++----- .../components/navigation/navbar/nav-menu.tsx | 8 ++- .../components/navigation/navbar/nav-pill.tsx | 2 +- .../navigation/navbar/nav-tools.tsx | 4 +- 12 files changed, 114 insertions(+), 98 deletions(-) create mode 100644 src/app/(auth)/layout.tsx diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx new file mode 100644 index 0000000..a1bd359 --- /dev/null +++ b/src/app/(auth)/layout.tsx @@ -0,0 +1,23 @@ +import { Logo } from "@/shared/components/logo"; + +export default function AuthLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( +
+
+
+
+
+
+ +
+ +
+ +
{children}
+
+ ); +} diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx index 474f7dc..70f39db 100644 --- a/src/app/(auth)/login/page.tsx +++ b/src/app/(auth)/login/page.tsx @@ -1,21 +1,5 @@ import { LoginForm } from "@/features/auth/components/login-form"; -import { Logo } from "@/shared/components/logo"; export default function LoginPage() { - return ( -
-
-
-
-
- -
- -
- -
- -
-
- ); + return ; } diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx index 59b6ba9..2d6db62 100644 --- a/src/app/(auth)/signup/page.tsx +++ b/src/app/(auth)/signup/page.tsx @@ -1,21 +1,5 @@ import { SignupForm } from "@/features/auth/components/signup-form"; -import { Logo } from "@/shared/components/logo"; export default function SignupPage() { - return ( -
-
-
-
-
- -
- -
- -
- -
-
- ); + return ; } diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx index bb13a18..e3a6cbe 100644 --- a/src/app/(dashboard)/layout.tsx +++ b/src/app/(dashboard)/layout.tsx @@ -6,40 +6,40 @@ import { DotPattern } from "@/shared/components/ui/dot-pattern"; import { getUserSession } from "@/shared/lib/auth/server"; export default async function DashboardLayout({ - children, + children, }: Readonly<{ - children: React.ReactNode; + children: React.ReactNode; }>) { - await connection(); - const session = await getUserSession(); - const navbarData = await fetchDashboardNavbarData(session.user.id); + await connection(); + const session = await getUserSession(); + const navbarData = await fetchDashboardNavbarData(session.user.id); - return ( - - -
-
- -
-
-
-
- {children} -
-
-
- - ); + return ( + + +
+
+ +
+
+
+
+ {children} +
+
+
+ + ); } diff --git a/src/app/(dashboard)/settings/page.tsx b/src/app/(dashboard)/settings/page.tsx index 4e404b4..b9cf1c9 100644 --- a/src/app/(dashboard)/settings/page.tsx +++ b/src/app/(dashboard)/settings/page.tsx @@ -50,6 +50,7 @@ export default async function Page() { Alterar senha Passkeys Alterar e-mail + Integrações Deletar conta diff --git a/src/app/globals.css b/src/app/globals.css index cc215e8..18d405e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -354,3 +354,22 @@ justify-content: flex-end; animation: blink-out 6s ease-in-out infinite; } + +@keyframes blob { + 0% { transform: translate(0px, 0px) scale(1); } + 33% { transform: translate(30px, -50px) scale(1.1); } + 66% { transform: translate(-20px, 20px) scale(0.9); } + 100% { transform: translate(0px, 0px) scale(1); } +} + +.animate-blob { + animation: blob 10s infinite alternate ease-in-out; +} + +.animation-delay-2000 { + animation-delay: 2s; +} + +.animation-delay-4000 { + animation-delay: 4s; +} diff --git a/src/features/auth/components/auth-card-shell.tsx b/src/features/auth/components/auth-card-shell.tsx index 4c640bd..5d7a957 100644 --- a/src/features/auth/components/auth-card-shell.tsx +++ b/src/features/auth/components/auth-card-shell.tsx @@ -5,8 +5,9 @@ import AuthSidebar from "./auth-sidebar"; export function AuthCardShell({ children }: PropsWithChildren) { return ( - +
+
-
+
- -
{children}
+ +
+ {children} +
diff --git a/src/features/landing/constants.ts b/src/features/landing/constants.ts index 3faba77..91dbdf7 100644 --- a/src/features/landing/constants.ts +++ b/src/features/landing/constants.ts @@ -36,12 +36,12 @@ export type FeatureItem = { }; export const navLinks = [ - { href: "#telas", label: "conheça as telas" }, - { href: "#funcionalidades", label: "funcionalidades" }, - { href: "#mobile", label: "mobile" }, - { href: "#stack", label: "stack" }, - { href: "#como-usar", label: "como usar" }, - { href: "#para-quem-e", label: "para quem é" }, + { href: "#telas", label: "Conheça as telas" }, + { href: "#funcionalidades", label: "Funcionalidades" }, + { href: "#mobile", label: "Mobile" }, + { href: "#stack", label: "Stack" }, + { href: "#como-usar", label: "Como usar" }, + { href: "#para-quem-e", label: "Para quem é" }, ] as const; export const mainFeatures: FeatureItem[] = [ diff --git a/src/shared/components/navigation/navbar/nav-items.tsx b/src/shared/components/navigation/navbar/nav-items.tsx index d31b8fc..d31d45b 100644 --- a/src/shared/components/navigation/navbar/nav-items.tsx +++ b/src/shared/components/navigation/navbar/nav-items.tsx @@ -37,7 +37,7 @@ export const NAV_SECTIONS: NavSection[] = [ items: [ { href: "/transactions", - label: "lançamentos", + label: "Lançamentos", description: "Registre e gerencie suas transações", icon: , iconClass: "text-primary", @@ -45,14 +45,14 @@ export const NAV_SECTIONS: NavSection[] = [ }, { href: "/inbox", - label: "pré-lançamentos", + label: "Pré-lançamentos", description: "Notificações capturadas pelo Companion", icon: , iconClass: "text-primary", }, { href: "/calendar", - label: "calendário", + label: "Calendário", description: "Visualize lançamentos por dia", icon: , iconClass: "text-primary", @@ -65,21 +65,21 @@ export const NAV_SECTIONS: NavSection[] = [ items: [ { href: "/cards", - label: "cartões", + label: "Cartões", description: "Faturas e limites dos seus cartões", icon: , iconClass: "text-primary", }, { href: "/accounts", - label: "contas", + label: "Contas", description: "Saldos e extratos bancários", icon: , iconClass: "text-primary", }, { href: "/budgets", - label: "orçamentos", + label: "Orçamentos", description: "Defina limites de gastos por categoria", icon: , iconClass: "text-primary", @@ -92,28 +92,28 @@ export const NAV_SECTIONS: NavSection[] = [ items: [ { href: "/payers", - label: "pagadores", + label: "Pagadores", description: "Gerencie quem divide as despesas", icon: , iconClass: "text-primary", }, { href: "/categories", - label: "categorias", + label: "Categorias", description: "Agrupe seus lançamentos", icon: , iconClass: "text-primary", }, { href: "/notes", - label: "anotações", + label: "Anotações", description: "Guarde lembretes e observações", icon: , iconClass: "text-primary", }, { href: "/attachments", - label: "anexos", + label: "Anexos", description: "Comprovantes e documentos", icon: , iconClass: "text-primary", @@ -126,7 +126,7 @@ export const NAV_SECTIONS: NavSection[] = [ items: [ { href: "/insights", - label: "insights", + label: "Insights", description: "Análises inteligentes dos seus dados", icon: , iconClass: "text-primary", @@ -134,14 +134,14 @@ export const NAV_SECTIONS: NavSection[] = [ }, { href: "/reports/category-trends", - label: "tendências", + label: "Tendências", description: "Evolução de gastos por categoria", icon: , iconClass: "text-primary", }, { href: "/reports/card-usage", - label: "uso de cartões", + label: "Uso de cartões", description: "Resumo de gastos por cartão", icon: , iconClass: "text-primary", @@ -149,14 +149,14 @@ export const NAV_SECTIONS: NavSection[] = [ }, { href: "/reports/installment-analysis", - label: "análise de parcelas", + label: "Análise de parcelas", description: "Acompanhe parcelas em aberto", icon: , iconClass: "text-primary", }, { href: "/reports/establishments", - label: "estabelecimentos", + label: "Estabelecimentos", description: "Top gastos por estabelecimento", icon: , iconClass: "text-primary", diff --git a/src/shared/components/navigation/navbar/nav-menu.tsx b/src/shared/components/navigation/navbar/nav-menu.tsx index 4116a6c..b5fbff2 100644 --- a/src/shared/components/navigation/navbar/nav-menu.tsx +++ b/src/shared/components/navigation/navbar/nav-menu.tsx @@ -1,6 +1,7 @@ "use client"; import { RiDashboardLine, RiMenuLine } from "@remixicon/react"; + import { usePathname } from "next/navigation"; import { useState } from "react"; import { CalculatorDialogContent } from "@/shared/components/calculator/calculator-dialog"; @@ -28,7 +29,7 @@ import { NavPill } from "./nav-pill"; import { MobileTools, NavToolsDropdown } from "./nav-tools"; const triggerClass = - "h-8! rounded-md! px-2! py-0! text-sm! font-medium! bg-transparent! shadow-none! lowercase! [&_svg]:text-current! text-black/75! hover:text-black! hover:bg-black/10! focus:text-black! focus:bg-black/10! focus-visible:ring-black/20! data-[state=open]:text-black! data-[state=open]:bg-black/10!"; + "h-8! rounded-md! px-2! py-0! text-sm! font-medium! bg-transparent! shadow-none! capitalize! [&_svg]:text-current! text-black/75! hover:text-black! hover:bg-black/10! focus:text-black! focus:bg-black/10! focus-visible:ring-black/20! data-[state=open]:text-black! data-[state=open]:bg-black/10!"; const triggerActiveClass = "bg-black/15! text-black!"; @@ -42,9 +43,9 @@ export function NavMenu() { return ( <> {/* Desktop */} -