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
This commit is contained in:
Replit Agent
@@ -1409,7 +1409,7 @@ export default function ProtocolPage() {
|
|||||||
<MenuIcon size={20} />
|
<MenuIcon size={20} />
|
||||||
</Button>
|
</Button>
|
||||||
<div className="flex items-center gap-2 min-w-0">
|
<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} />
|
<Handshake size={20} />
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-lg font-bold text-slate-800 truncate">
|
<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">
|
<div className="flex flex-col md:flex-row md:items-stretch">
|
||||||
{menuOpen && (
|
{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]">
|
<nav className="flex md:flex-col gap-1 overflow-x-auto md:overflow-visible p-2 md:sticky md:top-[73px]">
|
||||||
{TABS.map((item) => {
|
{TABS.map((item) => {
|
||||||
const { key, label, icon: Icon } = item;
|
const { key, label, icon: Icon } = item;
|
||||||
@@ -1451,10 +1451,10 @@ export default function ProtocolPage() {
|
|||||||
onClick={() => setRoomsGroupOpen((v) => !v)}
|
onClick={() => setRoomsGroupOpen((v) => !v)}
|
||||||
aria-expanded={open}
|
aria-expanded={open}
|
||||||
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 text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
|
||||||
groupActive
|
groupActive
|
||||||
? "text-sky-300 font-medium"
|
? "text-sky-600 font-medium"
|
||||||
: "text-slate-300 hover:bg-white/10 hover:text-white",
|
: "text-slate-600 hover:bg-slate-200",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<DoorOpen size={16} className="shrink-0" />
|
<DoorOpen size={16} className="shrink-0" />
|
||||||
@@ -1473,10 +1473,10 @@ export default function ProtocolPage() {
|
|||||||
key={ck}
|
key={ck}
|
||||||
onClick={() => setTab(ck)}
|
onClick={() => setTab(ck)}
|
||||||
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 text-sm whitespace-nowrap transition-colors md:w-full md:justify-start md:ps-6",
|
||||||
tab === ck
|
tab === ck
|
||||||
? "bg-white text-[#0f1d3d] font-semibold"
|
? "bg-sky-500 text-white"
|
||||||
: "text-slate-300 hover:bg-white/10 hover:text-white",
|
: "text-slate-600 hover:bg-slate-200",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<CIcon size={16} className="shrink-0" />
|
<CIcon size={16} className="shrink-0" />
|
||||||
@@ -1499,10 +1499,10 @@ export default function ProtocolPage() {
|
|||||||
onClick={() => setGiftsGroupOpen((v) => !v)}
|
onClick={() => setGiftsGroupOpen((v) => !v)}
|
||||||
aria-expanded={open}
|
aria-expanded={open}
|
||||||
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 text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
|
||||||
groupActive
|
groupActive
|
||||||
? "text-sky-300 font-medium"
|
? "text-sky-600 font-medium"
|
||||||
: "text-slate-300 hover:bg-white/10 hover:text-white",
|
: "text-slate-600 hover:bg-slate-200",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<HandHeart size={16} className="shrink-0" />
|
<HandHeart size={16} className="shrink-0" />
|
||||||
@@ -1521,10 +1521,10 @@ export default function ProtocolPage() {
|
|||||||
key={ck}
|
key={ck}
|
||||||
onClick={() => setTab(ck)}
|
onClick={() => setTab(ck)}
|
||||||
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 text-sm whitespace-nowrap transition-colors md:w-full md:justify-start md:ps-6",
|
||||||
tab === ck
|
tab === ck
|
||||||
? "bg-white text-[#0f1d3d] font-semibold"
|
? "bg-sky-500 text-white"
|
||||||
: "text-slate-300 hover:bg-white/10 hover:text-white",
|
: "text-slate-600 hover:bg-slate-200",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<CIcon size={16} className="shrink-0" />
|
<CIcon size={16} className="shrink-0" />
|
||||||
@@ -1539,10 +1539,10 @@ export default function ProtocolPage() {
|
|||||||
key={key}
|
key={key}
|
||||||
onClick={() => setTab(key)}
|
onClick={() => setTab(key)}
|
||||||
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 text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
|
||||||
tab === key
|
tab === key
|
||||||
? "bg-white text-[#0f1d3d] font-semibold"
|
? "bg-sky-500 text-white"
|
||||||
: "text-slate-300 hover:bg-white/10 hover:text-white",
|
: "text-slate-600 hover:bg-slate-200",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Icon size={16} className="shrink-0" />
|
<Icon size={16} className="shrink-0" />
|
||||||
@@ -3155,7 +3155,7 @@ function DashboardView({
|
|||||||
onClick={() => goTab(c.tab)}
|
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"
|
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>
|
<div className="text-sm text-slate-500 mt-1">{c.label}</div>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user