Design QA checklist: glass theme, mobile shell, and shared UI #44
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#44
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?
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
#rootor unexpected left/right gutters on mobile/tablet/desktop (full-width shell, inner max-width where intended).Mobile-only bottom navigation
Common UI elements (regression sweep)
Pages touched in this rollout (spot-check)
For each route, skim above-the-fold and one interaction (form field, tab, or primary CTA):
Accessibility & polish (quick)
Sign-off
Related change context: Glass/orange theme tokens, shared CSS (
index.css,theme-dark.css,theme-light.css),Layoutshell with desktop nav + mobile bottom bar + More sheet, restyled shared UI and wallet components, page copy/layout polish on core routes, newpublic/assets/cl8y-dex-glass-logo.svg.assigned to @Brouie
Design QA pass (light + dark, desktop):
PASS:
BUG — all dropdowns unreadable in light mode:
NOTE:
Tested: Chrome desktop, light + dark themes.
Design QA continued (2026-03-27, desktop Chrome, dark + light):
Trader (/trader):
Protocol (/protocol):
Fee Tiers (/tiers):
Create Pair (/create):
Summary of theme issues across all pages:
Next: mobile breakpoints.
Mobile breakpoints (Chrome DevTools, iPhone viewport): all pages pass. Nav, cards, inputs, footer all responsive. More dropdown renders correctly. No overflow or layout breaks.
Regression + accessibility (2026-03-27):
All #44 checklist items complete except limit orders (not yet in new theme per dev). Summary of theme bugs posted in earlier comments.
mentioned in commit
3334546388Re-tested after dev push
3334546(light-theme glass surfaces fix):FIXED:
STILL OPEN:
All checklist items from #44 are verified. Remaining theme issues tracked in separate issues.
@Brouie both should be fixed, please check
still seeing issues on latest (
117efc3):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.
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.
mentioned in issue #49
mentioned in commit
4c98ddca55Addressing 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):
<select>with the same portaledMenuSelectpattern as Pool sort, so the menu is not clipped or stacked oddly underoverflow: hiddenon the glass shell.color-scheme: dark|lighton:root[data-theme], made--menu-bgstops fully opaque, and reset listbox<button>options (appearance,font: inherit, explicit transparent bg) so UA “system” surfaces don’t fight theme tokens.Helper:
pairInfosToMenuSelectOptionsinfrontend-dapp/src/utils/pairMenuOptions.ts. Tests: Vitest + Playwright limit-orders regression (#limit-pairis listbox, not<select>).Pushed:
4c98ddconmain. @Brouie can you re-check on iPhone 14 Pro Max viewport + dark theme?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:
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.
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.