code/cl8y-dex-terraclassic

Fork 0

VP-1 UI: Limit Ladder — "Place ladder" submit button is unstyled (plain `btn-neo` instead of primary CTA) #296

New issue

Closed

opened 2026-06-03 16:36:02 +00:00 by totdking · 7 comments

totdking commented

2026-06-03 16:36:02 +00:00

(Migrated from gitlab.com)

No description provided.

totdking commented

2026-06-03 16:38:01 +00:00

(Migrated from gitlab.com)

Found during: OE-3 checklist testing — visual inspection of the limit ladder panel

Summary:

The "Place N-rung ladder" submit button renders with a plain, flat background using the btn-neo class instead of the orange primary CTA style (btn-primary btn-cta) used on all other order submission buttons. It does not visually communicate that it is the primary action on the panel.

Reproduction steps

Navigate to /limits or /trade/:pairAddr and open the Limit Ladder section
Observe the "Place N-rung ladder" button at the bottom of the panel
Compare it to the "Place limit" button on the single-order form
Observe: the ladder button is flat/plain with no accent color

Expected behavior

The primary submit button on the ladder panel should use btn-primary btn-cta (same as all other order submission buttons), producing the orange accent background that visually identifies it as the primary action.

Actual behavior

Button renders with btn-neo — plain background, no accent color, visually indistinguishable from secondary/neutral controls.

Screenshot

{width=900 height=279}

Verified root cause (code read and confirmed)

LimitOrderLadderPanel.tsx line 292–294:

<button
  type="button"
  className="btn-neo w-full"

Compare to the Place limit submit button in TradeOrderTicket.tsx line 801–804:

<button
  type="button"
  className="btn-primary btn-cta w-full !text-xs"

The ladder button is missing btn-primary btn-cta — it uses btn-neo which is the neutral/secondary button style.

Impact assessment

User-facing: The submit button blends into the panel background, making the primary action visually unclear. Inconsistent with every other order-submission button in the UI.
Related checklist items: VP-1 (consistent styling across all pages), VP-4 (hover/active/focus states — btn-neo may also have a different hover state than btn-primary).

Environment

Chain: localterra
LCD: http://localhost:1317
Wallet: Keplr (Terra Classic)
Browser: Chrome
Page: /limits
Network throttle applied: No

Severity: P3: Nit — cosmetic only, does not affect ladder functionality.

Suggested GitLab label/title prefix: UI: or fix(ladder):

Related checklist items: OE-3, VP-1

cc: @PlasticDigits

**Found during:** OE-3 checklist testing — visual inspection of the limit ladder panel ### **Summary:** The "Place N-rung ladder" submit button renders with a plain, flat background using the `btn-neo` class instead of the orange primary CTA style (`btn-primary btn-cta`) used on all other order submission buttons. It does not visually communicate that it is the primary action on the panel. --- ### Reproduction steps 1. Navigate to `/limits` or `/trade/:pairAddr` and open the Limit Ladder section 2. Observe the "Place N-rung ladder" button at the bottom of the panel 3. Compare it to the "Place limit" button on the single-order form 4. Observe: the ladder button is flat/plain with no accent color --- ### Expected behavior The primary submit button on the ladder panel should use `btn-primary btn-cta` (same as all other order submission buttons), producing the orange accent background that visually identifies it as the primary action. --- ### Actual behavior Button renders with `btn-neo` — plain background, no accent color, visually indistinguishable from secondary/neutral controls. --- ### Screenshot ![image.png](/uploads/bf16f193aad3415c9b11ba7780557935/image.png){width=900 height=279} --- ### Verified root cause (code read and confirmed) `LimitOrderLadderPanel.tsx` line 292–294: ```jsx <button type="button" className="btn-neo w-full" ``` Compare to the Place limit submit button in `TradeOrderTicket.tsx` line 801–804: ```jsx <button type="button" className="btn-primary btn-cta w-full !text-xs" ``` The ladder button is missing `btn-primary btn-cta` — it uses `btn-neo` which is the neutral/secondary button style. --- ### Impact assessment - **User-facing:** The submit button blends into the panel background, making the primary action visually unclear. Inconsistent with every other order-submission button in the UI. - **Related checklist items:** VP-1 (consistent styling across all pages), VP-4 (hover/active/focus states — `btn-neo` may also have a different hover state than `btn-primary`). --- ### Environment - Chain: localterra - LCD: [http://localhost:1317](http://localhost:1317) - Wallet: Keplr (Terra Classic) - Browser: Chrome - Page: `/limits` - Network throttle applied: No --- **Severity:** P3: Nit — cosmetic only, does not affect ladder functionality. **Suggested GitLab label/title prefix:** `UI:` or `fix(ladder):` **Related checklist items:** OE-3, VP-1 cc: @PlasticDigits

totdking commented

2026-06-03 17:28:40 +00:00

(Migrated from gitlab.com)

mentioned in issue #291

Brouie commented

2026-06-04 07:09:21 +00:00

(Migrated from gitlab.com)

Confirmed (frontend-only, visual — your layer). LimitOrderLadderPanel.tsx:294 sets className="btn-neo w-full" on the ladder submit (data-testid="ladder-place-submit"), vs the primary submit in TradeOrderTicket.tsx:804 which uses btn-primary btn-cta w-full. One-line fix to match. Real, cosmetic. @totdking

