Bump label / informational text contrast across the trade, markets, portfolio, and create flows#2144
Merged
dcccrypto merged 5 commits intodcccrypto:mainfrom May 7, 2026
Conversation
The trade page was systematically using --text-dim (#2A2E3D) and
--text-muted (#454B5F) for static labels and informational text on
the dark surface. Both tokens render below comfortable readability
for body content — they're intended for placeholder-style text and
disabled states, not labels users need to scan. Promoting these to
--text where they're labels and --text-secondary where they're
inactive interactable elements. Input placeholders, no-data states
("Connect wallet to view NFT status", "Data will appear after
cranks"), and decorative row indices keep their subdued tokens —
those communicate "this is empty / disabled" by design.
Files touched and rationale:
TradeForm.tsx
Labels (Order Type, Size, Order Leverage, Bal:, SOL/USD,
SOL/USD unit suffixes, x suffix, Coin-margined market,
inline Entry/Liq/Size/PnL/RiskLeverage labels) → --text.
Inactive Long button when Short is selected, % presets,
leverage presets → --text-secondary (still readable, but
the active state still wins). Mainnet Phase 1 Guards bullets
→ --text (they're substantive policy info, not asides).
Tx-signature link footer → --text-secondary.
MarketStatsCard.tsx
Stat labels (MARK / INDEX / SPREAD / OPEN INTEREST / VAULT /
FUNDING/8H / TRADING FEE / INIT MARGIN / ACCOUNTS) → --text.
"Funding History" toggle row → --text-secondary at rest,
--text on hover (matches the chart toolbar contrast scheme).
PositionNftPanel.tsx
"Position NFT" / "Status" / "Mint" labels → --text. The
"Connect wallet to view NFT status" no-data message stays
--text-dim — bumping it would falsely advertise content.
MarketBookCard.tsx
"Order Book" header, Bid / Oracle / Ask column headers,
Spread row label, LP table column headers → --text. Hide-book
button (interactable) → --text-secondary at rest, --text on
hover. "+N more" overflow row → --text-secondary. Spread %
parenthetical bumped from --text-dim/60 (impossibly faint)
to --text-secondary. Per-LP row indices and the conditional
util-color-when-low stay --text-dim — they're decorative.
FundingRateCard.tsx
Funding Rate label (loading + loaded states), /8h suffix,
Last N periods label, Est. 24h label → --text. "next
{countdown}" parenthetical → --text-secondary.
FundingRateChart.tsx
"Funding Rate (24h)" header → --text. Hovered-point
timestamp (a tooltip-like detail) → --text-secondary.
"Data will appear after cranks" empty-state stays --text-dim.
app/trade/[slab]/page.tsx — Tabs component
Inactive tab text bumped from --text-muted to
--text-secondary, with hover going from --text-secondary to
--text. Matches the chart toolbar's two-tier rest+hover
contrast pattern.
Borders are intentionally untouched — modern dark UIs use
low-alpha borders (5–15%) for subtle structure; bumping to white
would create a wireframe / cage effect that fights with content.
Tests: 2277 passing, no regressions.
|
@0x-SquidSol is attempting to deploy a commit to the Khubair Nasir's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Caution Review failedFailed to post review comments 📝 WalkthroughWalkthroughA unified UI styling and layout refactor updating color token references across pages and components from muted/dim variants to primary/secondary text colors, restructuring the markets grid header, enriching portfolio position displays with additional metrics, adding the MarketPreview component, and enhancing trade form and create wizard layouts. ChangesUI Styling & Layout Refactor
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes The diff involves systematic color-token updates across many files (low cognitive overhead per file), but the sheer number of files (30+), combined with several structural UI changes (MarketPreview component, markets grid layout, portfolio detail rows, trade form layout), requires careful review to ensure consistency and correctness. The changes are heterogeneous enough (styling, new components, layout restructuring, new content) to demand separate reasoning for each area, though many updates follow predictable patterns. Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Tools execution failed with the following error: Failed to run tools: 13 INTERNAL: Received RST_STREAM with code 2 (Internal server error) Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The positions panel (empty state, populated state, and Add Margin
modal) and the accounts card (sub-tabs, column headers, empty
states) were still using --text-dim / --text-muted for labels and
informational text, on the same dark surface where the rest of the
trade page just got bumped. This commit extends the same two-tier
scheme: --text for labels and primary empty-state messages,
--text-secondary for helper text, no-data hints, and inactive
interactable controls.
Files touched:
PositionsTable.tsx
Two empty-state primary messages ("No open positions") → --text;
helper paragraphs ("Connect your wallet…", "Use the trade
form…") → --text-secondary. Column headers (Market / Side /
Size / Entry / Mark / Liq. Price / PnL / ROE% / Close) → --text.
Symbol unit suffix in the Size cell → --text-secondary. The
decorative svg icon, the "--" placeholder when mark is missing,
and the conditional zero-value colors (PnL / ROE / Liq when
out of range) intentionally stay dim — they communicate
absence of data, which white text would falsely advertise.
PositionPanel.tsx
Populated-state labels (Size, Entry Price, Funding/8h, Market
Price, Liq. Price, Margin Health, Risk Lev., Order Lev.,
Est. Funding (24h), Unrealized PnL) → --text. Empty-state
primary message → --text; helper text → --text-secondary.
Add Margin modal: Amount label → --text; close × button →
--text-secondary at rest, --text on hover; description
paragraph + Tx footer → --text-secondary. USD secondary value
next to the contracts size, funding countdown parenthetical,
and "Waiting for price data…" hint → --text-secondary.
AccountsCard.tsx
Sub-tabs (Open / Idle / Leaderboard) → --text-secondary at
rest, --text on hover. "{N} total" right-aligned counter →
--text-secondary. Empty-state line → --text. Column header
row → --text. SortHeader hover changed from text-secondary
to --accent: with the parent row now at --text, the previous
hover would have dimmed the column on mouseover (brightness
reversal). Switching hover to accent gives a color shift
instead, with transition-colors added for smooth fade.
Tests: 139 trade-component tests passing. The remaining dim/muted
in these files are all conditional value colors for no-data
states (loading, IDLE rows, decorative row indices, zero-PnL,
absent mark price) — left intentionally subdued.
The /markets browse page was using --text-dim for table column
headers, the row subtitle (mint/name line under each symbol), the
"manual" oracle pill, and the end-of-list footer; --text-muted for
the FILTER: label and every inactive filter / sort tab. On the dark
surface those tokens render below comfortable readability for body
content. Same two-tier scheme as the trade page now applies:
labels and headers go to --text, inactive interactable controls
go to --text-secondary at rest with hover brightening to --text.
Specifics:
Heading "All Markets" — the "All " span was --text/50 (50%
opacity), making the word noticeably faded. Hierarchy is now
carried by font-weight alone (normal vs medium) instead of
brightness, so "All" sits at full text but reads lighter than
the medium-weight "Markets".
Filter row — "FILTER:" label → --text. All inactive filter
pills (TOKENS/USD, ALL/5x+/10x+/20x+, ALL ORACLES/LIVE FEED/
MANUAL) and the four sort tabs (VOLUME/OI/HEALTH/RECENT) move
from --text-muted/hover-text to --text-secondary/hover-text.
Active states untouched (accent fill + accent text).
Search clear (×) button — was --text-dim → hover:--text-secondary
(very dim → medium, both subdued); now --text-secondary →
hover:--text (medium → bright). Added transition-colors.
Table column headers (token/price/OI/vol/insurance/max lev/
health) → --text. They're the same hierarchical level as the
row data values; subdued labels misframed them as decorative.
Row metadata — the per-row mint/name subtitle bumped to
--text-secondary so the address shorten is readable without
competing with the primary symbol/USD title above it.
"manual" oracle pill — text bumped to --text-secondary while
the border (/30 alpha) and background (/0.08 alpha) stay
--text-dim. Preserves the "less authoritative oracle" subdued
visual semantic while making the label readable; without this
the pill was effectively invisible against the row.
End-of-list footer "all N markets loaded" → --text-secondary.
What stays subdued:
- The search-bar magnifying-glass SVG (decorative inside input)
- placeholder-[var(--text-dim)] on the search input itself
(placeholder UX convention)
- The mobile-only "·" filter-group separators (decorative)
- "Loading more…" infinite-scroll indicator (transient state)
Tests: full app suite 2277 passing, 0 failures.
The /portfolio page was using --text-dim / --text-muted for the
"Your" word in the heading, all five summary-stat-card labels,
the per-position detail labels, the LP positions panel labels and
empty state, the trade history table empty state and column
headers. Bumping each to --text where it's a label or primary
empty-state message, --text-secondary where it's helper text or
secondary metadata, and bumping the per-stat-card values that
were stuck at --text-secondary or --text-dim (when zero) so the
numbers read clearly even at $0.00.
app/portfolio/page.tsx
Heading "Your Positions" — the "Your" span was --text-muted,
making the word noticeably faded against the medium-weight
"Positions". Bumped to --text; hierarchy now carried by
font-weight (normal vs medium).
Stat cards: labels (PORTFOLIO VALUE, TOTAL DEPOSITED, etc.)
bumped from --text-dim to --text. Total Deposited value
bumped from --text-secondary to --text so $0.00 reads as
cleanly as Portfolio Value's $0.00. LP Value when
totalRedeemable === 0 bumped from --text-dim to
--text-secondary — still indicates "no LP holdings" but
readable. Disconnected-wallet state stays --text-dim ("—"
placeholder communicates "no data yet").
Per-position detail labels (Size / Entry / Mark Price /
Capital / Risk Lev. / Liq. Price) → --text. Liquidation
Distance row label container → --text; the safe-state pct
fallback color from --text-muted to --text-secondary.
components/portfolio/LpPositionsPanel.tsx
Empty-state primary message ("No LP positions") → --text;
helper paragraph → --text-secondary.
Populated-state labels (LP Balance / Pool Share / Pool TVL /
Withdraw) → --text. Pool-type subtitle ("Insurance LP" /
"Trading LP") and "redeemable" small label → --text-secondary.
Error helper "Please try refreshing" → --text-secondary.
components/trade/TradeHistoryTable.tsx
Empty-state primary message ("No trades yet") → --text;
helper paragraph (was --text-dim/60, near-invisible) →
--text-secondary.
Column headers (Market / Side / Size / Price / Fee / Time /
Tx) → --text.
Row "time ago" cell → --text-secondary (relative time is
secondary metadata next to the trade size and price).
Footer "Showing N of M trades" → --text-secondary.
"—" placeholder when no tx_signature stays --text-dim/40 —
intentionally subdued to indicate absent value.
Tests: 2277 passing, 0 failures.
…eate-market flow
The /create page and every step component (ModeSelector, WizardProgress,
StepTokenSelect, StepOracleSelect, StepParameters, StepReview,
CostEstimate, SlabTierPicker, OracleBadge, FeeSlider, LogoUpload,
MarketPreview, RecoverSolBanner, LaunchProgress, LaunchSuccess) was
using --text-dim and --text-muted for static labels, helper text,
upcoming-step indicators, and informational descriptions. Same
two-tier scheme as the rest of the app: labels and primary
informational headers go to --text, secondary detail / helper text
and inactive interactable elements go to --text-secondary. Input
placeholders, loading messages, disabled-button text, and
no-data placeholders ("Price TBD", "⏳ Devnet token minting in
progress…") stay subdued by design.
app/create/page.tsx
Back link → --text-secondary at rest, --text on hover.
Heading "Launch a" word from --text-muted to --text (font-weight
carries the hierarchy). Cost note "small: ~0.45 SOL · medium: …"
bumped from --text-dim to --text-secondary.
ModeSelector.tsx — Quick Launch / Manual Setup cards
Inactive card: header → --text (was --text-secondary), desc →
--text-secondary (was --text-dim), detail → --text-secondary,
badge → --text-secondary. Active card: detail bumped from
--text-dim to --text-secondary so the active card's third line
is also readable.
WizardProgress.tsx
Upcoming step circle text + label bumped from --text-dim to
--text-secondary so users can see where they're heading.
CreateMarketWizard.tsx
CANCEL btn → --text-secondary at rest, --text on hover.
STEP X / Y header → --text. "Slab Tier" label → --text.
Admin-oracle informational status (non-loading) → --text-secondary.
StepTokenSelect.tsx
"Token Mint Address" label → --text. Resolved-token address
subtitle and "Wallet balance:" prefix → --text-secondary.
StepOracleSelect.tsx
Oracle-option detail and note (inactive) → --text-secondary.
"Pyth Feed ID" / "DEX Pool Address" labels → --text.
Feed-ID and pool-detail subtitles, liquidity tag, error helper
→ --text-secondary.
StepParameters.tsx
All form labels (Slab Tier, Max Leverage, Initial Price, Seed
Deposit, Insurance Fund Seed) → --text. Mainnet Phase 1 Guards
bullets → --text (substantive policy info). Helper text under
inputs and "in {symbol}" unit indicators → --text-secondary.
StepReview.tsx
"Market Preview" / "Transaction Steps" section headers → --text.
Market-preview subtitle (Oracle / Mint) and tx-step labels →
--text-secondary. Trading-fee/leverage pills bumped from
--text-muted to --text-secondary. Devnet info paragraphs and
SOL-balance prefix → --text-secondary. Tx-steps "1." numbering
→ --text-secondary, step labels → --text.
CostEstimate.tsx
"Cost Estimate" header → --text. Row labels (Slab account
rent, Token accounts, Tx fees, Vault Seed, LP Collateral,
Insurance Fund) → --text-secondary. "≈ $X" USD equivalent →
--text-secondary.
SlabTierPicker.tsx
Tier description ("Smallest, ... · 64 slots") → --text-secondary.
OracleBadge.tsx
Loading message → --text-secondary. Feed-ID truncation under
the badge → --text-secondary.
FeeSlider.tsx
Slider label → --text. "= X% per trade" derived display and
min/max bps tick labels → --text-secondary.
LogoUpload.tsx
"Token Logo" header → --text. "Replace" link → --text-secondary
rest, --text hover. "PNG, JPEG, …" helper → --text-secondary.
MarketPreview.tsx
Name subtitle ("{name} · Perpetual") → --text-secondary.
Stat-grid labels (Max Leverage, Trading Fee, Init Margin,
Maint Margin, LP Collateral, Insurance Fund, Token Mint,
Oracle Source) → --text. Tag pills (Auto Oracle, Slots,
Decimals) and the mono mint-address line → --text-secondary.
RecoverSolBanner.tsx
Header "ℹ Previous attempt detected" → --text. Description
paragraphs → --text-secondary. All three dismiss × buttons
→ --text-secondary at rest. "VIEW ON EXPLORER" link → --text-secondary.
LaunchProgress.tsx
Pending step circle + pending step label → --text-secondary.
Tx-signature link → --text-secondary at rest, accent on hover.
LaunchSuccess.tsx
Copy + Explorer buttons → --text-secondary at rest. Market
preview metadata (Fee, Leverage, Slab) → --text-secondary.
Insurance LP Mint pending helper → --text-secondary. Devnet
token info paragraphs (CA mismatch warning, Mainnet/Devnet
address pairs, helper after addresses) → --text-secondary.
"(~$500 worth)" small note → --text-secondary. "Transactions"
section header → --text. Per-tx links → --text-secondary at
rest, accent on hover.
What stays subdued:
- Input placeholders (placeholder:text-dim) — UX convention
- Loading messages ("Detecting oracle...", "Searching Pyth feeds...",
"Searching DEX pools...", "Checking wallet balance...", etc.)
- Disabled-button text (disabled:text-dim)
- "Price TBD" no-data placeholder
Tests: 40 create-flow tests + full app suite 2277 passing, 0 failures.
0x-SquidSol
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Across the trade page, markets browse page, portfolio page, and the entire create-market flow, the app was systematically using `--text-dim` (`#2A2E3D`) and `--text-muted` (`#454B5F`) for static labels, helper text, inactive interactable controls, and informational metadata. Both tokens are intended for placeholder-style content and disabled states; on the dark surface they render below comfortable readability for body text. This PR promotes those occurrences to a consistent two-tier scheme:
What stays subdued by design (across every commit in this PR):
Commits
Stats
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes
New Features
Style & UI