old4ever/local-cal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(layout): switch to Geist fonts, redesign header, default to dark theme

Browse Source 
- Replace Magra with Geist Mono font
- Rename font variables to geistSans/geistMono
- Apply both font variables to body
- Redesign sticky header with glass-strong and CalendarDays icon
- Wrap main content in max-w-4xl centered container
- Add glass-strong className to Toaster
- Default theme changed to dark
This commit is contained in:
Dmytro Stanchiev
2026-04-08 00:56:03 -04:00
parent 22fe3ec97b
commit c6086bdcc7
1 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/layout.tsx
View File

@@ -1,21 +1,21 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Magra } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { CalendarDays } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { ThemeProvider } from "next-themes"; import { ThemeProvider } from "next-themes";
import { ModeToggle } from "@/components/mode-toggle"; import { ModeToggle } from "@/components/mode-toggle";
import SignIn from "@/components/sign-in"; import SignIn from "@/components/sign-in";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
const geist = Geist({ const geistSans = Geist({
subsets: ["latin", "cyrillic"], subsets: ["latin", "cyrillic"],
variable: "--font-geist-sans", variable: "--font-geist-sans",
}); });
const magra = Magra({ const geistMono = Geist_Mono({
subsets: ["latin"], subsets: ["latin"],
weight: "400", variable: "--font-geist-mono",
variable: "--font-cascadia-code",
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -32,27 +32,41 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body <body
className={`${geist.variable} antialiased min-h-screen flex flex-col dark:text-gray-300 --color-background`} className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased min-h-screen flex flex-col`}
> >
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="dark"
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
> >
<header className="dark:text-white text-gray-900 px-4 py-3 font-bold flex justify-between items-center-safe"> <header className="sticky top-0 z-50 glass-strong">
<Link href={"/"}> <div className="max-w-4xl mx-auto flex items-center justify-between px-4 sm:px-6 h-14">
<p className={`${magra.variable}`}> <Link
{(metadata.title as string) || "iCal PWA"} href="/"
</p> className="flex items-center gap-2.5 font-semibold text-foreground tracking-tight"
</Link> >
<div className="flex flex-row gap-2"> <CalendarDays className="h-5 w-5 text-primary" />
<SignIn /> <span>{(metadata.title as string) || "iCal PWA"}</span>
<ModeToggle /> </Link>
<div className="flex items-center gap-2">
<SignIn />
<ModeToggle />
</div>
</div> </div>
</header> </header>
<main className="flex-1 p-4">{children}</main> <main className="flex-1">
<Toaster closeButton richColors /> <div className="max-w-4xl mx-auto px-4 sm:px-6 py-6">
{children}
</div>
</main>
<Toaster
closeButton
richColors
toastOptions={{
className: "glass-strong",
}}
/>
</ThemeProvider> </ThemeProvider>
</body> </body>
</html> </html>