git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-06-10 07:16:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(ui): update auth pages layout and navigation capitalization

Browse Source 
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.
This commit is contained in:
Alexsandro
2026-04-15 14:35:26 -03:00
parent 98fe6a0f4f
commit 22a88de993
12 changed files with 114 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/features/auth/components/auth-card-shell.tsx
View File

@@ -5,8 +5,9 @@ import AuthSidebar from "./auth-sidebar";
export function AuthCardShell({ children }: PropsWithChildren) {
return (
<Card className="relative overflow-hidden p-0">
<Card className="relative overflow-hidden rounded-2xl md:rounded-[2rem] p-0 shadow-lg border-primary/10">
<div className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--color-primary)_0%,transparent_70%)] opacity-10 blur-3xl animate-blob mix-blend-multiply" />
<DotPattern
width={17}
height={17}
@@ -15,11 +16,13 @@ export function AuthCardShell({ children }: PropsWithChildren) {
cr={1.3}
className="text-primary/8 mask-[linear-gradient(to_bottom,black,transparent_84%)]"
/>
<div className="absolute inset-0 bg-linear-to-br from-primary/6 via-transparent to-transparent" />
<div className="absolute inset-0 bg-linear-to-br from-primary/6 via-transparent to-transparent opacity-80" />
</div>
<CardContent className="relative z-10 grid gap-0 p-0 md:min-h-[640px] md:grid-cols-[1.05fr_0.95fr]">
<div className="flex bg-card/92 backdrop-blur-[1px]">{children}</div>
<CardContent className="relative z-10 grid gap-0 p-0 md:min-h-[640px] md:grid-cols-[1.05fr_0.95fr] overflow-hidden rounded-[inherit]">
<div className="flex bg-card/60 backdrop-blur-xl md:rounded-l-[2rem]">
{children}
</div>
<AuthSidebar />
</CardContent>
</Card>