From 4cb1b156423816e6fc79bb1b3318e44a2fe30c6e Mon Sep 17 00:00:00 2001
From: Prad Nukala <prad@sonr.io>
Date: Mon, 5 Jan 2026 15:48:02 -0500
Subject: [PATCH] style(navbar): update styles to vercel design specification

---
 components/navbar.templ    | 61 +++++++++++++++++++++-----------------
 components/navbar_templ.go |  2 +-
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/components/navbar.templ b/components/navbar.templ
index ea3e441..ddde2ac 100644
--- a/components/navbar.templ
+++ b/components/navbar.templ
@@ -206,80 +206,85 @@ templ AppNavStyles() {
 			padding: 0;
 		}
 		wa-page::part(header) { border-bottom: 1px solid var(--wa-color-neutral-200); }
+		wa-page::part(subheader) { border-bottom: none; }
 		wa-page::part(main-content) { background: var(--wa-color-surface-alt); }
 
-		/* Header Bar */
+		/* Header Bar - Vercel style */
 		.app-header {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			height: 40px;
-			padding: 0 12px;
+			height: 48px;
+			padding: 0 16px;
 		}
 		.header-nav {
 			display: flex;
 			align-items: center;
-			gap: 2px;
+			gap: 0;
 		}
 		.nav-logo {
 			display: flex;
 			align-items: center;
-			gap: 4px;
-			padding: 4px 6px;
+			gap: 6px;
+			padding: 6px 8px;
 			text-decoration: none;
 			color: var(--wa-color-primary);
 			font-weight: 600;
-			font-size: 13px;
-			border-radius: 4px;
+			font-size: 14px;
+			border-radius: 6px;
 		}
 		.nav-logo:hover { background: var(--wa-color-neutral-100); }
-		.nav-logo wa-icon { font-size: 16px; }
-		.nav-sep { color: var(--wa-color-neutral-300); font-size: 14px; padding: 0 2px; }
+		.nav-logo wa-icon { font-size: 18px; }
+		.nav-sep { color: var(--wa-color-neutral-400); font-size: 18px; font-weight: 300; padding: 0 4px; }
 		.nav-btn {
 			display: flex;
 			align-items: center;
-			gap: 3px;
-			padding: 4px 6px;
+			gap: 4px;
+			padding: 6px 8px;
 			border: none;
 			background: none;
 			font: inherit;
-			font-size: 13px;
+			font-size: 14px;
 			font-weight: 500;
 			color: var(--wa-color-neutral-700);
-			border-radius: 4px;
+			border-radius: 6px;
 			cursor: pointer;
 		}
 		.nav-btn:hover { background: var(--wa-color-neutral-100); }
-		.nav-btn wa-icon { font-size: 10px; color: var(--wa-color-neutral-400); }
-		.menu-label { display: block; padding: 6px 12px; font-size: 11px; color: var(--wa-color-neutral-500); }
-		.user-info { padding: 8px 12px; }
-		.user-info strong { display: block; font-size: 13px; }
-		.user-info span { font-size: 11px; color: var(--wa-color-neutral-500); }
+		.nav-btn wa-icon { font-size: 12px; color: var(--wa-color-neutral-500); }
+		.menu-label { display: block; padding: 6px 12px; font-size: 12px; color: var(--wa-color-neutral-500); text-transform: uppercase; letter-spacing: 0.5px; }
+		.user-info { padding: 10px 14px; }
+		.user-info strong { display: block; font-size: 14px; }
+		.user-info span { font-size: 12px; color: var(--wa-color-neutral-500); }
 
-		/* Tab Bar */
+		/* Tab Bar - Vercel style: content-width tabs, left-aligned */
 		.tab-bar {
 			display: flex;
+			align-items: stretch;
 			gap: 0;
-			padding: 0 12px;
+			padding: 0 16px;
 			border-bottom: 1px solid var(--wa-color-neutral-200);
 		}
 		.tab {
-			display: flex;
+			display: inline-flex;
 			align-items: center;
-			gap: 6px;
-			padding: 8px 12px;
-			font-size: 13px;
+			gap: 8px;
+			padding: 10px 12px;
+			flex-shrink: 0;
+			width: auto;
+			font-size: 14px;
 			font-weight: 500;
 			color: var(--wa-color-neutral-600);
 			text-decoration: none;
 			border-bottom: 2px solid transparent;
 			margin-bottom: -1px;
+			transition: color 0.15s;
 		}
 		.tab:hover { color: var(--wa-color-neutral-900); }
-		.tab.active { color: var(--wa-color-primary); border-bottom-color: var(--wa-color-primary); }
-		.tab wa-icon { font-size: 14px; }
+		.tab.active { color: var(--wa-color-neutral-900); border-bottom-color: var(--wa-color-neutral-900); }
+		.tab wa-icon { font-size: 15px; }
 
 		/* Content */
-		.content-container { max-width: 1200px; margin: 0 auto; padding: 16px; }
+		.content-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
 	</style>
 }
