Design QA checklist: glass theme, mobile shell, and shared UI #44

Closed
opened 2026-03-26 12:29:13 +00:00 by PlasticDigits · 15 comments
PlasticDigits commented 2026-03-26 12:29:13 +00:00 (Migrated from gitlab.com)

Purpose

Design QA pass for @brouie after the recent glass-theme rollout and mobile shell work (commit area: layout shell, shared components, theme tokens, core pages). Confirm visual consistency, no regressions, and acceptable behavior across breakpoints and themes.

Environment: Run the dapp locally or use the latest deployed preview. Test with Chrome and at least one of Safari (iOS) / Firefox if time allows.


Global — themes & shell

  • Dark theme (default): Background, surfaces, borders, and text meet contrast expectations; no harsh banding or unreadable muted text.
  • Light theme: Palette reads as intentional (not “inverted by accident”); cards and inputs remain legible; no pure white-on-orange clashes.
  • Theme persistence: Toggle theme, hard refresh, navigate between routes — selected theme sticks.
  • No stray gaps: No visible gap above #root or unexpected left/right gutters on mobile/tablet/desktop (full-width shell, inner max-width where intended).
  • Header: Brand + glass logo load correctly (no broken image); alignment and spacing look balanced next to wallet area.
  • Desktop navigation: Primary links and More menu work; no duplicate active states; dropdown/sheet does not clip under other layers.

Mobile-only bottom navigation

  • Bottom bar appears only on small viewports (phone); hidden on tablet/desktop widths — no duplicate nav with the header.
  • Bar is flush to the bottom, full width, with rounded corners on the top edge only (not a floating pill with side margins).
  • Safe area: On notched devices (iOS), content clears the home indicator; no overlap with system UI.
  • Active route is clear; tap targets feel comfortable; no accidental double-taps opening wrong routes.
  • More sheet: opens/closes reliably; theme controls reachable; scroll inside sheet if content overflows.

Common UI elements (regression sweep)

  • Buttons: Primary, secondary, disabled, hover/focus — consistent radius, height, and label contrast.
  • Inputs & forms: Borders, focus ring, placeholder legibility, error states (if shown).
  • Cards / panels / stat blocks: Padding, borders, and hierarchy match the new glass style; no mixed old utility classes standing out.
  • Badges / tags: Readable at small sizes; color meaning still clear (e.g. network, status).
  • Modals: Backdrop, focus trap feel OK; close control obvious; scroll for long content; mobile full-width behavior acceptable.
  • Loading: Spinner visible and centered where used; skeleton blocks don’t jump layout badly when data arrives.
  • Wallet: Connect / disconnect / wrong network flows; NetworkBadge and WalletButton align with header; WalletModal styling matches theme.

Pages touched in this rollout (spot-check)

For each route, skim above-the-fold and one interaction (form field, tab, or primary CTA):

  • Swap — pair inputs, slippage/settings if present, submit affordance.
  • Pool — list/cards, empty states, any indexer error copy is readable and on-brand.
  • Charts — chart chrome, time range controls, loading/error.
  • Trader — tables/cards, filters, readability of numbers.
  • Protocol — sections and stats; long content scrolls cleanly.
  • Create pair — form layout, validation feedback.
  • Tiers — tier cards/tables; comparison readable on narrow screens.

Accessibility & polish (quick)

  • Keyboard: Tab through header nav, modal, and mobile More — focus visible.
  • Reduced motion: If OS prefers reduced motion, no jarring infinite animations (if any were added).
  • Zoom: Browser zoom to ~125% — no horizontal scroll on main layout unless unavoidable (wide tables).

Sign-off

  • Notes / screenshots attached for any blockers or nice-to-follow-ups (don’t block merge on nitpicks unless product asks).

Related change context: Glass/orange theme tokens, shared CSS (index.css, theme-dark.css, theme-light.css), Layout shell with desktop nav + mobile bottom bar + More sheet, restyled shared UI and wallet components, page copy/layout polish on core routes, new public/assets/cl8y-dex-glass-logo.svg.

