remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: top-header now uses --color-navbar background and --color-navbar-text for text, so the whole top bar matches the picked navbar color

Browse Source
This commit is contained in:
remco committed 2026-07-01 16:03:49 +02:00
1 parent 5b7bd1ebb0
commit f2f340fc83
1 file changed
+12 -12
Download Patch File Download Diff File Expand all files Collapse all files
src/components/top-header.tsx
+12 -12
View File
@@ -6,15 +6,15 @@ import { siteSettings } from "@/lib/services/site-settings";
function Currency({ icon, amount, label }: { icon: string; amount: number; label: string }) { function Currency({ icon, amount, label }: { icon: string; amount: number; label: string }) {
return ( return (
<div className="flex gap-x-3 sm:gap-x-2 items-center"> <div className="flex gap-x-3 sm:gap-x-2 items-center">
<div className={`h-[25px] w-[25px] rounded-full outline-offset-[3px] ${icon}`} /> <div className={`h-[25px] w-[25px] rounded-full outline-offset-[3px] ${icon}`} />
<div style={{ color: "var(--color-text-muted)" }}> <div style={{ color: "var(--color-navbar-text, var(--color-text-muted))" }}>
<span className="font-semibold" style={{ color: "var(--color-text)" }}> <span className="font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>
{amount.toLocaleString()} {amount.toLocaleString()}
</span>{" "} </span>{" "}
<span>{label}</span> <span>{label}</span>
</div> </div>
</div> </div>
); );
} }
@@ -49,7 +49,7 @@ export async function TopHeader() {
const isStaff = (session.user.rank ?? 0) >= 7; const isStaff = (session.user.rank ?? 0) >= 7;
return ( return (
<div style={{ backgroundColor: "var(--color-surface)" }}> <div style={{ backgroundColor: "var(--color-navbar)" }}>
<div className="max-w-7xl min-h-[60px] px-4 flex items-center justify-between mx-auto"> <div className="max-w-7xl min-h-[60px] px-4 flex items-center justify-between mx-auto">
<div className="flex gap-x-6"> <div className="flex gap-x-6">
<Currency icon="nav-credit-icon" amount={credits} label="Credits" /> <Currency icon="nav-credit-icon" amount={credits} label="Credits" />
@@ -62,7 +62,7 @@ export async function TopHeader() {
<details className="relative"> <details className="relative">
<summary <summary
className="list-none cursor-pointer font-semibold [&::-webkit-details-marker]:hidden" className="list-none cursor-pointer font-semibold [&::-webkit-details-marker]:hidden"
style={{ color: "var(--color-text)" }} style={{ color: "var(--color-navbar-text, var(--color-text))" }}
> >
Administration Administration
</summary> </summary>
@@ -87,7 +87,7 @@ export async function TopHeader() {
<summary className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden"> <summary className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden">
{/* biome-ignore lint/performance/noImgElement: external imager */} {/* biome-ignore lint/performance/noImgElement: external imager */}
<img className="w-[54px] h-[62px] bg-no-repeat bg-center" src={avatar} alt="" /> <img className="w-[54px] h-[62px] bg-no-repeat bg-center" src={avatar} alt="" />
<span className="-ml-2 font-semibold">{session.user.name}</span> <span className="-ml-2 font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{session.user.name}</span>
</summary> </summary>
<div <div
className="absolute right-0 mt-1 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md" className="absolute right-0 mt-1 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"