diff --git a/components/navbar_templ.go b/components/navbar_templ.go
index 6ec8f18..137b490 100644
--- a/components/navbar_templ.go
+++ b/components/navbar_templ.go
@@ -521,7 +521,7 @@ func AppNavStyles() templ.Component {
 			templ_7745c5c3_Var25 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<style>\n\t\t/* Reset wa-page slots */\n\t\twa-page::part(header), wa-page::part(subheader) {\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tpadding: 0;\n\t\t}\n\t\twa-page::part(header) { border-bottom: 1px solid var(--wa-color-neutral-200); }\n\t\twa-page::part(main-content) { background: var(--wa-color-surface-alt); }\n\n\t\t/* Header Bar */\n\t\t.app-header {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\theight: 40px;\n\t\t\tpadding: 0 12px;\n\t\t}\n\t\t.header-nav {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 2px;\n\t\t}\n\t\t.nav-logo {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t\tpadding: 4px 6px;\n\t\t\ttext-decoration: none;\n\t\t\tcolor: var(--wa-color-primary);\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 13px;\n\t\t\tborder-radius: 4px;\n\t\t}\n\t\t.nav-logo:hover { background: var(--wa-color-neutral-100); }\n\t\t.nav-logo wa-icon { font-size: 16px; }\n\t\t.nav-sep { color: var(--wa-color-neutral-300); font-size: 14px; padding: 0 2px; }\n\t\t.nav-btn {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 3px;\n\t\t\tpadding: 4px 6px;\n\t\t\tborder: none;\n\t\t\tbackground: none;\n\t\t\tfont: inherit;\n\t\t\tfont-size: 13px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-700);\n\t\t\tborder-radius: 4px;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.nav-btn:hover { background: var(--wa-color-neutral-100); }\n\t\t.nav-btn wa-icon { font-size: 10px; color: var(--wa-color-neutral-400); }\n\t\t.menu-label { display: block; padding: 6px 12px; font-size: 11px; color: var(--wa-color-neutral-500); }\n\t\t.user-info { padding: 8px 12px; }\n\t\t.user-info strong { display: block; font-size: 13px; }\n\t\t.user-info span { font-size: 11px; color: var(--wa-color-neutral-500); }\n\n\t\t/* Tab Bar */\n\t\t.tab-bar {\n\t\t\tdisplay: flex;\n\t\t\tgap: 0;\n\t\t\tpadding: 0 12px;\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-200);\n\t\t}\n\t\t.tab {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 6px;\n\t\t\tpadding: 8px 12px;\n\t\t\tfont-size: 13px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-600);\n\t\t\ttext-decoration: none;\n\t\t\tborder-bottom: 2px solid transparent;\n\t\t\tmargin-bottom: -1px;\n\t\t}\n\t\t.tab:hover { color: var(--wa-color-neutral-900); }\n\t\t.tab.active { color: var(--wa-color-primary); border-bottom-color: var(--wa-color-primary); }\n\t\t.tab wa-icon { font-size: 14px; }\n\n\t\t/* Content */\n\t\t.content-container { max-width: 1200px; margin: 0 auto; padding: 16px; }\n\t</style>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<style>\n\t\t/* Reset wa-page slots */\n\t\twa-page::part(header), wa-page::part(subheader) {\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tpadding: 0;\n\t\t}\n\t\twa-page::part(header) { border-bottom: 1px solid var(--wa-color-neutral-200); }\n\t\twa-page::part(subheader) { border-bottom: none; }\n\t\twa-page::part(main-content) { background: var(--wa-color-surface-alt); }\n\n\t\t/* Header Bar - Vercel style */\n\t\t.app-header {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\theight: 48px;\n\t\t\tpadding: 0 16px;\n\t\t}\n\t\t.header-nav {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0;\n\t\t}\n\t\t.nav-logo {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 6px;\n\t\t\tpadding: 6px 8px;\n\t\t\ttext-decoration: none;\n\t\t\tcolor: var(--wa-color-primary);\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t.nav-logo:hover { background: var(--wa-color-neutral-100); }\n\t\t.nav-logo wa-icon { font-size: 18px; }\n\t\t.nav-sep { color: var(--wa-color-neutral-400); font-size: 18px; font-weight: 300; padding: 0 4px; }\n\t\t.nav-btn {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t\tpadding: 6px 8px;\n\t\t\tborder: none;\n\t\t\tbackground: none;\n\t\t\tfont: inherit;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-700);\n\t\t\tborder-radius: 6px;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.nav-btn:hover { background: var(--wa-color-neutral-100); }\n\t\t.nav-btn wa-icon { font-size: 12px; color: var(--wa-color-neutral-500); }\n\t\t.menu-label { display: block; padding: 6px 12px; font-size: 12px; color: var(--wa-color-neutral-500); text-transform: uppercase; letter-spacing: 0.5px; }\n\t\t.user-info { padding: 10px 14px; }\n\t\t.user-info strong { display: block; font-size: 14px; }\n\t\t.user-info span { font-size: 12px; color: var(--wa-color-neutral-500); }\n\n\t\t/* Tab Bar - Vercel style: content-width tabs, left-aligned */\n\t\t.tab-bar {\n\t\t\tdisplay: flex;\n\t\t\talign-items: stretch;\n\t\t\tgap: 0;\n\t\t\tpadding: 0 16px;\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-200);\n\t\t}\n\t\t.tab {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tgap: 8px;\n\t\t\tpadding: 10px 12px;\n\t\t\tflex-shrink: 0;\n\t\t\twidth: auto;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-600);\n\t\t\ttext-decoration: none;\n\t\t\tborder-bottom: 2px solid transparent;\n\t\t\tmargin-bottom: -1px;\n\t\t\ttransition: color 0.15s;\n\t\t}\n\t\t.tab:hover { color: var(--wa-color-neutral-900); }\n\t\t.tab.active { color: var(--wa-color-neutral-900); border-bottom-color: var(--wa-color-neutral-900); }\n\t\t.tab wa-icon { font-size: 15px; }\n\n\t\t/* Content */\n\t\t.content-container { max-width: 1200px; margin: 0 auto; padding: 24px; }\n\t</style>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}