## Purpose Design QA pass for **@brouie** after the recent glass-theme rollout and mobile shell work (commit area: layout shell, shared components, theme tokens, core pages). Confirm visual consistency, no regressions, and acceptable behavior across breakpoints and themes. **Environment:** Run the dapp locally or use the latest deployed preview. Test with **Chrome** and at least one of **Safari (iOS)** / **Firefox** if time allows. --- ## Global — themes & shell - [ ] **Dark theme (default):** Background, surfaces, borders, and text meet contrast expectations; no harsh banding or unreadable muted text. - [ ] **Light theme:** Palette reads as intentional (not “inverted by accident”); cards and inputs remain legible; no pure white-on-orange clashes. - [ ] **Theme persistence:** Toggle theme, hard refresh, navigate between routes — selected theme sticks. - [ ] **No stray gaps:** No visible gap above `#root` or unexpected left/right gutters on mobile/tablet/desktop (full-width shell, inner max-width where intended). - [ ] **Header:** Brand + **glass logo** load correctly (no broken image); alignment and spacing look balanced next to wallet area. - [ ] **Desktop navigation:** Primary links and **More** menu work; no duplicate active states; dropdown/sheet does not clip under other layers. --- ## Mobile-only bottom navigation - [ ] Bottom bar appears **only on small viewports** (phone); **hidden** on tablet/desktop widths — no duplicate nav with the header. - [ ] Bar is **flush to the bottom**, **full width**, with **rounded corners on the top edge only** (not a floating pill with side margins). - [ ] **Safe area:** On notched devices (iOS), content clears the home indicator; no overlap with system UI. - [ ] Active route is clear; tap targets feel comfortable; no accidental double-taps opening wrong routes. - [ ] **More** sheet: opens/closes reliably; theme controls reachable; scroll inside sheet if content overflows. --- ## Common UI elements (regression sweep) - [ ] **Buttons:** Primary, secondary, disabled, hover/focus — consistent radius, height, and label contrast. - [ ] **Inputs & forms:** Borders, focus ring, placeholder legibility, error states (if shown). - [ ] **Cards / panels / stat blocks:** Padding, borders, and hierarchy match the new glass style; no mixed old utility classes standing out. - [ ] **Badges / tags:** Readable at small sizes; color meaning still clear (e.g. network, status). - [ ] **Modals:** Backdrop, focus trap feel OK; close control obvious; scroll for long content; mobile full-width behavior acceptable. - [ ] **Loading:** **Spinner** visible and centered where used; **skeleton** blocks don’t jump layout badly when data arrives. - [ ] **Wallet:** Connect / disconnect / wrong network flows; **NetworkBadge** and **WalletButton** align with header; **WalletModal** styling matches theme. --- ## Pages touched in this rollout (spot-check) For each route, skim **above-the-fold** and one interaction (form field, tab, or primary CTA): - [ ] **Swap** — pair inputs, slippage/settings if present, submit affordance. - [ ] **Pool** — list/cards, empty states, any indexer error copy is readable and on-brand. - [ ] **Charts** — chart chrome, time range controls, loading/error. - [ ] **Trader** — tables/cards, filters, readability of numbers. - [ ] **Protocol** — sections and stats; long content scrolls cleanly. - [ ] **Create pair** — form layout, validation feedback. - [ ] **Tiers** — tier cards/tables; comparison readable on narrow screens. --- ## Accessibility & polish (quick) - [ ] **Keyboard:** Tab through header nav, modal, and mobile More — focus visible. - [ ] **Reduced motion:** If OS prefers reduced motion, no jarring infinite animations (if any were added). - [ ] **Zoom:** Browser zoom to ~125% — no horizontal scroll on main layout unless unavoidable (wide tables). --- ## Sign-off - [ ] Notes / screenshots attached for any **blockers** or **nice-to-follow-ups** (don’t block merge on nitpicks unless product asks). **Related change context:** Glass/orange theme tokens, shared CSS (`index.css`, `theme-dark.css`, `theme-light.css`), `Layout` shell with desktop nav + mobile bottom bar + More sheet, restyled shared UI and wallet components, page copy/layout polish on core routes, new `public/assets/cl8y-dex-glass-logo.svg`.
PlasticDigits commented 2026-03-26 12:29:13 +00:00 (Migrated from gitlab.com)

