code/cl8y-dex-terraclassic

Fork 0

Active nav item has no visual distinction (current page is not indicated in header) #137

New issue

Closed

opened 2026-05-06 15:18:12 +00:00 by totdking · 8 comments

totdking commented

2026-05-06 15:18:12 +00:00

(Migrated from gitlab.com)

No description provided.

totdking commented

2026-05-06 15:21:08 +00:00

(Migrated from gitlab.com)

Issue Summary

The header navigation (Swap, Pool, Limits, Trade, Charts) shows no active/selected state for the currently loaded route. All nav items look identical regardless of which page the user is on. A user cannot tell at a glance which section of the app they are in.

Reproduction Steps

Open the app at http://127.0.0.1:3000
Navigate to /swap , observe the Swap nav item
Navigate to /trade , observe the Trade nav item
Navigate to /limits, /pool, /charts , repeat observation
At each route, compare the active nav item against the others — no visual difference is present

Expected Behavior

The nav item corresponding to the current route should have a distinct visual treatment, underline, highlight, filled background, bold weight, or color change so the user always knows where they are in the app.

Actual Behavior

All nav items render identically on every route. No active, selected, or current-page indicator is applied to the matching nav item. The user has no visual anchor for their current location.

Environment Details

Field	Value
OS	macOS (Apple M1 Pro, 14-inch)
Browser	Google Chrome (desktop)
Viewport	1470×864
Network	`localterra` (local Docker)
Frontend	`VITE_NETWORK=local npm run dev`

Wallet / Device Details

Wallet: simulated dev wallet
Wallet state: Connected

Screenshots

See attached screenshots showing the header nav on /swap, /trade, and /limits — all nav items appear identical with no active state indicator.

swap

{width=900 height=545}
trade

{width=900 height=545}
limits

{width=900 height=545}

Severity / Impact

P2 Polish. No functionality is broken but the missing active state is a standard navigation affordance expected on every web app. Without it, users, especially CEX migrants unfamiliar with the layout lose their orientation anchor. Affects all routes. Found under W1-C1 (Global chrome; Display dimension).

cc: @PlasticDigits

### Issue Summary The header navigation (Swap, Pool, Limits, Trade, Charts) shows no active/selected state for the currently loaded route. All nav items look identical regardless of which page the user is on. A user cannot tell at a glance which section of the app they are in. --- ### Reproduction Steps 1. Open the app at `http://127.0.0.1:3000` 2. Navigate to `/swap` , observe the Swap nav item 3. Navigate to `/trade` , observe the Trade nav item 4. Navigate to `/limits`, `/pool`, `/charts` , repeat observation 5. At each route, compare the active nav item against the others — no visual difference is present --- ### Expected Behavior The nav item corresponding to the current route should have a distinct visual treatment, underline, highlight, filled background, bold weight, or color change so the user always knows where they are in the app. --- ### Actual Behavior All nav items render identically on every route. No active, selected, or current-page indicator is applied to the matching nav item. The user has no visual anchor for their current location. --- ### Environment Details | Field | Value | |-------|-------| | OS | macOS (Apple M1 Pro, 14-inch) | | Browser | Google Chrome (desktop) | | Viewport | 1470×864 | | Network | `localterra` (local Docker) | | Frontend | `VITE_NETWORK=local npm run dev` | --- ### Wallet / Device Details - **Wallet:** simulated dev wallet - **Wallet state:** Connected --- ### Screenshots > See attached screenshots showing the header nav on `/swap`, `/trade`, and `/limits` — all nav items appear identical with no active state indicator. * swap ![image.png](/uploads/f7a5858cc1e278fdb50da5c7dd0d551d/image.png){width=900 height=545} * trade ![image.png](/uploads/f78c94505002a2a5758087ffaa70a60d/image.png){width=900 height=545} * limits ![image.png](/uploads/4518f35869bdcfb00cbcd1127638e16e/image.png){width=900 height=545} --- ### Severity / Impact **P2 Polish.** No functionality is broken but the missing active state is a standard navigation affordance expected on every web app. Without it, users, especially CEX migrants unfamiliar with the layout lose their orientation anchor. Affects all routes. Found under W1-C1 (Global chrome; Display dimension). cc: @PlasticDigits

totdking commented

2026-05-06 16:19:14 +00:00

(Migrated from gitlab.com)

mentioned in issue #116

Brouie commented

2026-05-08 02:27:06 +00:00

(Migrated from gitlab.com)