Confirmed (frontend-only, visual — your layer). `LimitOrderLadderPanel.tsx:294` sets `className="btn-neo w-full"` on the ladder submit (`data-testid="ladder-place-submit"`), vs the primary submit in `TradeOrderTicket.tsx:804` which uses `btn-primary btn-cta w-full`. One-line fix to match. Real, cosmetic. @totdking

Brouie commented

2026-06-05 03:21:48 +00:00

(Migrated from gitlab.com)

mentioned in merge request !757

Brouie commented

2026-06-05 03:23:13 +00:00

(Migrated from gitlab.com)

Fixed in MR !757. One-liner: the "Place ladder" submit was btn-neo (neutral); switched it to the primary CTA class (btn-primary btn-cta) the other order-submit buttons use. Cosmetic only — visual check is yours. @PlasticDigits

PlasticDigits commented

2026-06-05 03:24:33 +00:00

(Migrated from gitlab.com)

mentioned in commit 6e42a5b6f6

mentioned in commit 6e42a5b6f6a8a5b91735b5ad60d68168450254b0

PlasticDigits commented

2026-06-05 04:44:04 +00:00

(Migrated from gitlab.com)

Verification — GitLab #296 (VP-1 UI: Limit Ladder submit button styling)

Verdict: All acceptance criteria PASS on main (fix landed in !757, commit 84dae10 / merge 6e42a5b). No additional code changes required from this verification pass.

Acceptance mapping

Criterion	Result	How verified
Ladder submit uses `btn-primary btn-cta` (not `btn-neo`)	PASS	`LimitOrderLadderPanel.tsx` submit: `className="btn-primary btn-cta w-full !text-xs"`; no `btn-neo` on `[data-testid="ladder-place-submit"]`
Matches single-order Place limit CTA	PASS	Same class string as `TradeOrderTicket.tsx` limit submit (`btn-primary btn-cta w-full !text-xs`)
Orange primary CTA / accent background (visual)	PASS	Playwright on `/limits` (Simulated Wallet, pair selected, Ladder mode): `btn-primary` + `btn-cta` present; computed `background-image` non-`none` (accent gradient)
MR fix present on default branch	PASS	`glab mr view 39` → merged; `git log` shows #296 in `84dae10`
Frontend typecheck	PASS	`cd frontend-dapp && npx tsc -b` (clean)
Repro steps (OE-3 / `/limits` ladder panel)	PASS	LocalTerra + `make deploy-local` env; Playwright flow: connect → select pair → Ladder tab → assert submit styling

Commands / artifacts

glab issue view 296 -R PlasticDigits/cl8y-dex-terraclassic --comments
glab mr view 39 -R PlasticDigits/cl8y-dex-terraclassic
rg 'ladder-place-submit|btn-primary btn-cta' frontend-dapp/src/components/trade/LimitOrderLadderPanel.tsx
PLAYWRIGHT_SKIP_CHAIN=1 npx playwright test (ephemeral spec: connect wallet → /limits → pair index 0 → Ladder → assert classes + computed background)

Notes

Cosmetic-only (P3); functionality unchanged.
VP-4 hover/focus states inherit shared .btn-primary.btn-cta rules in index.css (same as other order submits).

Closing as verified on main.

## Verification — GitLab #296 (VP-1 UI: Limit Ladder submit button styling) **Verdict:** All acceptance criteria **PASS** on `main` (fix landed in [!757](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/merge_requests/39), commit `84dae10` / merge `6e42a5b`). No additional code changes required from this verification pass. ### Acceptance mapping | Criterion | Result | How verified | |-----------|--------|--------------| | Ladder submit uses `btn-primary btn-cta` (not `btn-neo`) | **PASS** | `LimitOrderLadderPanel.tsx` submit: `className="btn-primary btn-cta w-full !text-xs"`; no `btn-neo` on `[data-testid="ladder-place-submit"]` | | Matches single-order Place limit CTA | **PASS** | Same class string as `TradeOrderTicket.tsx` limit submit (`btn-primary btn-cta w-full !text-xs`) | | Orange primary CTA / accent background (visual) | **PASS** | Playwright on `/limits` (Simulated Wallet, pair selected, Ladder mode): `btn-primary` + `btn-cta` present; computed `background-image` non-`none` (accent gradient) | | MR fix present on default branch | **PASS** | `glab mr view 39` → **merged**; `git log` shows #296 in `84dae10` | | Frontend typecheck | **PASS** | `cd frontend-dapp && npx tsc -b` (clean) | | Repro steps (OE-3 / `/limits` ladder panel) | **PASS** | LocalTerra + `make deploy-local` env; Playwright flow: connect → select pair → Ladder tab → assert submit styling | ### Commands / artifacts - `glab issue view 296 -R PlasticDigits/cl8y-dex-terraclassic --comments` - `glab mr view 39 -R PlasticDigits/cl8y-dex-terraclassic` - `rg 'ladder-place-submit|btn-primary btn-cta' frontend-dapp/src/components/trade/LimitOrderLadderPanel.tsx` - `PLAYWRIGHT_SKIP_CHAIN=1 npx playwright test` (ephemeral spec: connect wallet → `/limits` → pair index 0 → Ladder → assert classes + computed background) ### Notes - Cosmetic-only (P3); functionality unchanged. - VP-4 hover/focus states inherit shared `.btn-primary.btn-cta` rules in `index.css` (same as other order submits). Closing as verified on `main`.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-06-05 04:44:09 +00:00