assigned to @Brouie

assigned to @Brouie
Brouie commented 2026-03-27 01:33:52 +00:00 (Migrated from gitlab.com)

Design QA pass (light + dark, desktop):

PASS:

  • Dark theme: backgrounds, surfaces, text contrast all good
  • Light theme: warm palette, intentional, cards legible
  • Theme persistence: toggle + hard refresh works
  • Header: glass logo loads, alignment good, wallet displays correctly
  • Swap page: inputs, token selectors, disabled state all clean
  • Pool page: pair cards, liquidity amounts, provide/withdraw tabs render
  • Charts page: stat blocks, search, sort/order controls, leaderboard section

BUG — all dropdowns unreadable in light mode:

  • More nav dropdown: dark background with muted text, nearly invisible
  • Charts Sort dropdown: same issue
  • Pool Sort/Order dropdown: same
  • Dark mode dropdowns are fine — issue is light mode only
  • Affects: all dropdown/select menus across the app

NOTE:

  • Pool page input fields (Asset A/B Amount) have colored label text barely visible against dark input backgrounds in light mode
  • Console: many 500s from LCD cosmwasm queries (contracts not deployed on local — not a theme bug)
  • Pages load slowly due to LCD 500s — did not reach Trader/Protocol/Fee Tiers/Create Pair (will retest when contracts deployed)

Tested: Chrome desktop, light + dark themes.

Design QA pass (light + dark, desktop): PASS: - Dark theme: backgrounds, surfaces, text contrast all good - Light theme: warm palette, intentional, cards legible - Theme persistence: toggle + hard refresh works - Header: glass logo loads, alignment good, wallet displays correctly - Swap page: inputs, token selectors, disabled state all clean - Pool page: pair cards, liquidity amounts, provide/withdraw tabs render - Charts page: stat blocks, search, sort/order controls, leaderboard section BUG — all dropdowns unreadable in light mode: - More nav dropdown: dark background with muted text, nearly invisible - Charts Sort dropdown: same issue - Pool Sort/Order dropdown: same - Dark mode dropdowns are fine — issue is light mode only - Affects: all dropdown/select menus across the app NOTE: - Pool page input fields (Asset A/B Amount) have colored label text barely visible against dark input backgrounds in light mode - Console: many 500s from LCD cosmwasm queries (contracts not deployed on local — not a theme bug) - Pages load slowly due to LCD 500s — did not reach Trader/Protocol/Fee Tiers/Create Pair (will retest when contracts deployed) Tested: Chrome desktop, light + dark themes.
Brouie commented 2026-03-27 04:22:58 +00:00 (Migrated from gitlab.com)

Design QA continued (2026-03-27, desktop Chrome, dark + light):

Trader (/trader):

  • Search input + SEARCH + MY PROFILE render correctly
  • MY PROFILE navigates to connected wallet address
  • Empty state (Trader not found) displays in both themes
  • RETRY and MY PROFILE buttons flat/boxy — neobrutalist leftover, doesn't match glass rounded style

Protocol (/protocol):

  • Oracle, History, Hook Events sections render
  • Error states (Failed to load) display cleanly
  • REFERENCE PRICE card has dark bg that clashes in light mode
  • RETRY buttons same boxy style as Trader page
  • Error banner dark bg in light mode

Fee Tiers (/tiers):

  • YOUR STATUS, tier table, HOW IT WORKS all render
  • Fallback row (No tier, 1.8%) displays correctly
  • Error banner (Failed to load tiers) has dark bg in light mode — clashes

