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