feat(frontend): Apply community-approved blue+gold QuickSwap-inspired design + brand assets #488
Labels
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:implement
agent:implement
agent:open_issues
agent:ready
agent:research
agent:security_audit
agent:verify
architecture
backend
blocker:hybrid
blocker:launch
blocker:limit-orders
blocker:v2
block:log_only
block:security
bug
ci
contracts
correctness
deploy
dev
devops
docs
documentation
duplicate
e2e
enhancement
epic
feature
frontend
functional-completion
gas
good first issue
governance
help wanted
high-risk
hooks
hybrid
indexer
infra
infrastructure
integrators
invalid
launch-blocker
limit-orders
localnet
localterra
low priority
missing-implementation
needs-design
ops
performance
priority
high
priority
medium
product
qa
QA
question
ready
ready
research
scripts
security
security-hardening
smartcontracts
tech-debt
testing
ux
UX
v2
verification
wontfix
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
code/cl8y-dex-terraclassic#488
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
Apply the community-approved visual concept across the dApp: cool QuickSwap-inspired blue chrome (dark + light), gold brand accents (not purple, not brown/amber fade), familiar centered trade UX, and simplified limit order layout. Also replace logo / Open Graph / favicon assets to match.
Community feedback captured:
Concept references (local feedback pack, not production):
.tmp-brand-concepts/(swap/limit dark+light, blue vs gold CTA compare, OG cards, logo marks).Current codebase
Theme / design system (warm amber–brown “glass”)
docs/design-system.md— Cyberminimalist Glass, warm--mint/ amber accents; explicitly removed parallel blue Tailwindprimary/dexpalettes (#416).frontend-dapp/src/theme-dark.css,theme-light.cssfrontend-dapp/src/index.css(btn-primary,shell-panel,card-glass, header/footer, swap IO stack)frontend-dapp/public/bootstrap/trade-bootstrap.css(must stay token-aligned)frontend-dapp/tailwind.config.jsdata-themeon<html>+skills/AGENTS_FRONTEND_THEME_TOGGLE.mdBrand assets (amber glass logo)
frontend-dapp/public/assets/cl8y-dex-glass-logo.svgviaLayout.tsxfrontend-dapp/index.html→/favicon-*.png,/favicon.ico,/og-image.pngpublic/logo.png,logo-full.png,assets/cl8y-dex-header-logo.png,assets/cl8y-logo.pngLimit / swap UX (more explanatory than approved concept)
frontend-dapp/src/pages/LimitOrdersPage.tsx+ trade components underfrontend-dapp/src/components/trade/(LimitOrderPriceField,LimitOrderBidAskSideSelector,LimitOrderPreSubmitSummary, ladder, advanced settings, onboarding strip, etc.)skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md,AGENTS_FRONTEND_LIMIT_ORDER_PRICE.mdApproved concept direction for limits: “When 1 {token} is worth” → Pay → Receive → Expiry; percentage chips; no helper paragraphs in the primary card (details → docs / rare single-word doc links only).
Why this is needed
Constraints & guardrails
:focus-visible, contrast for blue/gold on both themes (WCAG), form labels (AGENTS_FRONTEND_A11Y_*).trade-bootstrap.css/theme.jsmust not flash wrong palette on/trade.index.htmlOG/Twitter tags; keep dimensions suitable for Discord/X (og-image~1200×630)..tmp-brand-concepts/as production assets — promote finalized SVGs/PNGs intofrontend-dapp/public/.Relevant files (non-exhaustive)
frontend-dapp/src/theme-*.css,index.css,public/bootstrap/trade-bootstrap.csscomponents/common/Layout.tsx, header/footer CSS inindex.csscomponents/swap/*, swap pagespages/LimitOrdersPage.tsx,components/trade/LimitOrder*.tsxpublic/assets/cl8y-dex-glass-logo.svg,public/favicon*,public/og-image.png,index.htmlscripts/check_design_tokens.py, frontend unit/e2e specs touching theme or chromeRecommended direction
#0d111c-class navy) and light (#f4f6fb-class) with blue primary (~#448aff) and gold accent (~#e8b84a); remap--mint/--accentroles or introduce clearer names (--blue,--gold) and migrate aliases carefully.btn-primary, tabs, cards, inputs) to flatter QuickSwap-like surfaces (layered darks over heavy warm glass bloom).Layout+index.html.Acceptance criteria
og-image/ Twitter image updated; social preview shows new brand.trade-bootstrap.cssmatches hydrated theme (no amber→blue flash).python3 scripts/check_design_tokens.py,make lint-frontend, and affected unit tests pass.Test plan (all paths)
AGENTS_FRONTEND_RESPONSIVE_HEADER).curl/imgcheck for/og-image.png; header logo SVG/PNG.make test-frontend; relevant Playwright e2e (navigation, trader page, limit specs) on CI or LocalTerra.Test plan — attack / hack / abuse vectors
theme.jscannot leave a forged or broken theme that obscures warnings.tokenLogoAllowlist); brand gold must not be confused with unverified token chrome.og:imageremains same-origin static file; no user-controlled OG URL.Verification criteria
.tmp-brand-concepts/02-swap-dark.png,04-limit-dark.png, logo/OG): production UI is recognizably the same system./limitsand complete a place flow without reading instructional paragraphs on the card.mentioned in issue #489
marked as related to #489
Due to updated cognitive overload policy, text copy for disclosures must be minimized to only the key few words necessary.
Implementation checklist — every surface to update (#488)
Target palette (from
.tmp-brand-concepts/palette.md): dark#0d111c/ light#f4f6fb, blue primary~#448aff, gold brand~#e8b84a. No brown/amber page fade. Token-first; keep safety gates and required legal copy.A. Design tokens & global CSS
frontend-dapp/src/theme-dark.css— redefine all--bg-*,--surface-*,--ink*,--line*,--mint/--accentroles (or introduce--blue/--gold),--panel-bg*,--card-bg,--menu-bg,--hero-glow,--accent-gradient,--focus-ring, scroll thumbs, shadows, alert tokensfrontend-dapp/src/theme-light.css— same token set for light (#f4f6fb-class, cool lines/ink)frontend-dapp/src/index.css— restyle every primitive/chrome class to flatter QuickSwap-like surfaces (see §B)frontend-dapp/public/bootstrap/trade-bootstrap.css— must match hydrated tokens (no amber→blue FOUC on/trade)frontend-dapp/public/bootstrap/theme.js— confirmdata-themebootstrap still correct with new defaultsfrontend-dapp/public/bootstrap/trade-shell.js+trade-bootstrap-fixture.html— shell first-paint chromefrontend-dapp/tailwind.config.js— remapmint/accentaliases (and addblue/goldif introduced)frontend-dapp/src/designTokens.test.ts— expect new token values / theme selectorsscripts/check_design_tokens.py— invert #416 blue ban; assert blue+gold system + bootstrap/theme alignmentdocs/design-system.md— rewrite Cyberminimalist warm-glass → blue+gold QuickSwap-inspiredskills/AGENTS_FRONTEND_DESIGN_SYSTEM.md— stop enforcing “no blue primary / warm mint only”skills/AGENTS_FRONTEND_THEME_TOGGLE.md— token/bootstrap notes for new palette.cursor/agent rules that still ban parallel blue primary (issue supersedes)B. Global CSS primitives / chrome classes (
index.css)Buttons / CTAs
.btn-primary.btn-primary.btn-cta(+ hover / focus-visible).btn-muted.btn-disabledSurfaces / cards / inputs / tabs / badges
.shell-panel/.shell-panel-strong.card-glass.input-glass/.select-glass.label-glass.tab-glass/.tab-glass-active/.tab-glass-inactive.badge-glass/.badge-glass-accent/.badge-glass-success/.badge-glass-warning/.badge-glass-errorSwap IO stack
.swap-io-stack.swap-io-card-pay/.swap-io-card-receive.swap-io-amount-input(+ focus-visible)Token / portal listbox
.token-select-root/.token-select-trigger/.token-select-chevron.token-select-dropdown/.token-select-option*(hover, active, keyboard-active)Alerts / status
.alert-error/.alert-success/.alert-warning/.alert-infoApp shell
.app-shell/.app-hero-glow/ page background grid.app-top-sticky/.app-header-shell/.app-header.app-brand/.app-brand-mark/.app-brand-logo/.app-brand-copy/.app-brand-title.app-desktop-nav/.app-nav-link/.app-nav-link-active/.app-nav-link-label.app-more-wrap/.app-more-trigger.app-menu/.app-menu-link/.app-menu-dismiss.app-header-controls/.app-header-theme-group.app-main-shell/.app-main/.app-main-content.app-footer-shell/.app-footer/.app-footer-copy/.app-footer-title.app-footer-theme-group/.app-footer-theme-button/.app-footer-theme-button-active.app-mobile-nav-shell/.app-mobile-link/.app-mobile-link-active.app-mobile-more/.app-mobile-more-active/.app-mobile-more-sheet/.app-mobile-theme-group.app-mobile-legal-strip/.app-legal-footer-notice.app-env-ribbon(+--local/--testnet/--mainnet+ light overrides)Wallet chrome
.wallet-trigger/.wallet-trigger-connected/.wallet-trigger-icon.wallet-chip-network/.wallet-chip-network-label.wallet-dropdown-wrap/.wallet-menu/.wallet-menu-item.network-badge/.network-badge-active.wallet-option-card/.wallet-option-install-ctaModals / overlays
.app-modal-portal-root/.app-modal-backdrop/.app-modal-panel.app-modal-header/.app-modal-header--blockingMisc chrome
.copy-button/.explorer-linkfocus rings::-webkit-scrollbar*) — replace brown thumbs.animate-fade-in-up, shimmer, etc.) if tinted:focus-visiblerings using--focus-ring(a11y contrast on blue/gold)C. Brand assets & HTML meta
frontend-dapp/public/assets/cl8y-dex-glass-logo.svg→ new circular blue disc + gold “8” markfrontend-dapp/public/assets/cl8y-dex-header-logo.pngfrontend-dapp/public/assets/cl8y-logo.pngfrontend-dapp/public/logo.png/logo-full.pngfrontend-dapp/public/favicon-16.png/favicon-32.png/favicon.png/favicon.icofrontend-dapp/public/og-image.png(~1200×630; optional light OG)frontend-dapp/index.html— favicon links,og:image, Twitter image/title/descriptionLayout.tsxbrand<img>path (currently/assets/cl8y-dex-glass-logo.svg)public/assets/icon-*.pngif they clashpublic/assets/cursor-*.pngif warm-tinted.tmp-brand-concepts/— promote finalized assets intopublic/onlypublic/chains/*alone unless brand-confused with gold/network chipD. Routes / pages (every routed scene)
/SwapPage.tsx/poolPoolPage.tsx/limitsLimitOrdersPage.tsx/trade,/trade/:pairTradePage.tsx/portfolioPortfolioPage.tsx/chartsChartsPage.tsx/trader,/trader/:addressTraderPage.tsx/protocolProtocolPage.tsx/tiersTiersPage.tsx/createCreatePairPage.tsx/mintMintPage.tsx/my-portfolio→/portfolioE. Layout / navigation / chrome components
components/common/Layout.tsx— header, More menu, mobile bottom nav + More sheet, logo, footercomponents/common/AppShellNavLink.tsxcomponents/common/navItems.ts— no color logic, but verify active states after CSS changecomponents/common/ThemeSegmentedControl.tsx— dark/light segmented control (header + mobile sheet)components/common/TradeOnboardingStrip.tsxcomponents/common/AmountBalanceActions.tsx— Max / percentage chipscomponents/common/ErrorBoundary.tsxcomponents/common/LazyRoute.tsx— loading fallback chromecomponents/common/LcdConnectivityBanner.tsxcomponents/common/LcdQueryGate.tsxcomponents/common/MarketDataLoadingStatus.tsxcomponents/common/MarketDataServiceOutageBanner.tsxcomponents/common/TerraClassicTxFeeHint.tsxcomponents/common/RouteContentReadyMarker.tsx(if visible)F. Modals / dialogs / overlays
components/ui/Modal.tsx— shared portal panel/backdropcomponents/wallet/WalletModal.tsx— Connect Wallet optionscomponents/legal/RiskAcknowledgementModal.tsx— first-visit ack (keep required copy)components/swap/ExpertModeModal.tsxcontexts/ToastContext.tsx(success/error/info borders/bg — currently ad-hoc Tailwind)components/ui/TxResultAlert.tsx.app-menu-dismiss(Layout)G. Menus / dropdowns / selectors / listboxes / popovers
.app-menu).app-mobile-more-sheet)components/wallet/WalletButton.tsx+WalletDropdownMenuItems.tsx— connected wallet menucomponents/wallet/NetworkBadge.tsx/WalletChipNetworkIndicator.tsx/WalletLuncBalance.tsx— gold network/brand accentscomponents/ui/TokenSelect.tsx— trigger + portal optionscomponents/ui/MenuSelect.tsxcomponents/ui/PortalListbox.tsx(+ keyboard/position helpers CSS consumers)components/trade/PairSearchSelect.tsxcomponents/trade/TokenSearchSelect.tsxcomponents/charts/PriceChartOverlayMenu.tsx— chart indicator/overlay popover<select>/.select-glassusages on Charts (sort/order) and elsewherecomponents/trade/TradeWorkspaceDisclosure.tsx— disclosure/accordion chromeH. Pills / chips / segmented controls / tabs
.tab-glass)LimitOrderBidAskSideSelector.tsx)Badge.tsx+.badge-glass*)utils/pairListBadges.tsconsumers)I. User inputs / forms / fields
SwapAdvancedSettings.tsxfieldsLimitOrderPriceField.tsx(“When 1 {token} is worth”)LimitOrderEscrowAmountField.tsxLimitOrderExpiryField.tsxLimitOrderAdvancedLimitSettings.tsxLimitOrderLadderPanel.tsxrung inputsinput-glass/ decimal amount patterns (AGENTS_FRONTEND_DECIMAL_AMOUNT_INPUT)J. Swap components
SwapPage.tsxscene (centered familiar Pay/Receive card)SwapAdvancedSettings.tsxSwapPreSubmitSummary.tsxExpertModeModal.tsxFeeDiscountRegistryWarning.tsx,FeeDiscountUnregisteredCta.tsx)K. Limit / trade components (layout + chrome)
LimitOrdersPage.tsx— primary place card IA (concept §04/§05)LimitOrderPriceField.tsxLimitOrderBidAskSideSelector.tsxLimitOrderEscrowAmountField.tsxLimitOrderEscrowPlaceGuardMessage.tsx(keep blocking errors visible)LimitOrderExpiryField.tsxLimitOrderPreSubmitSummary.tsxLimitOrderAdvancedLimitSettings.tsx— progressive disclosureLimitOrderLadderPanel.tsx— progressive disclosureLimitOrderMyPlacementsPanel.tsxTradeOrderTicket.tsxTradeMarketOrderPanel.tsxOrderBookPanel.tsx(bid/ask row colors stay semantic; chrome/borders retoken)TradeRecentTradesSection.tsxWalletIndexerHistoryPanel.tsxTradePageWorkspaceSkeleton.tsx/TradePageRouteFallback.tsxTradePairSwitchStatus.tsxTradeMarketDataUnavailableNotice.tsxInvalidPairLinkNotice.tsx/PairNotFoundLinkNotice.tsxPairSearchSelect.tsx/TokenSearchSelect.tsxL. Pool / portfolio / trader / protocol / tiers / mint
PoolPage.tsx+PoolPreSubmitSummary.tsxPortfolioPage.tsx+PortfolioLpOverviewSection.tsx+PortfolioOpenLimitsSection.tsxTraderPage.tsx+TraderSummaryStats.tsx+TraderPositionsTable.tsx+PnlValue.tsxProtocolPage.tsxTiersPage.tsxMintPage.tsxM. Charts / visual scenes
ChartsPage.tsxlayout chromePriceChart.tsx— toolbar, empty/loading chromePriceChartLightweightCanvas.tsx— grid/text colors from theme (replace hard#9ca3afif needed)PriceChartEmptyState.tsxPriceChartOverlayMenu.tsxpriceChartLightweightIndicatorSync.ts— indicator line colors vs new accent (--focus-ring/ gold/blue)--color-positive/--color-negative(unchanged semantics)N. Shared UI kit
Card.tsx(shell-panel-strong/card-glass)Badge.tsxModal.tsxTokenLogo.tsx/TokenDisplay.tsx(fallback chrome only)TokenSelect.tsx/MenuSelect.tsx/PortalListbox.tsxStatBox.tsx/FeeDisplay.tsx/AddressRow.tsx/CopyButton.tsxTradesTable.tsxSkeleton.tsx/Spinner.tsx/RetryError.tsxTerraBroadcastPendingLink.tsx/TxResultAlert.tsxO. Legal / env / trust chrome
EnvironmentRibbon.tsxLegalFooterNotice.tsxRiskAcknowledgementModal.tsx— restyle only; do not bury acklegalCopy.ts— copy unchanged unless product asksP. Inline
var(--mint)/var(--accent)/ hard color consumersAudit and retoken every file that sets
style={{ color: 'var(--mint|accent|…)' }}(non-exhaustive from current tree):SwapPage,PoolPage,LimitOrdersPage,TradePage,ChartsPage,PortfolioPage,TraderPage,ProtocolPage,TiersPage,CreatePairPage,MintPage--blue/--goldover one-off hexQ. Tests / E2E / QA that encode the old warm look
frontend-dapp/e2e/design-tokens-visual.spec.ts— currently asserts warm brown page ≠ slate/blue; rewrite expectations.shell-panel*,.card-glass,.tab-glass*(swap/limit/pool helpers) — visual spot-check, update if brokendesignTokens.test.ts, chart canvas theme stubs)make lint-frontend/make test-frontend/python3 scripts/check_design_tokens.pyR. Docs / skills coordination (companion work)
docs/design-system.mddocs/frontend.md(if it describes warm glass)skills/AGENTS_FRONTEND_DESIGN_SYSTEM.mdskills/AGENTS_FRONTEND_THEME_TOGGLE.mdskills/AGENTS_FRONTEND_SHELL_NAV.md/RESPONSIVE_HEADER/WALLET_*/TRADE_PAGE_LAYOUT/LIMIT_ORDER_*as needed for IA/chrome wordingSuggested implementation order
theme-*.css) + bootstrap +check_design_tokens.py+ Tailwind aliasesindex.css(buttons, shells, inputs, tabs, menus, modals)index.html+ Layout logo/limitsOut of scope (per issue): contracts, indexer protocol, weakening safety/error gates, committing
.tmp-brand-concepts/.Visual QA screenshots (#488)
Captured from local Vite (
make dev) after blue+gold token/brand apply. LocalTerra LCD was down during capture — LCD connectivity banners appear; chrome/theme/brand still verify.Visual QA screenshots (#488)
Captured via Playwright against local Vite after blue+gold apply. LocalTerra LCD was unavailable during capture (connectivity banners visible); chrome, CTAs, brand mark, and theme surfaces still verify.
charts-dark.png
create-dark.png
favicon-32.png
header-brand-dark.png
limits-dark.png
limits-light.png
og-image.png
pool-dark.png
portfolio-dark.png
risk-ack-modal-dark.png
swap-dark.png
swap-light.png
tiers-dark.png
trade-dark.png
wallet-modal-dark.png
mentioned in commit
1b638d4be9mentioned in merge request !1023
Implementation status (MR !1023)
Branch:
feat/488-blue-gold-design-system→ https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/merge_requests/305Acceptance criteria
trade-bootstrap.cssaligned (no warm FOUC tokens)check_design_tokens.py+ lint + affected unit testsdocs/qa/issue-488/Not done / follow-ups
0%/+1%/+5%/+10%) from concept — not implementedAccent decision shipped: blue CTAs + gold brand/network.
mentioned in commit
68dc7d3f9amentioned in commit
488a5cfc25mentioned in merge request !1024
mentioned in commit
df1af539fementioned in merge request !1026
mentioned in issue #490
mentioned in issue #494
mentioned in issue #527
mentioned in issue #528
mentioned in issue #578
mentioned in merge request !1097
mentioned in issue #593
mentioned in issue #651
mentioned in issue #653
mentioned in merge request !1151
mentioned in issue #659
mentioned in issue #667
mentioned in issue #669
mentioned in issue #670
mentioned in issue #671
mentioned in issue #672
mentioned in issue #693
mentioned in issue #705