Create Pair (/create):

  • Glass card, input fields, checklist, disabled button all clean
  • Best themed page of the More section — matches Swap/Pool glass style
  • Minor: Token A has verification icon, Token B does not

Summary of theme issues across all pages:

  1. All dropdowns: dark bg in light mode (already reported)
  2. RETRY/MY PROFILE buttons: flat boxy style, not glass
  3. Protocol REFERENCE PRICE card: dark bg in light mode
  4. Fee Tiers + Protocol error banners: dark bg in light mode
  5. Pool input labels: colored text barely visible in light mode

Next: mobile breakpoints.

Design QA continued (2026-03-27, desktop Chrome, dark + light): Trader (/trader): - [x] Search input + SEARCH + MY PROFILE render correctly - [x] MY PROFILE navigates to connected wallet address - [x] Empty state (Trader not found) displays in both themes - RETRY and MY PROFILE buttons flat/boxy — neobrutalist leftover, doesn't match glass rounded style Protocol (/protocol): - [x] Oracle, History, Hook Events sections render - [x] Error states (Failed to load) display cleanly - REFERENCE PRICE card has dark bg that clashes in light mode - RETRY buttons same boxy style as Trader page - Error banner dark bg in light mode Fee Tiers (/tiers): - [x] YOUR STATUS, tier table, HOW IT WORKS all render - [x] Fallback row (No tier, 1.8%) displays correctly - Error banner (Failed to load tiers) has dark bg in light mode — clashes Create Pair (/create): - [x] Glass card, input fields, checklist, disabled button all clean - [x] Best themed page of the More section — matches Swap/Pool glass style - Minor: Token A has verification icon, Token B does not Summary of theme issues across all pages: 1. All dropdowns: dark bg in light mode (already reported) 2. RETRY/MY PROFILE buttons: flat boxy style, not glass 3. Protocol REFERENCE PRICE card: dark bg in light mode 4. Fee Tiers + Protocol error banners: dark bg in light mode 5. Pool input labels: colored text barely visible in light mode Next: mobile breakpoints.
Brouie commented 2026-03-27 04:26:57 +00:00 (Migrated from gitlab.com)

Mobile breakpoints (Chrome DevTools, iPhone viewport): all pages pass. Nav, cards, inputs, footer all responsive. More dropdown renders correctly. No overflow or layout breaks.

Mobile breakpoints (Chrome DevTools, iPhone viewport): all pages pass. Nav, cards, inputs, footer all responsive. More dropdown renders correctly. No overflow or layout breaks.
Brouie commented 2026-03-27 04:29:42 +00:00 (Migrated from gitlab.com)

Regression + accessibility (2026-03-27):

  • No console errors on nav between Swap/Pool/Charts/Trader/Protocol/Tiers/Create (only LCD 500s from missing contracts — expected)
  • Keyboard tab: focus rings visible on inputs and buttons
  • Zoom 150%: no overflow or layout breaks
  • Mobile breakpoints: all pages pass

All #44 checklist items complete except limit orders (not yet in new theme per dev). Summary of theme bugs posted in earlier comments.

Regression + accessibility (2026-03-27): - [x] No console errors on nav between Swap/Pool/Charts/Trader/Protocol/Tiers/Create (only LCD 500s from missing contracts — expected) - [x] Keyboard tab: focus rings visible on inputs and buttons - [x] Zoom 150%: no overflow or layout breaks - [x] Mobile breakpoints: all pages pass All #44 checklist items complete except limit orders (not yet in new theme per dev). Summary of theme bugs posted in earlier comments.
PlasticDigits commented 2026-03-27 09:15:50 +00:00 (Migrated from gitlab.com)

mentioned in commit 3334546388

mentioned in commit 3334546388754b862edf90cdb506c3d2438295a3
Brouie commented 2026-03-27 10:49:47 +00:00 (Migrated from gitlab.com)

