From c747bec99e15521cd5ca31135e13d4d6521c8bdf Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Thu, 9 Jul 2026 07:54:32 +0000
Subject: [PATCH] Update dashboard styling to use navy for icons and numbers
 and adjust sidebar colors

Modify the ProtocolPage component to change the background and border of the sidebar, update the active and inactive link styles, and change the primary icon color to navy.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: bb2276a0-b7c6-4f0c-b8ab-29ed0f8d8aec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/ZgwFc55
Replit-Helium-Checkpoint-Created: true
---
 artifacts/tx-os/src/pages/protocol.tsx | 36 +++++++++++++-------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index a19194fc..ca7ab2e3 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() {
             <MenuIcon size={20} />
           </Button>
           <div className="flex items-center gap-2 min-w-0">
-            <div className="h-9 w-9 rounded-xl bg-sky-500 text-white flex items-center justify-center shrink-0">
+            <div className="h-9 w-9 rounded-xl bg-[#0f1d3d] text-white flex items-center justify-center shrink-0">
               <Handshake size={20} />
             </div>
             <h1 className="text-lg font-bold text-slate-800 truncate">
@@ -1421,7 +1421,7 @@ export default function ProtocolPage() {
 
       <div className="flex flex-col md:flex-row md:items-stretch">
         {menuOpen && (
-        <aside className="md:w-56 shrink-0 bg-[#0f1d3d] md:min-h-[calc(100vh-61px)]">
+        <aside className="md:w-56 shrink-0 bg-slate-100 border-b md:border-b-0 md:border-e border-slate-200 md:min-h-[calc(100vh-61px)]">
           <nav className="flex md:flex-col gap-1 overflow-x-auto md:overflow-visible p-2 md:sticky md:top-[73px]">
             {TABS.map((item) => {
               const { key, label, icon: Icon } = item;
@@ -1451,10 +1451,10 @@ export default function ProtocolPage() {
                       onClick={() => setRoomsGroupOpen((v) => !v)}
                       aria-expanded={open}
                       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",
+                        "flex items-center gap-2 px-3 py-2 text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
                         groupActive
-                          ? "text-sky-300 font-medium"
-                          : "text-slate-300 hover:bg-white/10 hover:text-white",
+                          ? "text-sky-600 font-medium"
+                          : "text-slate-600 hover:bg-slate-200",
                       )}
                     >
                       <DoorOpen size={16} className="shrink-0" />
@@ -1473,10 +1473,10 @@ export default function ProtocolPage() {
                           key={ck}
                           onClick={() => setTab(ck)}
                           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",
+                            "flex items-center gap-2 px-3 py-2 text-sm whitespace-nowrap transition-colors md:w-full md:justify-start md:ps-6",
                             tab === ck
-                              ? "bg-white text-[#0f1d3d] font-semibold"
-                              : "text-slate-300 hover:bg-white/10 hover:text-white",
+                              ? "bg-sky-500 text-white"
+                              : "text-slate-600 hover:bg-slate-200",
                           )}
                         >
                           <CIcon size={16} className="shrink-0" />
@@ -1499,10 +1499,10 @@ export default function ProtocolPage() {
                       onClick={() => setGiftsGroupOpen((v) => !v)}
                       aria-expanded={open}
                       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",
+                        "flex items-center gap-2 px-3 py-2 text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
                         groupActive
-                          ? "text-sky-300 font-medium"
-                          : "text-slate-300 hover:bg-white/10 hover:text-white",
+                          ? "text-sky-600 font-medium"
+                          : "text-slate-600 hover:bg-slate-200",
                       )}
                     >
                       <HandHeart size={16} className="shrink-0" />
@@ -1521,10 +1521,10 @@ export default function ProtocolPage() {
                           key={ck}
                           onClick={() => setTab(ck)}
                           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",
+                            "flex items-center gap-2 px-3 py-2 text-sm whitespace-nowrap transition-colors md:w-full md:justify-start md:ps-6",
                             tab === ck
-                              ? "bg-white text-[#0f1d3d] font-semibold"
-                              : "text-slate-300 hover:bg-white/10 hover:text-white",
+                              ? "bg-sky-500 text-white"
+                              : "text-slate-600 hover:bg-slate-200",
                           )}
                         >
                           <CIcon size={16} className="shrink-0" />
@@ -1539,10 +1539,10 @@ export default function ProtocolPage() {
                   key={key}
                   onClick={() => setTab(key)}
                   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",
+                    "flex items-center gap-2 px-3 py-2 text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
                     tab === key
-                      ? "bg-white text-[#0f1d3d] font-semibold"
-                      : "text-slate-300 hover:bg-white/10 hover:text-white",
+                      ? "bg-sky-500 text-white"
+                      : "text-slate-600 hover:bg-slate-200",
                   )}
                 >
                   <Icon size={16} className="shrink-0" />
@@ -3155,7 +3155,7 @@ function DashboardView({
           onClick={() => goTab(c.tab)}
           className="bg-white rounded-2xl border border-slate-200 p-4 text-start hover:border-sky-300 hover:shadow-sm transition"
         >
-          <div className="text-3xl font-bold text-sky-600">{c.value ?? "—"}</div>
+          <div className="text-3xl font-bold text-[#0f1d3d]">{c.value ?? "—"}</div>
           <div className="text-sm text-slate-500 mt-1">{c.label}</div>
         </button>
       ))}