From 748d2e561c8e1cfcecf5addee34b9dc96c724272 Mon Sep 17 00:00:00 2001
From: Manmohan <66306483+manmohan659@users.noreply.github.com>
Date: Thu, 16 Apr 2026 20:08:55 -0400
Subject: [PATCH] fix(frontend): widen nav pill, default to dark theme (#41)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LandingNav was max-w-3xl which forced "How it works" and "Try
samosaChaat" to wrap on two lines. Bumps the pill to 1100px,
tightens the link padding, demotes the @ handle to lg+, and adds
whitespace-nowrap to every chip so nothing wraps again. Default
theme is now dark — the no-flash init script adds .dark unless the
user has explicitly stored 'light', and the useTheme hook seeds
from the same logic.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 services/frontend/app/layout.tsx            | 10 +++++-----
 services/frontend/components/LandingNav.tsx | 16 ++++++++--------
 services/frontend/hooks/useTheme.ts         |  6 +++---
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/services/frontend/app/layout.tsx b/services/frontend/app/layout.tsx
index cb0ea9e7..60fd3aa0 100644
--- a/services/frontend/app/layout.tsx
+++ b/services/frontend/app/layout.tsx
@@ -44,19 +44,19 @@ export const metadata: Metadata = {
 };
 
 export const viewport: Viewport = {
-  themeColor: '#fff8e7',
+  themeColor: '#0f0f10',
   width: 'device-width',
   initialScale: 1,
   viewportFit: 'cover',
 };
 
-// Set theme class before paint to avoid flash
+// Set theme class before paint to avoid flash. Default = dark; user can flip via the toggle.
 const themeInitScript = `
 (function(){try{
   var t=localStorage.getItem('theme');
-  if(t==='dark'){document.documentElement.classList.add('dark');}
-  else if(t==='light'){document.documentElement.classList.remove('dark');}
-}catch(e){}})();
+  if(t==='light'){document.documentElement.classList.remove('dark');}
+  else{document.documentElement.classList.add('dark');}
+}catch(e){document.documentElement.classList.add('dark');}})();
 `;
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
diff --git a/services/frontend/components/LandingNav.tsx b/services/frontend/components/LandingNav.tsx
index 28a07e0c..3e637721 100644
--- a/services/frontend/components/LandingNav.tsx
+++ b/services/frontend/components/LandingNav.tsx
@@ -10,12 +10,12 @@ export default function LandingNav() {
 
   return (
     <nav className="relative z-20 px-4 pt-5 flex justify-center">
-      <div className="flex items-center gap-2 px-2 py-2 rounded-full bg-white/80 dark:bg-ink-soft/80 backdrop-blur-md border border-cream-border/70 dark:border-ink-border shadow-[0_8px_30px_rgba(180,120,40,0.08)] w-full max-w-3xl">
+      <div className="flex items-center gap-1 px-2 py-1.5 rounded-full bg-white/80 dark:bg-ink-soft/80 backdrop-blur-md border border-cream-border/70 dark:border-ink-border shadow-[0_8px_30px_rgba(180,120,40,0.08)] w-full max-w-[1100px]">
         {/* Brand */}
         <Link
           href="/"
           aria-label="samosaChaat home"
-          className="flex items-center gap-2 pl-3 pr-4 py-1.5 rounded-full hover:bg-cream/60 dark:hover:bg-ink-elev transition-colors"
+          className="flex items-center gap-2 pl-3 pr-4 py-1.5 rounded-full hover:bg-cream/60 dark:hover:bg-ink-elev transition-colors whitespace-nowrap"
         >
           <svg viewBox="0 0 28 28" width={22} height={22} fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round" className="text-saffron">
             <path d="M4 22 L14 5 L24 22 Z" />
@@ -27,14 +27,14 @@ export default function LandingNav() {
         </Link>
 
         {/* Center links */}
-        <div className="hidden md:flex items-center gap-1 mx-auto text-[0.85rem] font-medium uppercase tracking-[0.08em] text-gray-600 dark:text-ink-text-soft">
-          <a href="#features" className="px-3 py-2 rounded-full hover:text-gray-900 dark:hover:text-ink-text transition-colors">Why</a>
-          <a href="#how" className="px-3 py-2 rounded-full hover:text-gray-900 dark:hover:text-ink-text transition-colors">How it works</a>
+        <div className="hidden md:flex items-center gap-1 mx-auto text-[0.78rem] font-medium uppercase tracking-[0.08em] text-gray-600 dark:text-ink-text-soft">
+          <a href="#features" className="px-3 py-2 rounded-full whitespace-nowrap hover:text-gray-900 dark:hover:text-ink-text transition-colors">Why</a>
+          <a href="#how" className="px-3 py-2 rounded-full whitespace-nowrap hover:text-gray-900 dark:hover:text-ink-text transition-colors">How it works</a>
           <a
             href="https://github.com/manmohan659/nanochat"
             target="_blank"
             rel="noopener noreferrer"
-            className="px-3 py-2 rounded-full hover:text-gray-900 dark:hover:text-ink-text transition-colors"
+            className="px-3 py-2 rounded-full whitespace-nowrap hover:text-gray-900 dark:hover:text-ink-text transition-colors"
           >
             Github
           </a>
@@ -46,13 +46,13 @@ export default function LandingNav() {
             href="https://instagram.com/samosachaat.art"
             target="_blank"
             rel="noopener noreferrer"
-            className="hidden sm:inline-flex px-4 py-2 rounded-full text-sm font-medium text-gray-700 dark:text-ink-text-soft hover:text-gray-900 dark:hover:text-ink-text transition-colors"
+            className="hidden lg:inline-flex px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap text-gray-700 dark:text-ink-text-soft hover:text-gray-900 dark:hover:text-ink-text transition-colors"
           >
             @samosachaat
           </a>
           <Link
             href={ctaHref}
-            className="px-5 py-2.5 rounded-full bg-gray-900 dark:bg-ink-text text-white dark:text-ink text-sm font-medium shadow-[0_8px_24px_rgba(0,0,0,0.18)] hover:shadow-[0_10px_28px_rgba(0,0,0,0.25)] hover:-translate-y-px transition-all"
+            className="px-5 py-2.5 rounded-full bg-gray-900 dark:bg-ink-text text-white dark:text-ink text-sm font-medium whitespace-nowrap shadow-[0_8px_24px_rgba(0,0,0,0.18)] hover:shadow-[0_10px_28px_rgba(0,0,0,0.25)] hover:-translate-y-px transition-all"
           >
             {ctaLabel}
           </Link>
diff --git a/services/frontend/hooks/useTheme.ts b/services/frontend/hooks/useTheme.ts
index 7b6f8070..e137b076 100644
--- a/services/frontend/hooks/useTheme.ts
+++ b/services/frontend/hooks/useTheme.ts
@@ -5,14 +5,14 @@ import { useCallback, useEffect, useState } from 'react';
 type Theme = 'light' | 'dark';
 
 function readTheme(): Theme {
-  if (typeof window === 'undefined') return 'light';
+  if (typeof window === 'undefined') return 'dark';
   const stored = localStorage.getItem('theme');
   if (stored === 'dark' || stored === 'light') return stored;
-  return 'light';
+  return 'dark';
 }
 
 export function useTheme() {
-  const [theme, setThemeState] = useState<Theme>('light');
+  const [theme, setThemeState] = useState<Theme>('dark');
 
   useEffect(() => {
     setThemeState(readTheme());