Re-tested after dev push 3334546 (light-theme glass surfaces fix):

FIXED:

  • Light mode dropdown dark bg — now readable, glass surfaces applied
  • Pool input label contrast in light mode — fixed
  • Protocol/Fee Tiers error banner dark bg in light mode — fixed

STILL OPEN:

  • RETRY/MY PROFILE buttons still flat/boxy style (not glass) — filed separately if needed
  • Native select dropdown overlap on mobile/tablet — filed as #47

All checklist items from #44 are verified. Remaining theme issues tracked in separate issues.

Re-tested after dev push 3334546 (light-theme glass surfaces fix): FIXED: - Light mode dropdown dark bg — now readable, glass surfaces applied - Pool input label contrast in light mode — fixed - Protocol/Fee Tiers error banner dark bg in light mode — fixed STILL OPEN: - RETRY/MY PROFILE buttons still flat/boxy style (not glass) — filed separately if needed - Native select dropdown overlap on mobile/tablet — filed as #47 All checklist items from #44 are verified. Remaining theme issues tracked in separate issues.
PlasticDigits commented 2026-03-31 03:38:32 +00:00 (Migrated from gitlab.com)

@Brouie both should be fixed, please check

@Brouie both should be fixed, please check
Brouie commented 2026-04-01 05:52:15 +00:00 (Migrated from gitlab.com)

still seeing issues on latest (117efc3):

  1. Limit Orders pair dropdown on mobile (iPhone 14 Pro Max viewport) -- dropdown overlaps the form elements below, unlike the Pool page Sort dropdown which renders cleanly inside its container.

  2. Dark mode: all dropdown items (Limit Orders pair selector, Pool sort) show white text on white/light background. text only visible on hover/cursor. needs dark-mode-aware dropdown styling.

still seeing issues on latest (117efc3): 1. Limit Orders pair dropdown on mobile (iPhone 14 Pro Max viewport) -- dropdown overlaps the form elements below, unlike the Pool page Sort dropdown which renders cleanly inside its container. 2. Dark mode: all dropdown items (Limit Orders pair selector, Pool sort) show white text on white/light background. text only visible on hover/cursor. needs dark-mode-aware dropdown styling.
Brouie commented 2026-04-01 06:02:45 +00:00 (Migrated from gitlab.com)

mentioned in issue #49

mentioned in issue #49
PlasticDigits commented 2026-04-01 11:44:04 +00:00 (Migrated from gitlab.com)

mentioned in commit 4c98ddca55

mentioned in commit 4c98ddca5517b97ccd12040b5e84a848b966eaf5
PlasticDigits commented 2026-04-01 11:44:08 +00:00 (Migrated from gitlab.com)

Addressing the latest QA from @Brouie (native Limit Orders pair select overlapping the form on mobile, and portaled MenuSelect options showing light-on-light in dark mode):

  • Limit Orders / mobile: Replaced the pair <select> with the same portaled MenuSelect pattern as Pool sort, so the menu is not clipped or stacked oddly under overflow: hidden on the glass shell.
  • Dark mode dropdown rows: Set color-scheme: dark|light on :root[data-theme], made --menu-bg stops fully opaque, and reset listbox <button> options (appearance, font: inherit, explicit transparent bg) so UA “system” surfaces don’t fight theme tokens.

