From 3ed91778b203dea1b851638656556c8b1287d0b1 Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Thu, 9 Jul 2026 06:15:16 +0000
Subject: [PATCH] Task #720: Dark navy protocol sidebar menu

- protocol.tsx sidebar nav (~lines 1413-1543): the tabs menu now sits on a
  dark navy panel (rounded-xl bg-[#0f1d3d] p-2) matching the user's reference
  image, clearly separated from the light page background.
- Item styles adapted for the dark background:
  - Active tab: white pill with navy text (bg-white text-[#0f1d3d] font-semibold).
  - Inactive tabs: text-slate-300 with hover:bg-white/10 hover:text-white.
  - Group headers (rooms/gifts): active = text-sky-300, inactive same as tabs.
- No logic changes (TABS, permissions, group collapse untouched); mobile
  horizontal scroll mode keeps the same dark panel.
- tsc --noEmit clean. Style-only change, no API/i18n changes.
---
 artifacts/tx-os/src/pages/protocol.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index c2c00fd0..7259b482 100644
--- a/artifacts/tx-os/src/pages/protocol.tsx
+++ b/artifacts/tx-os/src/pages/protocol.tsx
@@ -1409,7 +1409,7 @@ export default function ProtocolPage() {
 
       <div className="max-w-6xl mx-auto px-4 py-5 flex flex-col md:flex-row gap-4 md:gap-6">
         <aside className="md:w-56 shrink-0">
-          <nav className="flex md:flex-col gap-1 overflow-x-auto md:overflow-visible pb-2 md:pb-0 md:sticky md:top-20">
+          <nav className="flex md:flex-col gap-1 overflow-x-auto md:overflow-visible md:sticky md:top-20 rounded-xl bg-[#0f1d3d] p-2">
             {TABS.map((item) => {
               const { key, label, icon: Icon } = item;
               if (key === "issues") return null;
@@ -1440,8 +1440,8 @@ export default function ProtocolPage() {
                       className={cn(
                         "flex items-center gap-2 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
                         groupActive
-                          ? "text-sky-600 font-medium"
-                          : "text-slate-600 hover:bg-slate-100",
+                          ? "text-sky-300 font-medium"
+                          : "text-slate-300 hover:bg-white/10 hover:text-white",
                       )}
                     >
                       <DoorOpen size={16} className="shrink-0" />
@@ -1462,8 +1462,8 @@ export default function ProtocolPage() {
                           className={cn(
                             "flex items-center gap-2 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition-colors md:w-full md:justify-start md:ps-6",
                             tab === ck
-                              ? "bg-sky-500 text-white"
-                              : "text-slate-600 hover:bg-slate-100",
+                              ? "bg-white text-[#0f1d3d] font-semibold"
+                              : "text-slate-300 hover:bg-white/10 hover:text-white",
                           )}
                         >
                           <CIcon size={16} className="shrink-0" />
@@ -1488,8 +1488,8 @@ export default function ProtocolPage() {
                       className={cn(
                         "flex items-center gap-2 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
                         groupActive
-                          ? "text-sky-600 font-medium"
-                          : "text-slate-600 hover:bg-slate-100",
+                          ? "text-sky-300 font-medium"
+                          : "text-slate-300 hover:bg-white/10 hover:text-white",
                       )}
                     >
                       <HandHeart size={16} className="shrink-0" />
@@ -1510,8 +1510,8 @@ export default function ProtocolPage() {
                           className={cn(
                             "flex items-center gap-2 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition-colors md:w-full md:justify-start md:ps-6",
                             tab === ck
-                              ? "bg-sky-500 text-white"
-                              : "text-slate-600 hover:bg-slate-100",
+                              ? "bg-white text-[#0f1d3d] font-semibold"
+                              : "text-slate-300 hover:bg-white/10 hover:text-white",
                           )}
                         >
                           <CIcon size={16} className="shrink-0" />
@@ -1528,8 +1528,8 @@ export default function ProtocolPage() {
                   className={cn(
                     "flex items-center gap-2 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
                     tab === key
-                      ? "bg-sky-500 text-white"
-                      : "text-slate-600 hover:bg-slate-100",
+                      ? "bg-white text-[#0f1d3d] font-semibold"
+                      : "text-slate-300 hover:bg-white/10 hover:text-white",
                   )}
                 >
                   <Icon size={16} className="shrink-0" />