fix: deduplicate nav bars and centralize layout

app/draft/[id]/draft-info-panel.tsx

@@ -214,7 +214,7 @@ export default function DraftInfoPanel({
                                 checked={autoPickEnabled}
                                 onChange={onToggleAutoPick}
                                 disabled={isPending}
-                                className="h-4 w-4 text-liquid-lava rounded focus:ring-liquid-lava"
+                                className="h-4 w-4 accent-primary rounded"
                             />
                         </div>
                     </CardContent>

app/draft/[id]/draft-queue.tsx

@@ -227,7 +227,7 @@ export default function DraftQueue({ teamId, draftId }: DraftQueueProps) {
 
                                                     <button
                                                         onClick={() => removeFromQueue(queueItem.id)}
-                                                        className="flex-shrink-0 p-1 text-dusty-grey hover:text-liquid-lava transition-colors"
+                                                        className="flex-shrink-0 p-1 text-muted-foreground hover:text-destructive transition-colors"
                                                         aria-label="Remove from queue"
                                                     >
                                                         <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">

app/draft/[id]/error.tsx

@@ -17,7 +17,7 @@ export default function DraftError({
   }, [error]);
 
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+    <div className="flex items-center justify-center p-4">
       <div className="max-w-md w-full text-center">
         <Card className="p-8">
           <CardContent className="p-0">

app/draft/[id]/loading.tsx

@@ -1,51 +1,41 @@
 export default function DraftLoading() {
   return (
-    <div className="min-h-screen bg-background">
-      <div className="w-full max-w-7xl mx-auto px-4">
-        {/* Header skeleton */}
-        <header className="flex justify-between items-center py-6 border-b border-border">
-          <div className="h-6 w-32 bg-card rounded animate-pulse"></div>
-          <div className="h-6 w-48 bg-card rounded animate-pulse"></div>
-          <div className="flex items-center gap-4">
-            <div className="h-8 w-8 bg-card rounded animate-pulse"></div>
-            <div className="h-8 w-24 bg-card rounded animate-pulse"></div>
-          </div>
-        </header>
+    <div className="w-full max-w-[1600px] mx-auto px-4">
+      <div className="py-6">
+        <div className="h-8 w-48 bg-card rounded animate-pulse"></div>
+      </div>
 
-        <main className="py-6">
-          {/* Draft room skeleton */}
-          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-            {/* Player list skeleton */}
-            <div className="lg:col-span-2 bg-card rounded-lg p-4 border border-border">
-              <div className="h-8 w-48 bg-muted rounded animate-pulse mb-4"></div>
-              <div className="space-y-3">
-                {[...Array(8)].map((_, i) => (
-                  <div key={i} className="h-12 bg-muted rounded animate-pulse"></div>
-                ))}
-              </div>
-            </div>
+      {/* Draft room skeleton */}
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        {/* Player list skeleton */}
+        <div className="lg:col-span-2 bg-card rounded-lg p-4 border border-border">
+          <div className="h-8 w-48 bg-muted rounded animate-pulse mb-4"></div>
+          <div className="space-y-3">
+            {[...Array(8)].map((_, i) => (
+              <div key={i} className="h-12 bg-muted rounded animate-pulse"></div>
+            ))}
+          </div>
+        </div>
 
-            {/* Draft order skeleton */}
-            <div className="bg-card rounded-lg p-4 border border-border">
-              <div className="h-8 w-32 bg-muted rounded animate-pulse mb-4"></div>
-              <div className="space-y-2">
-                {[...Array(6)].map((_, i) => (
-                  <div key={i} className="h-10 bg-muted rounded animate-pulse"></div>
-                ))}
-              </div>
-            </div>
+        {/* Draft order skeleton */}
+        <div className="bg-card rounded-lg p-4 border border-border">
+          <div className="h-8 w-32 bg-muted rounded animate-pulse mb-4"></div>
+          <div className="space-y-2">
+            {[...Array(6)].map((_, i) => (
+              <div key={i} className="h-10 bg-muted rounded animate-pulse"></div>
+            ))}
+          </div>
+        </div>
 
-            {/* Queue skeleton */}
-            <div className="bg-card rounded-lg p-4 border border-border">
-              <div className="h-8 w-24 bg-muted rounded animate-pulse mb-4"></div>
-              <div className="space-y-2">
-                {[...Array(4)].map((_, i) => (
-                  <div key={i} className="h-10 bg-muted rounded animate-pulse"></div>
-                ))}
-              </div>
-            </div>
+        {/* Queue skeleton */}
+        <div className="bg-card rounded-lg p-4 border border-border">
+          <div className="h-8 w-24 bg-muted rounded animate-pulse mb-4"></div>
+          <div className="space-y-2">
+            {[...Array(4)].map((_, i) => (
+              <div key={i} className="h-10 bg-muted rounded animate-pulse"></div>
+            ))}
           </div>
-        </main>
+        </div>
       </div>
     </div>
   );

app/draft/[id]/page.tsx

@@ -50,13 +50,13 @@ export default async function DraftPage({
 
     if (!userTeam && !isCommissioner) {
         return (
-            <div className="min-h-screen bg-background flex flex-col items-center justify-center p-4">
+            <div className="flex flex-col items-center justify-center p-4">
                 <h1 className="text-2xl font-bold text-foreground mb-4">
                     You don&apos;t have access to this draft
                 </h1>
-                <Link 
-                    href="/" 
-                    className="text-liquid-lava hover:opacity-80 transition-opacity font-medium"
+                <Link
+                    href="/"
+                    className="text-accent hover:opacity-80 transition-opacity font-medium"
                 >
                     Go Back to Home
                 </Link>
@@ -110,26 +110,22 @@ export default async function DraftPage({
     }
 
     return (
-        <div className="min-h-screen bg-background">
-            <div className="w-full max-w-[1600px] mx-auto px-4">
-                <div className="py-6">
-                    <h1 className="text-xl font-bold text-foreground">
-                        {draftSettings.leagues.name} Draft
-                    </h1>
-                </div>
+        <div className="w-full max-w-[1600px] mx-auto px-4">
+            <div className="py-6">
+                <h1 className="text-xl font-bold text-foreground">
+                    {draftSettings.leagues.name} Draft
+                </h1>
+            </div>
 
-                <main>
-                    <DraftRoom
+            <DraftRoom
                         draftSettings={draftSettings}
                         currentTeam={currentTeam}
                         isCommissioner={isCommissioner}
                         leagueTeams={leagueTeams}
                         userRankings={userRankings}
                         userTeamSettings={userTeamSettings}
                         ncaaTeamInfo={ncaaTeamInfo}
-                    />
-                </main>
-            </div>
+                />
         </div>
     );
 }

app/error.tsx

@@ -17,7 +17,7 @@ export default function Error({
   }, [error]);
 
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+    <div className="flex items-center justify-center p-4">
       <div className="max-w-md w-full text-center">
         <Card className="p-8">
           <CardContent className="p-0">

app/layout.tsx

@@ -23,7 +23,7 @@ export default function RootLayout({
   return (
     <html lang="en" className={cn("font-sans", geist.variable)}>
       <ThemeInitializer />
-      <body className={inter.className}>
+      <body className={`${inter.className} min-h-screen bg-background`}>
         <a href="#main-content" className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md focus:text-sm">
           Skip to content
         </a>

app/league/[id]/error.tsx

@@ -17,7 +17,7 @@ export default function LeagueError({
   }, [error]);
 
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+    <div className="flex items-center justify-center p-4">
       <div className="max-w-md w-full text-center">
         <Card className="p-8">
           <CardContent className="p-0">

app/league/[id]/league-home.tsx

@@ -220,7 +220,7 @@ export default function LeagueHome({ teams, league_id, league, draftSettings, is
                             <div className="space-y-2">
                                 <Link
                                     href={`${league_id}/team/${team.id}`}
-                                    className="text-lg font-bold text-foreground hover:text-liquid-lava transition-colors"
+                                    className="text-lg font-bold text-foreground hover:text-primary transition-colors"
                                 >
                                     {team.name}
                                 </Link>
@@ -242,7 +242,7 @@ export default function LeagueHome({ teams, league_id, league, draftSettings, is
                                         {Number(team.weeklyScores[week] || 0).toFixed(1)}
                                     </span>
                                 ))}
-                                <span className="w-20 text-center text-liquid-lava font-bold text-lg">
+                                <span className="w-20 text-center text-primary font-bold text-lg">
                                     {Number(team.totalScore).toFixed(1)}
                                 </span>
                             </div>

app/league/[id]/loading.tsx

@@ -1,34 +1,21 @@
 export default function LeagueLoading() {
   return (
-    <div className="min-h-screen bg-background">
-      <div className="w-full max-w-6xl mx-auto px-4">
-        {/* Header skeleton */}
-        <header className="flex justify-between items-center py-6 border-b border-border">
-          <div className="h-8 w-48 bg-card rounded animate-pulse"></div>
-          <div className="flex items-center gap-4">
-            <div className="h-8 w-8 bg-card rounded animate-pulse"></div>
-            <div className="h-8 w-24 bg-card rounded animate-pulse"></div>
-          </div>
-        </header>
-
-        <main className="py-6">
-          {/* League header skeleton */}
-          <div className="mb-8">
-            <div className="h-10 w-64 bg-card rounded animate-pulse mb-2"></div>
-            <div className="h-5 w-32 bg-card rounded animate-pulse"></div>
-          </div>
+    <div className="w-full max-w-4xl mx-auto px-4">
+      <div className="py-6">
+        <div className="h-8 w-48 bg-card rounded animate-pulse"></div>
+      </div>
 
-          {/* Teams grid skeleton */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {[...Array(6)].map((_, i) => (
-              <div key={i} className="bg-card rounded-lg p-4 border border-border">
-                <div className="h-6 w-32 bg-muted rounded animate-pulse mb-3"></div>
-                <div className="h-4 w-24 bg-muted rounded animate-pulse mb-2"></div>
-                <div className="h-4 w-20 bg-muted rounded animate-pulse"></div>
-              </div>
-            ))}
-          </div>
-        </main>
+      <div className="bg-card rounded-xl p-6 shadow-lg">
+        {/* Teams grid skeleton */}
+        <div className="space-y-4">
+          {[...Array(6)].map((_, i) => (
+            <div key={i} className="flex items-center gap-4 p-3 rounded-lg border border-border">
+              <div className="h-6 w-32 bg-muted rounded animate-pulse"></div>
+              <div className="h-4 w-24 bg-muted rounded animate-pulse"></div>
+              <div className="ml-auto h-6 w-16 bg-muted rounded animate-pulse"></div>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

app/league/[id]/page.tsx

@@ -21,13 +21,13 @@ export default async function League(props: { params: Promise<{ id: LeagueID }>
     const leagueId = params.id;
     if (!leagueId) {
         return (
-            <div className="min-h-screen bg-background flex flex-col items-center justify-center p-4">
+            <div className="flex flex-col items-center justify-center p-4">
                 <h1 className="text-2xl font-bold text-foreground mb-4">
                     Error: Invalid League
                 </h1>
-                <Link 
-                    href="/" 
-                    className="text-liquid-lava hover:opacity-80 transition-opacity font-medium"
+                <Link
+                    href="/"
+                    className="text-accent hover:opacity-80 transition-opacity font-medium"
                 >
                     Go Back to Home
                 </Link>
@@ -211,26 +211,22 @@ export default async function League(props: { params: Promise<{ id: LeagueID }>
     const isCommissioner = user.id === leagueData.commish;
 
     return (
-        <div className="min-h-screen bg-background">
-            <div className="w-full max-w-4xl mx-auto px-4">
-                <div className="py-6">
-                    <h1 className="text-xl font-bold text-foreground">
-                        {leagueData.name}
-                    </h1>
-                </div>
-
-                <main>
-                    <div className="bg-card rounded-xl p-6 shadow-lg">
-                        <LeagueHome
-                            teams={teams}
-                            league_id={params.id}
-                            league={leagueData}
-                            draftSettings={draftSettingsData}
-                            isCommissioner={isCommissioner}
-                            weeks={sortedWeeks}
-                        />
-                    </div>
-                </main>
+        <div className="w-full max-w-4xl mx-auto px-4">
+            <div className="py-6">
+                <h1 className="text-xl font-bold text-foreground">
+                    {leagueData.name}
+                </h1>
+            </div>
+
+            <div className="bg-card rounded-xl p-6 shadow-lg">
+                <LeagueHome
+                    teams={teams}
+                    league_id={params.id}
+                    league={leagueData}
+                    draftSettings={draftSettingsData}
+                    isCommissioner={isCommissioner}
+                    weeks={sortedWeeks}
+                />
             </div>
         </div>
     );

app/league/[id]/team/[teamid]/page.tsx

@@ -3,8 +3,6 @@
 // league/[id]/team/[teamid]/page.tsx
 import { createClient } from "../../../../utils/supabase/server";
 import { redirect } from 'next/navigation';
-import AuthButtonServer from '../../../../auth-button-server';
-import ThemeToggle from '../../../../theme-toggle';
 import Link from 'next/link';
 import OneTeam from './one-team';
 import SearchPage from './search-page';
@@ -27,13 +25,11 @@ export default async function Team(props: { params: Promise<{ teamid: TeamID }>
     const teamId = params.teamid;
     if (!teamId) {
         return (
-            <div className="min-h-screen bg-background">
-                <div className="max-w-xl mx-auto p-6">
-                    <h1 className="text-foreground text-2xl font-bold mb-4">Error, invalid team</h1>
-                    <Link href="/" className="text-accent hover:opacity-80 transition-opacity">
-                        Go Back to Home
-                    </Link>
-                </div>
+            <div className="max-w-xl mx-auto p-6">
+                <h1 className="text-foreground text-2xl font-bold mb-4">Error, invalid team</h1>
+                <Link href="/" className="text-accent hover:opacity-80 transition-opacity">
+                    Go Back to Home
+                </Link>
             </div>
         );
     }
@@ -147,32 +143,16 @@ export default async function Team(props: { params: Promise<{ teamid: TeamID }>
     const isCommissioner = user.id === team.leagues?.commish;
     const isAuthorized = isOwner || isCommissioner;
 
-    const baseLayout = (content: React.ReactNode) => (
-        <div className="min-h-screen bg-background">
-            <div className="max-w-xl mx-auto">
-                <nav className="flex justify-between items-center px-6 py-4 border-b border-border">
-                    <Link href="/" className="text-lg font-bold text-foreground hover:text-accent transition-colors">
-                        Home
-                    </Link>
-                    <Link 
-                        href={`/league/${team.leagues?.id}`} 
-                        className="text-lg font-bold text-foreground hover:text-accent transition-colors"
-                    >
-                        League Home
+    return (
+        <div className="w-full max-w-xl mx-auto px-4">
+            <div className="py-6">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
+                    <Link href={`/league/${team.leagues?.id}`} className="hover:text-foreground transition-colors">
+                        {team.leagues?.name || 'League'}
                     </Link>
-                    <div className="flex items-center gap-4">
-                        <ThemeToggle />
-                        <AuthButtonServer />
-                    </div>
-                </nav>
-                {content}
-            </div>
-        </div>
-    );
-
-    const mainContent = (
-        <div className="p-6">
-            <div className="mb-6">
+                    <span>/</span>
+                    <span className="text-foreground">{team.name}</span>
+                </div>
                 <TeamHeader team={team} isAuthorized={isAuthorized} isOwner={isOwner} isCommissioner={isCommissioner} />
                 <h2 className="text-muted-foreground">{teamData.owner?.full_name || 'Unclaimed'}</h2>
             </div>
@@ -201,6 +181,4 @@ export default async function Team(props: { params: Promise<{ teamid: TeamID }>
             )}
         </div>
     );
-
-    return baseLayout(mainContent);
 }