Skip to content

Bump label / informational text contrast across the trade, markets, portfolio, and create flows #2144

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 5 commits into from
May 7, 2026
Merged

Bump label / informational text contrast across the trade, markets, portfolio, and create flows #2144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d638214
fix(trade): bump label / informational text contrast across trade UI
0x-SquidSol May 6, 2026
36f2fee
fix(trade): bump positions panel + accounts card label contrast
0x-SquidSol May 6, 2026
ec854ba
fix(markets): bump label and inactive-filter contrast on browse page
0x-SquidSol May 6, 2026
a047327
fix(portfolio): bump label and value contrast on portfolio page
0x-SquidSol May 6, 2026
9a1888e
fix(create): bump label and informational text contrast across the cr…
0x-SquidSol May 6, 2026
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
6 changes: 3 additions & 3 deletions app/app/create/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function CreatePageInner() {
<div className="mb-4">
<Link
href="/markets"
className="inline-flex items-center gap-1.5 text-[11px] font-mono text-[var(--text-muted)] transition-colors hover:text-[var(--text)] uppercase tracking-[0.1em]"
className="inline-flex items-center gap-1.5 text-[11px] font-mono text-[var(--text-secondary)] transition-colors hover:text-[var(--text)] uppercase tracking-[0.1em]"
>
← Markets
</Link>
Expand All @@ -59,13 +59,13 @@ function CreatePageInner() {
className="text-xl font-medium tracking-[-0.01em] text-[var(--text)] sm:text-2xl"
style={{ fontFamily: "var(--font-heading)" }}
>
<span className="font-normal text-[var(--text-muted)]">Launch a </span>Market
<span className="font-normal text-[var(--text)]">Launch a </span>Market
</h1>
<p className="mt-2 text-[13px] text-[var(--text-secondary)]">
Deploy a perpetual futures market in ~60 seconds.
</p>
<div
className="mt-2 text-[11px] text-[var(--text-dim)]"
className="mt-2 text-[11px] text-[var(--text-secondary)]"
style={{ fontFamily: "var(--font-mono)" }}
>
small: ~0.45 SOL &middot; medium: ~1.8 SOL &middot; large: ~7 SOL
Expand Down
24 changes: 12 additions & 12 deletions app/app/markets/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -580,7 +580,7 @@ function MarketsPageInner() {
// browse
</div>
<h1 className="text-xl font-medium tracking-[-0.01em] text-[var(--text)] sm:text-2xl" style={{ fontFamily: "var(--font-heading)" }}>
<span className="font-normal text-[var(--text)]/50">All </span>Markets
<span className="font-normal text-[var(--text)]">All </span>Markets
</h1>
<p className="mt-2 text-[13px] text-[var(--text-secondary)]">perpetual futures, pick your poison.</p>
</div>
Expand Down Expand Up @@ -609,7 +609,7 @@ function MarketsPageInner() {
{hasSearch && (
<button
onClick={clearSearch}
className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-dim)] hover:text-[var(--text-secondary)] p-1 min-h-[44px] min-w-[44px] flex items-center justify-center"
className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-secondary)] hover:text-[var(--text)] transition-colors p-1 min-h-[44px] min-w-[44px] flex items-center justify-center"
title="Clear search"
aria-label="Clear search"
>
Expand All @@ -635,7 +635,7 @@ function MarketsPageInner() {
"rounded-sm px-3 py-2 sm:py-1.5 text-[10px] font-bold uppercase tracking-[0.08em] transition-all duration-200 min-h-[40px]",
sortBy === opt.key
? "bg-[var(--accent)]/10 text-[var(--accent)]"
: "text-[var(--text-muted)] hover:text-[var(--text)]",
: "text-[var(--text-secondary)] hover:text-[var(--text)]",
].join(" ")}
aria-pressed={sortBy === opt.key}
aria-label={`Sort by ${opt.label}`}
Expand All @@ -661,7 +661,7 @@ function MarketsPageInner() {

{/* Row 2: Filter pills — single scrollable row on mobile */}
<div className="mb-6 flex items-center gap-2 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<span className="hidden sm:inline-block text-[10px] font-semibold uppercase tracking-[0.15em] text-[var(--text-muted)] shrink-0">FILTER:</span>
<span className="hidden sm:inline-block text-[10px] font-semibold uppercase tracking-[0.15em] text-[var(--text)] shrink-0">FILTER:</span>

{/* USD/Token toggle */}
<div className="flex gap-1 rounded-sm border border-[var(--border)] bg-[var(--bg-elevated)] p-0.5 shrink-0" role="group" aria-label="Display currency">
Expand All @@ -671,7 +671,7 @@ function MarketsPageInner() {
"rounded-sm px-2.5 py-1.5 sm:py-1 text-[10px] font-bold uppercase tracking-[0.08em] transition-all duration-200 min-h-[36px] sm:min-h-[32px]",
!showUsd
? "bg-[var(--accent)]/10 text-[var(--accent)]"
: "text-[var(--text-muted)] hover:text-[var(--text)]",
: "text-[var(--text-secondary)] hover:text-[var(--text)]",
].join(" ")}
aria-pressed={!showUsd}
aria-label="Display in tokens"
Expand All @@ -684,7 +684,7 @@ function MarketsPageInner() {
"rounded-sm px-2.5 py-1.5 sm:py-1 text-[10px] font-bold uppercase tracking-[0.08em] transition-all duration-200 min-h-[36px] sm:min-h-[32px]",
showUsd
? "bg-[var(--accent)]/10 text-[var(--accent)]"
: "text-[var(--text-muted)] hover:text-[var(--text)]",
: "text-[var(--text-secondary)] hover:text-[var(--text)]",
].join(" ")}
aria-pressed={showUsd}
aria-label="Display in USD"
Expand Down Expand Up @@ -712,7 +712,7 @@ function MarketsPageInner() {
"rounded-sm px-2.5 py-1.5 sm:py-1 text-[10px] font-bold uppercase tracking-[0.08em] transition-all duration-200 min-h-[36px] sm:min-h-[32px]",
leverageFilter === opt.key
? "bg-[var(--accent)]/10 text-[var(--accent)]"
: "text-[var(--text-muted)] hover:text-[var(--text)]",
: "text-[var(--text-secondary)] hover:text-[var(--text)]",
].join(" ")}
aria-pressed={leverageFilter === opt.key}
aria-label={`Filter leverage ${opt.label}`}
Expand Down Expand Up @@ -740,7 +740,7 @@ function MarketsPageInner() {
"rounded-sm px-2.5 py-1.5 sm:py-1 text-[10px] font-bold uppercase tracking-[0.08em] transition-all duration-200 min-h-[36px] sm:min-h-[32px]",
oracleFilter === opt.key
? "bg-[var(--accent)]/10 text-[var(--accent)]"
: "text-[var(--text-muted)] hover:text-[var(--text)]",
: "text-[var(--text-secondary)] hover:text-[var(--text)]",
].join(" ")}
aria-pressed={oracleFilter === opt.key}
aria-label={`Filter oracle ${opt.label}`}
Expand Down Expand Up @@ -835,7 +835,7 @@ function MarketsPageInner() {
{/* GH#1775: sticky inside overflow-x-auto is broken by CSS spec (overflow clips stacking context).
Removed sticky top-0 z-10 — header scrolls with content on mobile.
Desktop (sm+) is unaffected since the table fits in viewport width. */}
<div className="grid w-full min-w-[500px] sm:min-w-[700px] grid-cols-[minmax(120px,2.5fr)_minmax(80px,1.2fr)_minmax(50px,0.6fr)_minmax(75px,0.8fr)] sm:grid-cols-[minmax(160px,3fr)_minmax(90px,1.2fr)_minmax(90px,1fr)_minmax(90px,1fr)_minmax(90px,1fr)_minmax(65px,0.8fr)_minmax(80px,0.9fr)] gap-2 sm:gap-4 border-b border-[var(--border)] bg-[var(--bg-surface)] px-3 sm:px-5 py-2.5 text-[9px] sm:text-[10px] font-semibold uppercase tracking-[0.15em] text-[var(--text-dim)]">
<div className="grid w-full min-w-[500px] sm:min-w-[700px] grid-cols-[minmax(120px,2.5fr)_minmax(80px,1.2fr)_minmax(50px,0.6fr)_minmax(75px,0.8fr)] sm:grid-cols-[minmax(160px,3fr)_minmax(90px,1.2fr)_minmax(90px,1fr)_minmax(90px,1fr)_minmax(90px,1fr)_minmax(65px,0.8fr)_minmax(80px,0.9fr)] gap-2 sm:gap-4 border-b border-[var(--border)] bg-[var(--bg-surface)] px-3 sm:px-5 py-2.5 text-[9px] sm:text-[10px] font-semibold uppercase tracking-[0.15em] text-[var(--text)]">
<div>token</div>
<div className="text-right">price</div>
<div className="hidden sm:block text-right">OI</div>
Expand Down Expand Up @@ -990,7 +990,7 @@ function MarketsPageInner() {
{displaySymbol ? `${displaySymbol}/USD` : shortenAddress(m.slabAddress)}
</span>
{m.isAdminOracle && (
<span className="border border-[var(--text-dim)]/30 bg-[var(--text-dim)]/[0.08] px-1.5 py-0.5 text-[8px] font-medium uppercase tracking-wider text-[var(--text-dim)]">manual</span>
<span className="border border-[var(--text-dim)]/30 bg-[var(--text-dim)]/[0.08] px-1.5 py-0.5 text-[8px] font-medium uppercase tracking-wider text-[var(--text-secondary)]">manual</span>
)}
{/* GH#1233: warn when admin-oracle market has no price — users cannot open positions */}
{m.isAdminOracle && lastPrice === null && (
Expand All @@ -1003,7 +1003,7 @@ function MarketsPageInner() {
</span>
)}
</div>
<div className="text-[10px] text-[var(--text-dim)]" style={{ fontFamily: "var(--font-mono)" }}>
<div className="text-[10px] text-[var(--text-secondary)]" style={{ fontFamily: "var(--font-mono)" }}>
{displayName ? `${displayName} · ${shortenAddress(subtitleAddress)}` : shortenAddress(subtitleAddress)}
</div>
</div>
Expand Down Expand Up @@ -1033,7 +1033,7 @@ function MarketsPageInner() {
</div>
) : filtered.length > 20 ? (
<div className="flex items-center justify-center gap-3 py-4">
<span className="text-[11px] text-[var(--text-dim)]" style={{ fontFamily: "var(--font-mono)" }}>
<span className="text-[11px] text-[var(--text-secondary)]" style={{ fontFamily: "var(--font-mono)" }}>
all {filtered.length} market{filtered.length !== 1 ? "s" : ""} loaded
</span>
<button
Expand Down
26 changes: 13 additions & 13 deletions app/app/portfolio/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export default function PortfolioPage() {
// portfolio
</div>
<h1 className="text-xl font-medium tracking-[-0.01em] text-[var(--text)] sm:text-2xl" style={{ fontFamily: "var(--font-heading)" }}>
<span className="font-normal text-[var(--text-muted)]">Your </span>Positions
<span className="font-normal text-[var(--text)]">Your </span>Positions
</h1>
<p className="mt-2 mb-8 text-[13px] text-[var(--text-secondary)]">View all your positions across markets</p>
<div className="border border-[var(--border)] bg-[var(--panel-bg)] p-10 text-center">
Expand All @@ -140,7 +140,7 @@ export default function PortfolioPage() {
// portfolio
</div>
<h1 className="text-xl font-medium tracking-[-0.01em] text-[var(--text)] sm:text-2xl" style={{ fontFamily: "var(--font-heading)" }}>
<span className="font-normal text-[var(--text-muted)]">Your </span>Positions
<span className="font-normal text-[var(--text)]">Your </span>Positions
</h1>
<p className="mt-2 text-[13px] text-[var(--text-secondary)]">
All positions across Percolator markets
Expand Down Expand Up @@ -176,7 +176,7 @@ export default function PortfolioPage() {
{
label: "Total Deposited",
value: !walletConnected ? "—" : (loading || tokenMetasLoading) ? "\u2026" : `$${usdTotals.depositedUsd.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
color: !walletConnected ? "text-[var(--text-dim)]" : "text-[var(--text-secondary)]",
color: !walletConnected ? "text-[var(--text-dim)]" : "text-[var(--text)]",
},
{
label: "Unrealized PnL",
Expand All @@ -187,7 +187,7 @@ export default function PortfolioPage() {
{
label: "LP Value",
value: !walletConnected ? "—" : lpPositions.loading ? "\u2026" : `$${lpPositions.totalRedeemable.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
color: !walletConnected ? "text-[var(--text-dim)]" : lpPositions.totalRedeemable > 0 ? "text-[var(--cyan)]" : "text-[var(--text-dim)]",
color: !walletConnected ? "text-[var(--text-dim)]" : lpPositions.totalRedeemable > 0 ? "text-[var(--cyan)]" : "text-[var(--text-secondary)]",
sub: walletConnected && lpPositions.positions.length > 0
? `${lpPositions.positions.length} pool${lpPositions.positions.length > 1 ? "s" : ""}`
: undefined,
Expand All @@ -201,7 +201,7 @@ export default function PortfolioPage() {
},
].map((stat, idx, arr) => (
<div key={stat.label} className={`bg-[var(--panel-bg)] p-5 transition-colors duration-200 hover:bg-[var(--bg-elevated)]${idx === arr.length - 1 && arr.length % 2 !== 0 ? " col-span-2 sm:col-span-1" : ""}`}>
<p className="mb-2 text-[9px] font-medium uppercase tracking-[0.2em] text-[var(--text-dim)]">{stat.label}</p>
<p className="mb-2 text-[9px] font-medium uppercase tracking-[0.2em] text-[var(--text)]">{stat.label}</p>
<p className={`text-xl font-bold tabular-nums ${stat.color}`} style={{ fontFamily: "var(--font-jetbrains-mono)", fontVariantNumeric: "tabular-nums" }}>
{stat.value}
</p>
Expand Down Expand Up @@ -337,39 +337,39 @@ export default function PortfolioPage() {
{/* Row 2: Details grid */}
<div className="mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 sm:grid-cols-6">
<div>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text-dim)]">Size</p>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text)]">Size</p>
<p className="text-[12px] text-[var(--text)]" style={{ fontFamily: "var(--font-jetbrains-mono)", fontVariantNumeric: "tabular-nums" }}>
{formatTokenAmount(sizeAbs, getDecimals(pos))}
</p>
</div>
<div>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text-dim)]">Entry</p>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text)]">Entry</p>
<p className="text-[12px] text-[var(--text-secondary)]" style={{ fontFamily: "var(--font-jetbrains-mono)", fontVariantNumeric: "tabular-nums" }}>
{formatUsdPriceE6(posEntry)}
</p>
</div>
<div>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text-dim)]">Mark Price</p>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text)]">Mark Price</p>
<p className="text-[12px] text-[var(--text-secondary)]" style={{ fontFamily: "var(--font-jetbrains-mono)", fontVariantNumeric: "tabular-nums" }}>
{oraclePriceE6 > 0n ? formatUsdPriceE6(oraclePriceE6) : "—"}
</p>
</div>
<div>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text-dim)]">Capital</p>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text)]">Capital</p>
<p className="text-[12px] text-[var(--text-secondary)]" style={{ fontFamily: "var(--font-jetbrains-mono)", fontVariantNumeric: "tabular-nums" }}>
{formatTokenAmount(posCapital, getDecimals(pos))}
</p>
</div>
<div>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text-dim)]" title={RISK_LEVERAGE_TITLE}>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text)]" title={RISK_LEVERAGE_TITLE}>
{RISK_LEVERAGE_LABEL}
</p>
<p className="text-[12px] text-[var(--text-secondary)]" style={{ fontFamily: "var(--font-jetbrains-mono)", fontVariantNumeric: "tabular-nums" }}>
{leverage > 0 ? formatLeverage(leverage) : "—"}
</p>
</div>
<div>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text-dim)]">Liq. Price</p>
<p className="text-[9px] font-medium uppercase tracking-[0.15em] text-[var(--text)]">Liq. Price</p>
<div className="flex items-center gap-1.5">
{/* Liquidation severity dot */}
{hasPosition && (
Expand Down Expand Up @@ -404,14 +404,14 @@ export default function PortfolioPage() {
{/* Liquidation distance bar */}
{hasPosition && liquidationDistancePct < 100 && (
<div className="mt-3">
<div className="flex items-center justify-between text-[9px] text-[var(--text-dim)]">
<div className="flex items-center justify-between text-[9px] text-[var(--text)]">
<span>Liquidation Distance</span>
<span className={
severity === "danger"
? "font-bold text-[var(--short)]"
: severity === "warning"
? "font-bold text-[var(--warning)]"
: "text-[var(--text-muted)]"
: "text-[var(--text-secondary)]"
}>
{liquidationDistancePct.toFixed(1)}%
</span>
Expand Down
2 changes: 1 addition & 1 deletion app/app/trade/[slab]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ function Tabs({ tabs, children, defaultTab }: { tabs: string[]; children: React.
className={`shrink-0 px-3 py-1.5 text-[10px] font-medium uppercase tracking-[0.15em] transition-colors border-b-2 ${
active === i
? "border-[var(--accent)] text-[var(--accent)]"
: "border-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:border-[var(--border)]"
: "border-transparent text-[var(--text-secondary)] hover:text-[var(--text)] hover:border-[var(--border)]"
}`}
>
{label}
Expand Down
Loading
Loading