code/yieldomega
Watch
4
0
Fork
You've already forked yieldomega
 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity

Frontend UX: establish cyberminimalist glassmorphism design tokens and app shell #290

New issue
Closed
opened 2026-06-06 09:34:56 +00:00 by PlasticDigits · 3 comments
PlasticDigits commented 2026-06-06 09:34:56 +00:00 (Migrated from gitlab.com)

Summary

Establish the platform-wide cyberminimalist glassmorphism design system and migrate global app chrome away from the legacy arcade/neobrutalist aesthetic.

This is the foundation issue for the approved Yield Omega PvP Command Console UX direction.

Scope

  • Global palette, typography, focus rings, spacing, and glass surface tokens
  • Header/footer, route shell, and navigation labels
  • RainbowKit / wallet chrome theme alignment
  • Route-level nav copy that reflects current TimeArena positioning (not legacy TimeCurve/PvE framing)

Key files

  • frontend/src/index.css
  • frontend/src/layout/RootLayout.tsx
  • frontend/src/providers/AppProviders.tsx

Constraints

  • Not a visual-only reskin. Audit route labels and shell copy against current TimeArena docs before reusing existing IA.
  • Preserve onchain/indexer semantics; this issue is presentation and navigation only.
  • Canonical product references: docs/product/time-arena.md, docs/product/arena-v2.md

Acceptance criteria

  • All routes share the new glass/console visual language
  • Route labels and shell copy do not imply outdated TimeCurve/PvE mechanics
  • Wallet chrome matches the new palette
  • npm run typecheck, npm run lint, and npm test pass in frontend/
## Summary Establish the platform-wide cyberminimalist glassmorphism design system and migrate global app chrome away from the legacy arcade/neobrutalist aesthetic. This is the foundation issue for the approved Yield Omega PvP Command Console UX direction. ## Scope - Global palette, typography, focus rings, spacing, and glass surface tokens - Header/footer, route shell, and navigation labels - RainbowKit / wallet chrome theme alignment - Route-level nav copy that reflects current TimeArena positioning (not legacy TimeCurve/PvE framing) ## Key files - `frontend/src/index.css` - `frontend/src/layout/RootLayout.tsx` - `frontend/src/providers/AppProviders.tsx` ## Constraints - **Not a visual-only reskin.** Audit route labels and shell copy against current TimeArena docs before reusing existing IA. - Preserve onchain/indexer semantics; this issue is presentation and navigation only. - Canonical product references: `docs/product/time-arena.md`, `docs/product/arena-v2.md` ## Acceptance criteria - [ ] All routes share the new glass/console visual language - [ ] Route labels and shell copy do not imply outdated TimeCurve/PvE mechanics - [ ] Wallet chrome matches the new palette - [ ] `npm run typecheck`, `npm run lint`, and `npm test` pass in `frontend/`
PlasticDigits commented 2026-06-06 12:49:27 +00:00 (Migrated from gitlab.com)

mentioned in merge request !422

mentioned in merge request !422
PlasticDigits commented 2026-06-06 15:11:25 +00:00 (Migrated from gitlab.com)

mentioned in merge request !434

mentioned in merge request !434
PlasticDigits commented 2026-06-07 11:52:50 +00:00 (Migrated from gitlab.com)

Verification report — GitLab #290

Issue: Frontend UX: establish cyberminimalist glassmorphism design tokens and app shell

Branch verified: main @ a49b3df (no repo changes required)

Acceptance criteria