mentioned in commit 38f439f549

mentioned in commit 38f439f5497d2fe970bd0f0019e4f53b1961836d

Brouie commented

2026-05-08 02:28:14 +00:00

(Migrated from gitlab.com)

@totdking — fix pushed for verification.

what changed

.app-nav-link-active CSS rule existed but its values were too faint to read as visually distinct — 8% / 2% gradient opacity on background, 12% opacity on border-color. hover state used a real background color (var(--control-surface-hover)) plus translateY transform, so hover read STRONGER than active.

bumped to use existing design tokens at full visibility:

background: var(--accent-surface) (real orange tint, matches the existing accent surface convention)
border-color: rgba(255, 168, 77, 0.45) — 4× previous opacity
added inset 0 -2px 0 var(--accent) — bottom underline using the accent color, the canonical "you are here" nav cue
inset top highlight bumped 0.18 -> 0.22
outer drop shadow opacity bumped 0.16 -> 0.18

functional logic untouched — Layout.tsx:120 already correctly applies the active class via React Router NavLink isActive prop. CSS-only visibility fix.

scope: covers all 5 selectors sharing the active rule (.app-nav-link-active, .app-footer-theme-button-active, .app-mobile-link-active, .app-mobile-more-active, .network-badge-active).

verification needed

branch: fix/glab-137-active-nav-indicator
commit: 38f439f

how to verify

checkout the branch: git checkout fix/glab-137-active-nav-indicator
cd frontend-dapp && npm run dev
open the app, navigate between Swap / Pool / Limits / Trade / Charts
expected: the nav item matching the current route shows
- subtle orange-tinted background
- thin orange bottom underline
- visibly distinct from inactive items
mobile / footer / network-badge: same uplift, verify on mobile breakpoint if you have time

verification gate (already passing on my side)

tsc -b clean
npm run test:unit — 315/315 PASS (43 files)
npm run lint — 0 errors. 3 pre-existing warnings on LimitOrdersPage.tsx (untouched by this fix)

ping when verified, i'll open the MR after your sign-off.

@totdking — fix pushed for verification. ## what changed `.app-nav-link-active` CSS rule existed but its values were too faint to read as visually distinct — 8% / 2% gradient opacity on background, 12% opacity on border-color. hover state used a real background color (`var(--control-surface-hover)`) plus translateY transform, so hover read STRONGER than active. bumped to use existing design tokens at full visibility: - background: `var(--accent-surface)` (real orange tint, matches the existing accent surface convention) - border-color: `rgba(255, 168, 77, 0.45)` — 4× previous opacity - added `inset 0 -2px 0 var(--accent)` — bottom underline using the accent color, the canonical "you are here" nav cue - inset top highlight bumped 0.18 -> 0.22 - outer drop shadow opacity bumped 0.16 -> 0.18 functional logic untouched — `Layout.tsx:120` already correctly applies the active class via React Router NavLink `isActive` prop. CSS-only visibility fix. scope: covers all 5 selectors sharing the active rule (`.app-nav-link-active`, `.app-footer-theme-button-active`, `.app-mobile-link-active`, `.app-mobile-more-active`, `.network-badge-active`). ## verification needed - branch: `fix/glab-137-active-nav-indicator` - commit: `38f439f` ## how to verify 1. checkout the branch: `git checkout fix/glab-137-active-nav-indicator` 2. `cd frontend-dapp && npm run dev` 3. open the app, navigate between Swap / Pool / Limits / Trade / Charts 4. expected: the nav item matching the current route shows - subtle orange-tinted background - thin orange bottom underline - visibly distinct from inactive items 5. mobile / footer / network-badge: same uplift, verify on mobile breakpoint if you have time ## verification gate (already passing on my side) - `tsc -b` clean - `npm run test:unit` — 315/315 PASS (43 files) - `npm run lint` — 0 errors. 3 pre-existing warnings on `LimitOrdersPage.tsx` (untouched by this fix) ping when verified, i'll open the MR after your sign-off.

PlasticDigits commented

2026-05-09 04:02:17 +00:00

(Migrated from gitlab.com)

@totdking Please verify so we can close

PlasticDigits commented

2026-05-09 09:54:12 +00:00

(Migrated from gitlab.com)

mentioned in commit a474f995dd

mentioned in commit a474f995dd9e74d843e7594eaf11cb1b7faaf68b

totdking commented

2026-05-22 13:59:49 +00:00

(Migrated from gitlab.com)