Helper: pairInfosToMenuSelectOptions in frontend-dapp/src/utils/pairMenuOptions.ts. Tests: Vitest + Playwright limit-orders regression (#limit-pair is listbox, not <select>).

Pushed: 4c98ddc on main. @Brouie can you re-check on iPhone 14 Pro Max viewport + dark theme?

Addressing the latest QA from @Brouie (native Limit Orders pair select overlapping the form on mobile, and portaled MenuSelect options showing light-on-light in dark mode): - **Limit Orders / mobile:** Replaced the pair `<select>` with the same **portaled `MenuSelect`** pattern as Pool sort, so the menu is not clipped or stacked oddly under `overflow: hidden` on the glass shell. - **Dark mode dropdown rows:** Set `color-scheme: dark|light` on `:root[data-theme]`, made `--menu-bg` stops fully opaque, and reset listbox `<button>` options (`appearance`, `font: inherit`, explicit transparent bg) so UA “system” surfaces don’t fight theme tokens. Helper: `pairInfosToMenuSelectOptions` in `frontend-dapp/src/utils/pairMenuOptions.ts`. Tests: Vitest + Playwright limit-orders regression (`#limit-pair` is listbox, not `<select>`). Pushed: **4c98ddc** on `main`. @Brouie can you re-check on iPhone 14 Pro Max viewport + dark theme?
Brouie commented 2026-04-03 00:32:14 +00:00 (Migrated from gitlab.com)

tested on 671e72f (mobile iPhone 14 Pro Max viewport).

limit orders pair selector: still using native select dropdown on mobile. text is light/faded on white-ish background, hard to read. the portaled MenuSelect fix mentioned in the commit doesnt seem to have replaced the native select on this page.

also found on mobile:

  • bottom nav 'More' menu: dark/light theme toggle is cut off on smaller screens (iPhone). visible on iPad Mini but nav items are cramped (Charts and More overlap).
  • iPad Mini header: nav items squished together at 768px width.
tested on 671e72f (mobile iPhone 14 Pro Max viewport). limit orders pair selector: still using native select dropdown on mobile. text is light/faded on white-ish background, hard to read. the portaled MenuSelect fix mentioned in the commit doesnt seem to have replaced the native select on this page. also found on mobile: - bottom nav 'More' menu: dark/light theme toggle is cut off on smaller screens (iPhone). visible on iPad Mini but nav items are cramped (Charts and More overlap). - iPad Mini header: nav items squished together at 768px width.
Brouie commented 2026-04-04 03:55:47 +00:00 (Migrated from gitlab.com)

tested on 671e72f (latest pull with pairMenuOptions fix).

pair selector dropdown: FIXED. portaled MenuSelect now working on all viewports. text readable in both dark and light mode. nice fix.

desktop (1280+): clean, no issues found.

still open on mobile (all phone viewports -- iPhone 14 Pro Max, Samsung, Pixel 7, Surface Duo): dark/light theme toggle buttons in the More menu are cut off by the bottom nav bar. menu items (Trader, Protocol, Fee Tiers, Create Pair) show fine but the toggle below is hidden.

tablet (iPad Mini 768px, iPad Air, Surface Pro 7, Asus Zenbook Fold): header nav items cramped -- More text overlaps with adjacent nav items at 768px width.

tested on 671e72f (latest pull with pairMenuOptions fix). pair selector dropdown: FIXED. portaled MenuSelect now working on all viewports. text readable in both dark and light mode. nice fix. desktop (1280+): clean, no issues found. still open on mobile (all phone viewports -- iPhone 14 Pro Max, Samsung, Pixel 7, Surface Duo): dark/light theme toggle buttons in the More menu are cut off by the bottom nav bar. menu items (Trader, Protocol, Fee Tiers, Create Pair) show fine but the toggle below is hidden. tablet (iPad Mini 768px, iPad Air, Surface Pro 7, Asus Zenbook Fold): header nav items cramped -- More text overlaps with adjacent nav items at 768px width.
Brouie commented 2026-04-06 04:29:19 +00:00 (Migrated from gitlab.com)

closing -- split into separate issues with screenshots per dev request: #51 (mobile toggle cutoff), #52 (tablet header cramped). pair selector dropdown already fixed on 671e72f.

closing -- split into separate issues with screenshots per dev request: #51 (mobile toggle cutoff), #52 (tablet header cramped). pair selector dropdown already fixed on 671e72f.
Brouie (Migrated from gitlab.com) closed this issue 2026-04-06 04:29:20 +00:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
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#44
No description provided.