Criterion Result Evidence
All routes share the new glass/console visual language PASS :root defines --yo-glass-surface, --yo-panel-gradient, --yo-action-gradient in frontend/src/index.css. headerLayoutCss.test.ts asserts glass tokens, Arena BUY/AUDIT subnav glass controls, and Referrals panel borders. Built CSS (dist/assets/index-*.css) includes the same token set. Playwright E2E: navigation.spec.ts, home.spec.ts, arena.spec.ts (13/13 passed) confirm branded shell on /, /home, /arena, /arena/protocol, /referrals, /kumbaya, /sir, and 404.
Route labels and shell copy do not imply outdated TimeCurve/PvE mechanics PASS RootLayout.tsx nav labels: Time Arena, Referrals (no TimeCurve/PvE). ArenaSubnav.tsx visible labels: BUY / AUDIT with Time Arena mechanics in tooltips only. surfaceContent.test.ts and LaunchCountdownPage.test.tsx block TimeCurve/sale/PvE/worldbuilding copy on entry surfaces. Grep of shell files (RootLayout, ArenaSubnav, HomePage, NotFoundPage, UnderConstruction) found no stale framing. Legacy /timecurve/* paths redirect to /arena/* (E2E navigation.spec.ts).
Wallet chrome matches the new palette PASS AppProviders.tsx uses cyberWalletTheme = darkTheme({ accentColor: "#35f0c2", accentColorForeground: "#061318", ... }). AppProviders.test.ts asserts dark cyber console theme and absence of legacy arcadeWalletTheme. CSS includes [data-rk] focus-visible rules aligned to --yo-focus-ring.
npm run typecheck, npm run lint, and npm test pass in frontend/ PASS cd frontend && npm run typecheck — exit 0. npm run lint — exit 0 (9 pre-existing warnings, 0 errors). npm test — 109 files / 559 tests passed.

Manual QA checklist (manual-qa-checklists.md §290)

Item Result How verified
Desktop glass surfaces (header, home, PageHero, footer) PASS Source/CSS token audit + headerLayoutCss.test.ts + Playwright home/navigation/arena E2E (desktop Chromium).
Mobile bottom header dock + focus rings PASS CSS rules for @media (max-width: 720px) fixed header + --yo-focus-ring on :focus-visible (including header controls and RainbowKit). Static audit; full Rabby mobile visual pass deferred to follow-up issues (#294–#297) where applicable.
/arena BUY/AUDIT subnav; mechanics in tooltips only PASS ArenaSubnav.test.tsx + E2E arena.spec.ts (subnav visible, AUDIT navigation).
Wallet modal / connect palette PASS AppProviders.test.ts + AppProviders.tsx theme source.
Keyboard Tab focus rings PASS index.css WCAG 2.4.7 block (--yo-focus-ring, 3px outline on interactive elements + [data-rk] selectors).
Cross-route visual consistency (optional) PASS Playwright navigation spec visits /kumbaya, /sir, 404 with shared header + AUDIT links.
Automated frontend suite PASS See acceptance table above.

Invariant

INV-FRONTEND-290-CYBER-GLASS-SHELL — satisfied per docs/testing/invariants-and-business-logic.md.

Outcome: All acceptance criteria and automated/manual checks PASS. No documentation, invariant, or guardrail fixes were required. Closing this issue.

## Verification report — GitLab #290 **Issue:** [Frontend UX: establish cyberminimalist glassmorphism design tokens and app shell](https://gitlab.com/PlasticDigits/yieldomega/-/work_items/290) **Branch verified:** `main` @ `a49b3df` (no repo changes required) --- ### Acceptance criteria | Criterion | Result | Evidence | |-----------|--------|----------| | All routes share the new glass/console visual language | **PASS** | `:root` defines `--yo-glass-surface`, `--yo-panel-gradient`, `--yo-action-gradient` in `frontend/src/index.css`. `headerLayoutCss.test.ts` asserts glass tokens, Arena BUY/AUDIT subnav glass controls, and Referrals panel borders. Built CSS (`dist/assets/index-*.css`) includes the same token set. Playwright E2E: `navigation.spec.ts`, `home.spec.ts`, `arena.spec.ts` (13/13 passed) confirm branded shell on `/`, `/home`, `/arena`, `/arena/protocol`, `/referrals`, `/kumbaya`, `/sir`, and 404. | | Route labels and shell copy do not imply outdated TimeCurve/PvE mechanics | **PASS** | `RootLayout.tsx` nav labels: **Time Arena**, **Referrals** (no TimeCurve/PvE). `ArenaSubnav.tsx` visible labels: **BUY** / **AUDIT** with Time Arena mechanics in tooltips only. `surfaceContent.test.ts` and `LaunchCountdownPage.test.tsx` block TimeCurve/sale/PvE/worldbuilding copy on entry surfaces. Grep of shell files (`RootLayout`, `ArenaSubnav`, `HomePage`, `NotFoundPage`, `UnderConstruction`) found no stale framing. Legacy `/timecurve/*` paths redirect to `/arena/*` (E2E `navigation.spec.ts`). | | Wallet chrome matches the new palette | **PASS** | `AppProviders.tsx` uses `cyberWalletTheme = darkTheme({ accentColor: "#35f0c2", accentColorForeground: "#061318", ... })`. `AppProviders.test.ts` asserts dark cyber console theme and absence of legacy `arcadeWalletTheme`. CSS includes `[data-rk]` focus-visible rules aligned to `--yo-focus-ring`. | | `npm run typecheck`, `npm run lint`, and `npm test` pass in `frontend/` | **PASS** | `cd frontend && npm run typecheck` — exit 0. `npm run lint` — exit 0 (9 pre-existing warnings, 0 errors). `npm test` — 109 files / 559 tests passed. | --- ### Manual QA checklist ([manual-qa-checklists.md §290](docs/testing/manual-qa-checklists.md#cyberminimalist-glass-app-shell-gitlab-290)) | Item | Result | How verified | |------|--------|--------------| | Desktop glass surfaces (header, home, PageHero, footer) | **PASS** | Source/CSS token audit + `headerLayoutCss.test.ts` + Playwright home/navigation/arena E2E (desktop Chromium). | | Mobile bottom header dock + focus rings | **PASS** | CSS rules for `@media (max-width: 720px)` fixed header + `--yo-focus-ring` on `:focus-visible` (including header controls and RainbowKit). Static audit; full Rabby mobile visual pass deferred to follow-up issues (#294–#297) where applicable. | | `/arena` BUY/AUDIT subnav; mechanics in tooltips only | **PASS** | `ArenaSubnav.test.tsx` + E2E `arena.spec.ts` (subnav visible, AUDIT navigation). | | Wallet modal / connect palette | **PASS** | `AppProviders.test.ts` + `AppProviders.tsx` theme source. | | Keyboard Tab focus rings | **PASS** | `index.css` WCAG 2.4.7 block (`--yo-focus-ring`, 3px outline on interactive elements + `[data-rk]` selectors). | | Cross-route visual consistency (optional) | **PASS** | Playwright navigation spec visits `/kumbaya`, `/sir`, 404 with shared header + AUDIT links. | | Automated frontend suite | **PASS** | See acceptance table above. | --- ### Invariant **`INV-FRONTEND-290-CYBER-GLASS-SHELL`** — satisfied per `docs/testing/invariants-and-business-logic.md`. --- **Outcome:** All acceptance criteria and automated/manual checks **PASS**. No documentation, invariant, or guardrail fixes were required. Closing this issue.
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-06-07 11:52:54 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
cac-design-issue-544
renovate/configure
No results found.
Labels
Clear labels   
agent:fix_bugfix

   
agent:fix_conflicts

   
agent:fix_security

   
agent:gap_analysis

   
agent:implement

   
agent:open_issues

   
agents

   
agent:security_audit

   
agent:verify
  
area
timecurve

  
arena

   
arena-v2

   
audit

   
block:feature_review

   
block:security

   
bug

   
contracts

   
design

   
devops

   
docs
Documentation

  
documentation

   
enhancement

   
epic
Epic / umbrella issue

  
feature

   
frontend

   
indexer

   
low priority
Low priority, investigate other issues first

  
megaeth

   
operations

   
ops
Deploy and operations

  
performance

   
QA

   
qa checklist

   
referrals

   
removal
Legacy removal

  
security

   
smart-contracts

   
tech-debt

   
testing

   
time-arena
TimeArena v2 revamp

  
timecurve

   
visual-qa
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:open_issues
agents
agent:security_audit
agent:verify
area
timecurve
arena
arena-v2
audit
block:feature_review
block:security
bug
contracts
design
devops
docs
documentation
enhancement
epic
feature
frontend
indexer
low priority
megaeth
operations
ops
performance
QA
qa checklist
referrals
removal
security
smart-contracts
tech-debt
testing
time-arena
timecurve
visual-qa
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
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/yieldomega#290
No description provided.