ux: /trade ticket heading + drop compact Connect Wallet; green Buy / red Sell side control #563

New issue

Closed

opened 2026-08-18 12:09:29 +00:00 by PlasticDigits · 10 comments

PlasticDigits commented 2026-08-18 12:09:29 +00:00 (Migrated from gitlab.com)

Copy link

Summary

The /trade order ticket heading (Buy {base} / Sell {base}) is truncated because it shares a row with a compact Connect Wallet chip. That chip is redundant: the shell header already has a primary Connect Wallet control, and the ticket footer already has a large money-CTA Connect Wallet when disconnected (#527). Separately, the Buy {base} / Sell {base} side control uses the same tab-glass blue wash as Limit/Market tabs, so the money direction does not stand out. Show the full heading, remove the compact header wallet chip, and style Buy green / Sell red on /trade and /limits without changing escrow semantics.

Current codebase

Heading + compact wallet chip

TradeOrderTicket.tsx header:

• h3.trade-ticket-heading uses truncate: {verb} {displayBase} (e.g. Buy cLUNC) or Select a pair.
• Adjacent shrink-0 pill: disconnected label Connect wallet; connected shows addr.slice(0,8)…slice(-6). Click calls openWalletModal() only when disconnected. Connected click is a no-op.
• Invert icon (trade-ticket-pair-invert) sits in the same heading row (#524).

Other connect affordances (keep these):

Surface	Behavior
Shell header WalletButton.tsx	Primary btn-primary Connect Wallet
Ticket footer TradeTicketSubmitFooter.tsx	Disconnected Place / Market label Connect Wallet (TRADE_MONEY_CTA_CLASS)
Cancel / book-row actions	Connect Wallet when a signed action is requested

Side control

LimitOrderBidAskSideSelector.tsx is a WAI-ARIA radiogroup (#153). Labels from tradeDirectionSideLabels.ts: Buy {base} / Sell {base} (#412, #489). Both buttons use tab-glass / tab-glass-active / tab-glass-inactive (blue active wash). Used on /trade (idPrefix="trade-ticket") and /limits (idPrefix="limit-orders").

docs/design-system.md currently lists --color-positive / --color-negative as semantic chart / status (not button fills). Ticket Top buy / Top sell stats already color values with those tokens (TicketStat tone).

Why the new implementation is needed

1. Truncation — Buy cLUNC rendering as Buy c… hides the asset the user is about to buy or sell. That is unsafe on a money screen.
2. Redundant connect — Three Connect Wallet controls on one column train users to ignore chrome and squeeze the heading. Header + footer CTAs are enough.
3. Direction hierarchy — Buy vs Sell is the highest-stakes choice on the ticket. Matching the rest of the page’s muted tabs fails to draw attention and diverges from CEX convention (green buy / red sell), which the order book and tape already use.

Constraints / guardrails

1. Do not change escrow mapping. side === 'bid' still escrows token1; ask escrows token0. Selector only toggles side. Parents still clear/re-apply amounts on side change (#155).
2. Keep radiogroup a11y (#153): role="radiogroup" / role="radio", aria-checked, roving tabindex, Arrow/Home/End. Do not revert to native <input type="radio">.
3. Color is not the only cue. Selected side must keep a non-color indicator (border, fill weight, aria-checked). Labels stay Buy {base} / Sell {base} — never color-only, never raw Bid/Ask on the place card (#489).
4. Amend the design system if Buy/Sell use semantic fills: document an exception for side controls only. Do not paint primary CTAs (btn-primary Place limit / Market) green or red. Limit vs Market tabs stay tab-glass* blue.
5. Contrast — Selected and unselected Buy/Sell text must meet WCAG contrast on dark and light themes. Unselected Sell must not look like alert-error. :focus-visible rings stay (AGENTS_FRONTEND_A11Y_FOCUS.md).
6. Heading — Full Buy {displayBase} / Sell {displayBase} without CSS truncate at the default desktop ticket width. Long symbols wrap or shrink typography; they must not clip to … on hub tickers (cLUNC, cUSTC, UST1, USTR). Invert control stays adjacent and tappable.
7. Remove compact header wallet chip (disconnected and connected). Connected address remains in the shell header wallet control. Do not add a fourth connect path.
8. Keep footer Connect Wallet when disconnected — that is the money-path CTA. Header Connect Wallet stays.
9. Do not put the wallet address or truncated bech32 in the ticket heading.
10. Shared component — /trade and /limits stay visually aligned. Compact vs full density (compact prop) both get semantic colors.
11. #524 invert — After invert, heading and side labels use the displayed base; colors still follow bid=Buy / ask=Sell (not “green means token0”).
12. No on-chain / quote changes. Styling only.

Relevant files

File	Role
frontend-dapp/src/components/trade/TradeOrderTicket.tsx	Heading, compact wallet chip, side selector, footer CTA
frontend-dapp/src/components/trade/LimitOrderBidAskSideSelector.tsx	Shared Buy/Sell control
frontend-dapp/src/components/trade/__tests__/LimitOrderBidAskSideSelector.test.tsx	Click + keyboard
frontend-dapp/src/utils/tradeDirectionSideLabels.ts	Buy/Sell copy
frontend-dapp/src/pages/LimitOrdersPage.tsx	Same selector
frontend-dapp/src/pages/TradePage.test.tsx	trade-ticket-heading invert cases
frontend-dapp/src/components/trade/TradeTicketSubmitFooter.tsx	Footer Connect Wallet — keep
frontend-dapp/src/components/wallet/WalletButton.tsx	Header Connect Wallet — keep
frontend-dapp/src/index.css	New side-control primitives if not inline tokens
frontend-dapp/src/theme-dark.css / theme-light.css	Contrast
docs/design-system.md	Semantic fill exception
docs/frontend.md § Limit place — Bid / Ask side control	Color + heading invariants
skills/AGENTS_FRONTEND_LIMIT_ORDER_SIDE_SELECTOR.md	Styling rule 4 currently requires tab-glass*
skills/AGENTS_FRONTEND_DESIGN_SYSTEM.md	Token rules
skills/AGENTS_FRONTEND_TRADE_TICKET_CTA_DOCK.md	Footer CTA

Recommended direction

1. Delete the ticket-header wallet <button> and walletLabel UI. Leave openWalletModal on footer / signed actions.
2. Heading row: min-w-0 + wrap (break-words / two-line) instead of truncate. Keep invert button shrink-0. RTL: trade-ticket-heading text is the full Buy cLUNC (and inverted Buy UST1) at a ~24% column width.
3. Side styles: e.g. side-buy / side-sell with selected vs idle using --color-positive / --color-negative (or dedicated --side-buy* tokens). Idle = muted fill + colored border/text; selected = stronger fill + emphasis ring. Update skill rule 4 so side controls may deviate from generic tab-glass-active while keeping focus-visible.
4. Design-system: note that Buy/Sell side controls may use semantic fills; chart/status tokens remain the source; not for primary money CTAs.
5. Tests: heading overflow; chip absent disconnected + connected; selector colors/classes + existing keyboard tests; /limits same classes.

Acceptance criteria

• T1. Default desktop ticket width: heading shows full Buy {base} / Sell {base} for hub symbols (cLUNC, cUSTC, UST1, USTR). No Buy c….
• T2. Compact ticket-header Connect Wallet / address chip is gone (disconnected and connected).
• T3. Disconnected users still connect via header and ticket footer Connect Wallet. No regression on Place limit / Market disconnected path (#494 pattern).
• T4. Invert control remains usable; heading tracks displayed base (#524).
• T5. Buy control reads green; Sell control reads red, both themes, selected and idle distinguishable without color alone (aria-checked + emphasis).
• T6. /limits Single (and any other LimitOrderBidAskSideSelector) matches. Limit/Market tabs and Place/Market CTAs stay blue primary.
• T7. Keyboard + click side change, escrow clear/MAX reapply unchanged (#153, #155).
• T8. Docs + skills updated. make verify-issue-<iid>.

Test plan — functional paths

Heading / wallet chrome

• RTL: disconnected ticket — trade-ticket-heading is Buy {symbol}; no header chip; footer is Connect Wallet; openWalletModal from footer still fires.
• RTL: connected — heading full; no address pill in ticket header; shell wallet chip still shows address.
• Invert: heading Buy cUSTC ↔ Buy UST1 (existing TradePage invert tests) still pass; heading not truncated after invert.
• Long synthetic symbol (e.g. 24 chars): no overlap onto Limit/Market tabs; invert still clickable.
• Select-a-pair empty state heading untruncated.

Side colors / behavior

• Click Buy → aria-checked=true on bid; ask false; heading verb Buy; bid button uses buy/positive styles.
• Click Sell → ask checked; heading Sell; ask uses sell/negative styles.
• Keyboard Arrow/Home/End still move side and focus.
• Compact + non-compact densities.
• /limits place card: same colors; ladder/single unrelated chrome unchanged.
• Light theme + dark theme screenshots or computed styles: contrast vs background.
• Side change still clears manual amount / reapplies MAX (#155).

Regression

• Place limit / Market footer dock (#527).
• Crossing / pause / blacklist banners still visible.
• Order book Bid/Ask column colors unchanged (book stays bid/ask vocabulary).

Test plan — attack, hack, and abuse vectors

• A1. Wrong-side submit. Visual restyle must not invert side mapping. Place a bid and an ask (or unit-assert the submit payload / factorySide): Buy still bid/token1 escrow, Sell still ask/token0. A green/red swap bug is a fund-direction bug.
• A2. Spoofed symbol in heading. displayBase from indexer/factory must remain text content (no innerHTML). Oversized / RTL / ZWJ symbols wrap; they must not paint over Sell or the footer CTA.
• A3. Hidden connect. Removing the chip must not remove the only connect path when the header is scrolled off (footer CTA remains). Do not rely on a hidden duplicate modal opener.
• A4. Connected no-op impersonation. Do not replace the chip with a static address the dApp does not own; connected identity stays the header wallet control (existing disconnect flow).
• A5. Contrast / misread. Unselected Sell must not equal alert-error so users do not treat Sell as a blocking error. Selected Buy must not look like a success toast that implies a fill already happened.
• A6. Focus ring removal. Custom green/red fills must not drop :focus-visible; keyboard users can still see which side is focused.
• A7. Theme injection. If styles use CSS variables, a user stylesheet / data-theme flip must not leave white-on-white side buttons (unreadable → misclick).
• A8. Limits vs Trade drift. One component: changing colors on /trade cannot leave /limits on old tab-glass-active only (inconsistent direction encoding).

Verification criteria

make lint-frontend
make test-frontend
# targeted:
#   TradePage.test.tsx (heading / invert)
#   LimitOrderBidAskSideSelector.test.tsx
#   LimitOrdersPage / ticket disconnect paths as applicable
python3 scripts/check_design_tokens.py
make verify-issue-<iid>

Manual (dark + light, desktop ticket column ~320px): hub pair cLUNC/UST1 — heading Buy cLUNC fully visible, no compact Connect Wallet in the ticket header, footer Connect Wallet when disconnected, Buy green / Sell red with a clear selected state, invert updates heading, /limits matches. Confirm Place limit still blue.

## Summary The `/trade` order ticket heading (**Buy {base}** / **Sell {base}**) is **truncated** because it shares a row with a compact **Connect Wallet** chip. That chip is redundant: the shell header already has a primary Connect Wallet control, and the ticket footer already has a large money-CTA **Connect Wallet** when disconnected ([#527](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/527)). Separately, the **Buy {base}** / **Sell {base}** side control uses the same `tab-glass` blue wash as Limit/Market tabs, so the money direction does not stand out. Show the full heading, remove the compact header wallet chip, and style Buy **green** / Sell **red** on `/trade` and `/limits` without changing escrow semantics. ## Current codebase ### Heading + compact wallet chip [`TradeOrderTicket.tsx`](frontend-dapp/src/components/trade/TradeOrderTicket.tsx) header: - `h3.trade-ticket-heading` uses **`truncate`**: `{verb} {displayBase}` (e.g. `Buy cLUNC`) or `Select a pair`. - Adjacent **shrink-0** pill: disconnected label `Connect wallet`; connected shows `addr.slice(0,8)…slice(-6)`. Click calls `openWalletModal()` **only when disconnected**. Connected click is a no-op. - Invert icon (`trade-ticket-pair-invert`) sits in the same heading row ([#524](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/524)). Other connect affordances (keep these): | Surface | Behavior | |---------|----------| | Shell header [`WalletButton.tsx`](frontend-dapp/src/components/wallet/WalletButton.tsx) | Primary `btn-primary` **Connect Wallet** | | Ticket footer [`TradeTicketSubmitFooter.tsx`](frontend-dapp/src/components/trade/TradeTicketSubmitFooter.tsx) | Disconnected Place / Market label **Connect Wallet** (`TRADE_MONEY_CTA_CLASS`) | | Cancel / book-row actions | Connect Wallet when a signed action is requested | ### Side control [`LimitOrderBidAskSideSelector.tsx`](frontend-dapp/src/components/trade/LimitOrderBidAskSideSelector.tsx) is a WAI-ARIA radiogroup ([#153](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/153)). Labels from [`tradeDirectionSideLabels.ts`](frontend-dapp/src/utils/tradeDirectionSideLabels.ts): **Buy {base}** / **Sell {base}** ([#412](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/412), [#489](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/489)). Both buttons use `tab-glass` / `tab-glass-active` / `tab-glass-inactive` (blue active wash). Used on **`/trade`** (`idPrefix="trade-ticket"`) and **`/limits`** (`idPrefix="limit-orders"`). [`docs/design-system.md`](docs/design-system.md) currently lists `--color-positive` / `--color-negative` as **semantic chart / status (not button fills)**. Ticket **Top buy / Top sell** stats already color values with those tokens (`TicketStat` `tone`). ## Why the new implementation is needed 1. **Truncation** — `Buy cLUNC` rendering as `Buy c…` hides the asset the user is about to buy or sell. That is unsafe on a money screen. 2. **Redundant connect** — Three Connect Wallet controls on one column train users to ignore chrome and squeeze the heading. Header + footer CTAs are enough. 3. **Direction hierarchy** — Buy vs Sell is the highest-stakes choice on the ticket. Matching the rest of the page’s muted tabs fails to draw attention and diverges from CEX convention (green buy / red sell), which the order book and tape already use. ## Constraints / guardrails 1. **Do not change escrow mapping.** `side === 'bid'` still escrows token1; `ask` escrows token0. Selector only toggles `side`. Parents still clear/re-apply amounts on side change ([#155](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/155)). 2. **Keep radiogroup a11y** ([#153](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/153)): `role="radiogroup"` / `role="radio"`, `aria-checked`, roving tabindex, Arrow/Home/End. Do not revert to native `<input type="radio">`. 3. **Color is not the only cue.** Selected side must keep a non-color indicator (border, fill weight, `aria-checked`). Labels stay **Buy {base}** / **Sell {base}** — never color-only, never raw Bid/Ask on the place card ([#489](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/489)). 4. **Amend the design system** if Buy/Sell use semantic fills: document an exception for **side controls only**. Do not paint primary CTAs (`btn-primary` Place limit / Market) green or red. Limit vs Market tabs stay `tab-glass*` blue. 5. **Contrast** — Selected and unselected Buy/Sell text must meet WCAG contrast on **dark and light** themes. Unselected Sell must not look like `alert-error`. `:focus-visible` rings stay ([`AGENTS_FRONTEND_A11Y_FOCUS.md`](skills/AGENTS_FRONTEND_A11Y_FOCUS.md)). 6. **Heading** — Full `Buy {displayBase}` / `Sell {displayBase}` without CSS `truncate` at the default desktop ticket width. Long symbols wrap or shrink typography; they must not clip to `…` on hub tickers (cLUNC, cUSTC, UST1, USTR). Invert control stays adjacent and tappable. 7. **Remove compact header wallet chip** (disconnected **and** connected). Connected address remains in the shell header wallet control. Do not add a fourth connect path. 8. **Keep footer Connect Wallet** when disconnected — that is the money-path CTA. Header Connect Wallet stays. 9. **Do not** put the wallet address or truncated bech32 in the ticket heading. 10. **Shared component** — `/trade` and `/limits` stay visually aligned. Compact vs full density (`compact` prop) both get semantic colors. 11. **#524 invert** — After invert, heading and side labels use the **displayed** base; colors still follow bid=Buy / ask=Sell (not “green means token0”). 12. **No on-chain / quote changes.** Styling only. ## Relevant files | File | Role | |------|------| | [`frontend-dapp/src/components/trade/TradeOrderTicket.tsx`](frontend-dapp/src/components/trade/TradeOrderTicket.tsx) | Heading, compact wallet chip, side selector, footer CTA | | [`frontend-dapp/src/components/trade/LimitOrderBidAskSideSelector.tsx`](frontend-dapp/src/components/trade/LimitOrderBidAskSideSelector.tsx) | Shared Buy/Sell control | | [`frontend-dapp/src/components/trade/__tests__/LimitOrderBidAskSideSelector.test.tsx`](frontend-dapp/src/components/trade/__tests__/LimitOrderBidAskSideSelector.test.tsx) | Click + keyboard | | [`frontend-dapp/src/utils/tradeDirectionSideLabels.ts`](frontend-dapp/src/utils/tradeDirectionSideLabels.ts) | Buy/Sell copy | | [`frontend-dapp/src/pages/LimitOrdersPage.tsx`](frontend-dapp/src/pages/LimitOrdersPage.tsx) | Same selector | | [`frontend-dapp/src/pages/TradePage.test.tsx`](frontend-dapp/src/pages/TradePage.test.tsx) | `trade-ticket-heading` invert cases | | [`frontend-dapp/src/components/trade/TradeTicketSubmitFooter.tsx`](frontend-dapp/src/components/trade/TradeTicketSubmitFooter.tsx) | Footer Connect Wallet — keep | | [`frontend-dapp/src/components/wallet/WalletButton.tsx`](frontend-dapp/src/components/wallet/WalletButton.tsx) | Header Connect Wallet — keep | | [`frontend-dapp/src/index.css`](frontend-dapp/src/index.css) | New side-control primitives if not inline tokens | | [`frontend-dapp/src/theme-dark.css`](frontend-dapp/src/theme-dark.css) / [`theme-light.css`](frontend-dapp/src/theme-light.css) | Contrast | | [`docs/design-system.md`](docs/design-system.md) | Semantic fill exception | | [`docs/frontend.md`](docs/frontend.md) § Limit place — Bid / Ask side control | Color + heading invariants | | [`skills/AGENTS_FRONTEND_LIMIT_ORDER_SIDE_SELECTOR.md`](skills/AGENTS_FRONTEND_LIMIT_ORDER_SIDE_SELECTOR.md) | Styling rule 4 currently requires `tab-glass*` | | [`skills/AGENTS_FRONTEND_DESIGN_SYSTEM.md`](skills/AGENTS_FRONTEND_DESIGN_SYSTEM.md) | Token rules | | [`skills/AGENTS_FRONTEND_TRADE_TICKET_CTA_DOCK.md`](skills/AGENTS_FRONTEND_TRADE_TICKET_CTA_DOCK.md) | Footer CTA | ## Recommended direction 1. **Delete** the ticket-header wallet `<button>` and `walletLabel` UI. Leave `openWalletModal` on footer / signed actions. 2. **Heading row:** `min-w-0` + wrap (`break-words` / two-line) instead of `truncate`. Keep invert button `shrink-0`. RTL: `trade-ticket-heading` text is the full `Buy cLUNC` (and inverted `Buy UST1`) at a ~24% column width. 3. **Side styles:** e.g. `side-buy` / `side-sell` with selected vs idle using `--color-positive` / `--color-negative` (or dedicated `--side-buy*` tokens). Idle = muted fill + colored border/text; selected = stronger fill + emphasis ring. Update skill rule 4 so side controls may deviate from generic `tab-glass-active` **while keeping focus-visible**. 4. **Design-system:** note that Buy/Sell **side** controls may use semantic fills; chart/status tokens remain the source; **not** for primary money CTAs. 5. **Tests:** heading overflow; chip absent disconnected + connected; selector colors/classes + existing keyboard tests; `/limits` same classes. ## Acceptance criteria - [ ] **T1.** Default desktop ticket width: heading shows full **Buy {base}** / **Sell {base}** for hub symbols (cLUNC, cUSTC, UST1, USTR). No `Buy c…`. - [ ] **T2.** Compact ticket-header Connect Wallet / address chip is **gone** (disconnected and connected). - [ ] **T3.** Disconnected users still connect via header **and** ticket footer Connect Wallet. No regression on Place limit / Market disconnected path ([#494](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/494) pattern). - [ ] **T4.** Invert control remains usable; heading tracks displayed base ([#524](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/524)). - [ ] **T5.** Buy control reads green; Sell control reads red, both themes, selected and idle distinguishable without color alone (`aria-checked` + emphasis). - [ ] **T6.** `/limits` Single (and any other `LimitOrderBidAskSideSelector`) matches. Limit/Market tabs and Place/Market CTAs stay blue primary. - [ ] **T7.** Keyboard + click side change, escrow clear/MAX reapply unchanged ([#153](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/153), [#155](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/155)). - [ ] **T8.** Docs + skills updated. `make verify-issue-<iid>`. ## Test plan — functional paths ### Heading / wallet chrome - [ ] RTL: disconnected ticket — `trade-ticket-heading` is `Buy {symbol}`; no header chip; footer is Connect Wallet; `openWalletModal` from footer still fires. - [ ] RTL: connected — heading full; no address pill in ticket header; shell wallet chip still shows address. - [ ] Invert: heading `Buy cUSTC` ↔ `Buy UST1` (existing TradePage invert tests) still pass; heading not truncated after invert. - [ ] Long synthetic symbol (e.g. 24 chars): no overlap onto Limit/Market tabs; invert still clickable. - [ ] Select-a-pair empty state heading untruncated. ### Side colors / behavior - [ ] Click Buy → `aria-checked=true` on bid; ask false; heading verb Buy; bid button uses buy/positive styles. - [ ] Click Sell → ask checked; heading Sell; ask uses sell/negative styles. - [ ] Keyboard Arrow/Home/End still move side and focus. - [ ] Compact + non-compact densities. - [ ] `/limits` place card: same colors; ladder/single unrelated chrome unchanged. - [ ] Light theme + dark theme screenshots or computed styles: contrast vs background. - [ ] Side change still clears manual amount / reapplies MAX ([#155](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/155)). ### Regression - [ ] Place limit / Market footer dock ([#527](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/527)). - [ ] Crossing / pause / blacklist banners still visible. - [ ] Order book Bid/Ask column colors unchanged (book stays bid/ask vocabulary). ## Test plan — attack, hack, and abuse vectors - [ ] **A1. Wrong-side submit.** Visual restyle must not invert `side` mapping. Place a bid and an ask (or unit-assert the submit payload / `factorySide`): Buy still bid/token1 escrow, Sell still ask/token0. A green/red swap bug is a **fund-direction** bug. - [ ] **A2. Spoofed symbol in heading.** `displayBase` from indexer/factory must remain text content (no `innerHTML`). Oversized / RTL / ZWJ symbols wrap; they must not paint over Sell or the footer CTA. - [ ] **A3. Hidden connect.** Removing the chip must not remove the only connect path when the header is scrolled off (footer CTA remains). Do not rely on a hidden duplicate modal opener. - [ ] **A4. Connected no-op impersonation.** Do not replace the chip with a static address the dApp does not own; connected identity stays the header wallet control (existing disconnect flow). - [ ] **A5. Contrast / misread.** Unselected Sell must not equal `alert-error` so users do not treat Sell as a blocking error. Selected Buy must not look like a success toast that implies a fill already happened. - [ ] **A6. Focus ring removal.** Custom green/red fills must not drop `:focus-visible`; keyboard users can still see which side is focused. - [ ] **A7. Theme injection.** If styles use CSS variables, a user stylesheet / `data-theme` flip must not leave white-on-white side buttons (unreadable → misclick). - [ ] **A8. Limits vs Trade drift.** One component: changing colors on `/trade` cannot leave `/limits` on old `tab-glass-active` only (inconsistent direction encoding). ## Verification criteria ```bash make lint-frontend make test-frontend # targeted: # TradePage.test.tsx (heading / invert) # LimitOrderBidAskSideSelector.test.tsx # LimitOrdersPage / ticket disconnect paths as applicable python3 scripts/check_design_tokens.py make verify-issue-<iid> ``` Manual (dark + light, desktop ticket column ~320px): hub pair cLUNC/UST1 — heading **Buy cLUNC** fully visible, no compact Connect Wallet in the ticket header, footer Connect Wallet when disconnected, Buy green / Sell red with a clear selected state, invert updates heading, `/limits` matches. Confirm Place limit still blue.

PlasticDigits commented 2026-08-18 12:09:30 +00:00 (Migrated from gitlab.com)

Copy link

marked as related to #561

marked as related to #561

PlasticDigits commented 2026-08-18 12:10:47 +00:00 (Migrated from gitlab.com)

Copy link

mentioned in issue #561

mentioned in issue #561

PlasticDigits commented 2026-08-19 01:09:32 +00:00 (Migrated from gitlab.com)

Copy link

mentioned in commit a1f01f8696

mentioned in commit a1f01f86961dbd631741fc1a25a2eea7f3e14b26

PlasticDigits commented 2026-08-19 01:09:55 +00:00 (Migrated from gitlab.com)

Copy link

mentioned in merge request !1092

mentioned in merge request !1092

PlasticDigits commented 2026-08-19 01:22:22 +00:00 (Migrated from gitlab.com)

Copy link

mentioned in merge request !1095

mentioned in merge request !1095

PlasticDigits commented 2026-08-19 02:15:03 +00:00 (Migrated from gitlab.com)

Copy link

mentioned in commit b231ad78f4

mentioned in commit b231ad78f46c20ae6eb36a2b9a2519d491128653

PlasticDigits (Migrated from gitlab.com) closed this issue 2026-08-19 02:15:03 +00:00

PlasticDigits commented 2026-08-19 02:16:46 +00:00 (Migrated from gitlab.com)

Copy link

Post-merge note (!1092 on main). T563 heading wrap, no compact ticket Connect Wallet, green Buy / red Sell is on main (stacked on #561 workspace).

Remaining:

• Manual: desktop ticket ~320px, hub pair cLUNC/UST1 heading Buy cLUNC fully visible; footer Connect Wallet when disconnected; Place/Market CTA still blue.
• CI was not waited. Run make verify-issue-563.

**Post-merge note (!1092 on main).** T563 heading wrap, no compact ticket Connect Wallet, green Buy / red Sell is on `main` (stacked on #561 workspace). Remaining: - Manual: desktop ticket ~320px, hub pair cLUNC/UST1 heading **Buy cLUNC** fully visible; footer Connect Wallet when disconnected; Place/Market CTA still blue. - CI was not waited. Run `make verify-issue-563`.

PlasticDigits commented 2026-08-19 02:28:46 +00:00 (Migrated from gitlab.com)

Copy link

mentioned in issue #573

mentioned in issue #573

PlasticDigits commented 2026-08-19 02:28:58 +00:00 (Migrated from gitlab.com)

Copy link

marked as related to #573

marked as related to #573

PlasticDigits commented 2026-08-28 05:28:47 +00:00 (Migrated from gitlab.com)

Copy link

mentioned in issue #693

mentioned in issue #693

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

renovate/tokio-util-0.x-lockfile

renovate/thiserror-2.x-lockfile

renovate/serde_json-1.x-lockfile

renovate/serde-monorepo

renovate/libc-0.x-lockfile

renovate/chrono-0.x-lockfile

cac-design-issue-1206

cac-design-issue-1317

cac-design-issue-1316

cac-design-issue-1311

cac-design-issue-1300

cac-design-issue-1306

cac-design-issue-1305

cac-design-issue-1302

cac-design-issue-1277

No results found.

Labels

Clear labels   

agent:fix_bugfix

  

agent:fix_conflicts

  

agent:fix_security

  

agent:gap_analysis

  

agent:implement

  

agent:implement

Queue implement gate

  

agent:implement

Queue implement gate

  

agent:open_issues

  

agent:ready

  

agent:research

  

agent:security_audit

  

agent:verify

  

architecture

Architecture

  

backend

API and services

  

blocker:hybrid

Blocks hybrid launch

  

blocker:launch

Blocks launch

  

blocker:limit-orders

Blocks limits launch

  

blocker:v2

Blocks v2

  

block:log_only

  

block:security

  

bug

  

ci

  

contracts

Smart contracts

  

correctness

  

deploy

  

dev

  

devops

  

docs

  

documentation

  

duplicate

  

e2e

  

enhancement

  

epic

Epic

  

feature

  

frontend

  

functional-completion

Functional

  

gas

  

good first issue

  

governance

  

help wanted

  

high-risk

  

hooks

  

hybrid

Hybrid swaps

  

indexer

Indexer

  

infra

CI/CD

  

infrastructure

  

integrators

  

invalid

  

launch-blocker

  

limit-orders

Limit orders

  

localnet

  

localterra

  

low priority

  

missing-implementation

Implementation

  

needs-design

Design decision required

  

ops

  

performance

  

priority

high

  

priority

medium

  

product

  

qa

  

QA

  

question

  

ready

Definition of Ready

  

ready

Definition of Ready

  

research

  

scripts

  

security

Security

  

security-hardening

Security hardening

  

smartcontracts

  

tech-debt

  

testing

Testing

  

ux

  

UX

  

v2

Pool-only swaps

  

verification

  

wontfix

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

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

code/cl8y-dex-terraclassic#563

No description provided.