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

Update dashboard styling to use navy for icons and numbers and adjust sidebar colors

Browse Source 
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
This commit is contained in:
Replit Agent
2026-07-09 07:54:32 +00:00
parent 4315988e78
commit c747bec99e
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/pages/protocol.tsx
+18 -18
View File
@@ -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>
))}