Skip to content

fix(theme): light-mode contrast stragglers (DEVNET pill, dim chips, dashboard preview) #2432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dcccrypto merged 1 commit into from
Jul 16, 2026
Merged

fix(theme): light-mode contrast stragglers (DEVNET pill, dim chips, dashboard preview) #2432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions app/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,9 +240,12 @@ export default function DashboardPage() {
Your personal command centre for trading on Percolator
</p>

{/* Blurred preview */}
{/* Ghost preview of the dashboard layout behind the connect gate.
Crisp at reduced opacity, NOT blurred: blur-sm + near-white
panels on the light theme's white bg dissolved into shapeless
smudges that read as a rendering glitch rather than a preview. */}
<div className="relative">
<div className="pointer-events-none select-none blur-sm opacity-40">
<div className="pointer-events-none select-none opacity-40">
<div className="grid grid-cols-2 gap-px border border-[var(--border)] bg-[var(--border)] lg:grid-cols-4">
{[1, 2, 3, 4].map((i) => (
<div key={i} className="bg-[var(--panel-bg)] p-5 h-20" />
Expand Down
12 changes: 6 additions & 6 deletions app/app/trade/[slab]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function UsdToggleButton() {
"rounded-sm px-2 py-0.5 text-[9px] font-medium transition-colors duration-150",
!showUsd
? "bg-[var(--accent)]/10 text-[var(--accent)]"
: "text-[var(--text-dim)] hover:text-[var(--text-secondary)]",
: "text-[var(--text-muted)] hover:text-[var(--text-secondary)]",
].join(" ")}
>
tokens
Expand All @@ -104,7 +104,7 @@ function UsdToggleButton() {
"rounded-sm px-2 py-0.5 text-[9px] font-medium transition-colors duration-150",
showUsd
? "bg-[var(--accent)]/10 text-[var(--accent)]"
: "text-[var(--text-dim)] hover:text-[var(--text-secondary)]",
: "text-[var(--text-muted)] hover:text-[var(--text-secondary)]",
].join(" ")}
>
usd
Expand All @@ -124,7 +124,7 @@ function CopyButton({ text }: { text: string }) {
toast("Address copied to clipboard!", "success");
setTimeout(() => setCopied(false), 1500);
}}
className="inline-flex items-center text-[var(--text-dim)] transition-colors duration-150 hover:text-[var(--accent)]"
className="inline-flex items-center text-[var(--text-muted)] transition-colors duration-150 hover:text-[var(--accent)]"
title="Copy address"
>
{copied ? (
Expand Down Expand Up @@ -301,7 +301,7 @@ function MobileOrderSheet({ slab }: { slab: string }) {
>
<div className="sticky top-0 z-10 flex items-center justify-between border-b border-[var(--border)]/50 bg-[var(--bg)] px-3 py-2">
<span className="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)]">Order ticket</span>
<button onClick={() => setOpen(false)} className="text-[var(--text-dim)] transition-colors duration-150 hover:text-[var(--text)]" aria-label="Close">
<button onClick={() => setOpen(false)} className="text-[var(--text-muted)] transition-colors duration-150 hover:text-[var(--text)]" aria-label="Close">
✕
</button>
</div>
Expand Down Expand Up @@ -517,7 +517,7 @@ function TradePageInner({ slab }: { slab: string }) {
Shown on all breakpoints (the pre-rebuild page only showed this on
mobile; desktop had no equivalent, which was inconsistent). */}
<div className="flex items-center gap-3 border-b border-[var(--border)]/30 px-3 py-1.5 overflow-x-auto whitespace-nowrap scrollbar-none">
<span className="flex items-center gap-1 text-[10px] text-[var(--text-dim)]" style={{ fontFamily: "var(--font-mono)" }}>
<span className="flex items-center gap-1 text-[10px] text-[var(--text-muted)]" style={{ fontFamily: "var(--font-mono)" }}>
{shortAddress}
<CopyButton text={slab} />
</span>
Expand All @@ -542,7 +542,7 @@ function TradePageInner({ slab }: { slab: string }) {
<UsdToggleButton />
<a
href={`/analytics/${slab}`}
className="ml-auto shrink-0 text-[10px] uppercase tracking-[0.12em] text-[var(--text-dim)] transition-colors duration-150 hover:text-[var(--accent)]"
className="ml-auto shrink-0 text-[10px] uppercase tracking-[0.12em] text-[var(--text-muted)] transition-colors duration-150 hover:text-[var(--accent)]"
>
Analytics →
</a>
Expand Down
7 changes: 5 additions & 2 deletions app/components/layout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,12 +207,15 @@ export const Header: FC = () => {

{/* Right */}
<div className="ml-auto flex shrink-0 items-center gap-2 sm:gap-2.5">
{/* DEVNET badge — non-interactive pill */}
{/* DEVNET badge — non-interactive pill. var(--warning), not
hardcoded amber-400: #fbbf24 lands at ~1.7:1 on the light
theme's white header (near-invisible); the token resolves to a
readable amber-700 in light mode and stays amber in dark. */}
{network === "devnet" && (
<span
ref={badgeRef}
title="You are on devnet - no real funds"
className="inline-flex items-center gap-1 rounded-full border border-[#fbbf24]/35 bg-[#fbbf24]/[0.12] px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-[0.06em] text-[#fbbf24] cursor-default pointer-events-none select-none"
className="inline-flex items-center gap-1 rounded-full border border-[var(--warning)]/35 bg-[var(--warning)]/[0.12] px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-[0.06em] text-[var(--warning)] cursor-default pointer-events-none select-none"
>
devnet
</span>
Expand Down
Loading