rafraa/TX
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Task #720: Dark navy protocol sidebar menu

Browse Source 
- 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.
This commit is contained in:
Replit Agent
2026-07-09 06:15:16 +00:00
parent 406db18797
commit 3ed91778b2
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/pages/protocol.tsx
+11 -11
View File
@@ -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"> <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"> <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) => { {TABS.map((item) => {
const { key, label, icon: Icon } = item; const { key, label, icon: Icon } = item;
if (key === "issues") return null; if (key === "issues") return null;
@@ -1440,8 +1440,8 @@ export default function ProtocolPage() {
className={cn( 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 rounded-lg text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
groupActive groupActive
? "text-sky-600 font-medium" ? "text-sky-300 font-medium"
: "text-slate-600 hover:bg-slate-100", : "text-slate-300 hover:bg-white/10 hover:text-white",
)} )}
> >
<DoorOpen size={16} className="shrink-0" /> <DoorOpen size={16} className="shrink-0" />
@@ -1462,8 +1462,8 @@ export default function ProtocolPage() {
className={cn( 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 rounded-lg text-sm whitespace-nowrap transition-colors md:w-full md:justify-start md:ps-6",
tab === ck tab === ck
? "bg-sky-500 text-white" ? "bg-white text-[#0f1d3d] font-semibold"
: "text-slate-600 hover:bg-slate-100", : "text-slate-300 hover:bg-white/10 hover:text-white",
)} )}
> >
<CIcon size={16} className="shrink-0" /> <CIcon size={16} className="shrink-0" />
@@ -1488,8 +1488,8 @@ export default function ProtocolPage() {
className={cn( 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 rounded-lg text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
groupActive groupActive
? "text-sky-600 font-medium" ? "text-sky-300 font-medium"
: "text-slate-600 hover:bg-slate-100", : "text-slate-300 hover:bg-white/10 hover:text-white",
)} )}
> >
<HandHeart size={16} className="shrink-0" /> <HandHeart size={16} className="shrink-0" />
@@ -1510,8 +1510,8 @@ export default function ProtocolPage() {
className={cn( 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 rounded-lg text-sm whitespace-nowrap transition-colors md:w-full md:justify-start md:ps-6",
tab === ck tab === ck
? "bg-sky-500 text-white" ? "bg-white text-[#0f1d3d] font-semibold"
: "text-slate-600 hover:bg-slate-100", : "text-slate-300 hover:bg-white/10 hover:text-white",
)} )}
> >
<CIcon size={16} className="shrink-0" /> <CIcon size={16} className="shrink-0" />
@@ -1528,8 +1528,8 @@ export default function ProtocolPage() {
className={cn( 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 rounded-lg text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
tab === key tab === key
? "bg-sky-500 text-white" ? "bg-white text-[#0f1d3d] font-semibold"
: "text-slate-600 hover:bg-slate-100", : "text-slate-300 hover:bg-white/10 hover:text-white",
)} )}
> >
<Icon size={16} className="shrink-0" /> <Icon size={16} className="shrink-0" />