Skip to content

Redesign frontend UI and migrate styles to CSS Modules#65

Merged
aichannode merged 73 commits into
mainfrom
feat/update-frontend-ui
Jul 13, 2026
Merged

Redesign frontend UI and migrate styles to CSS Modules#65
aichannode merged 73 commits into
mainfrom
feat/update-frontend-ui

Conversation

@heyradcode

Copy link
Copy Markdown
Collaborator

Summary

  • Redesign the frontend around a new collapsible app shell, sidebar, and top bar, with reshaped battle/breed/marriage/train/rename/level-up panels to match the Crypto Pets design mock (ambient background, DNA helix + compatibility ring in breeding, pet showcase hero, restyled nav icons).
  • Migrate component styles from global index.css to CSS Modules (index.module.css) across layout, pet interaction panels, wallet, and shared UI components, and remove CSS orphaned by the migration; add a check-css-naming lint script wired into frontend/eslint.config.js and the pre-commit hook.
  • Realign frontend/tests/ to mirror frontend/src/ structure and repair tests broken by the CSS Modules migration.
  • Extract useAccountTokenBalances from account-dropdown and pure view derivations from useBattlePanel; rename layout/index.tsx to Layout.tsx and document the barrel convention; prune dead battle-setup props/CSS and other redesign leftovers.
  • Add CLAUDE.md and AGENTS.md documenting project architecture and behavioral working guidelines for coding agents.

Test plan

  • pnpm --filter frontend lint:check
  • pnpm --filter frontend test
  • pnpm --filter frontend build
  • Manually click through battle, breed, marriage, train, rename, and level-up panels plus the sidebar/top-bar in a running dev server

@vercel

vercel Bot commented Jul 13, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
do-not-stop-frontend Ready Ready Preview, Comment Jul 13, 2026 2:59am
do-not-stop-website Ready Ready Preview, Comment Jul 13, 2026 2:59am

@heyradcode
heyradcode requested review from aichannode, cdsaidev and tydreamer and removed request for aichannode and cdsaidev July 13, 2026 02:30
@heyradcode heyradcode self-assigned this Jul 13, 2026
@github-actions

Copy link
Copy Markdown

🧪 Coverage

Package Statements Branches Functions Lines Overall
backend 78.92% (573/726) 73.84% (288/390) 82.27% (130/158) 79.84% (531/665) 78.49% (1522/1939)
frontend 63.50% (1124/1770) 63.37% (910/1436) 61.57% (274/445) 64.16% (1026/1599) 63.50% (3334/5250)
shared 54.42% (1137/2089) 55.48% (718/1294) 57.50% (230/400) 56.94% (1053/1849) 55.72% (3138/5632)

import { Tones } from '@constants/tones';
import Icon, { CheckIcon } from '@components/ui/icon';
import './index.css';
import s from './index.module.css';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mind renaming the s import to style? Just a bit easier to read at a glance, thanks!

@heyradcode
heyradcode requested a review from aichannode July 13, 2026 02:54

@aichannode aichannode left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! thank you

@aichannode
aichannode merged commit 7de099f into main Jul 13, 2026
2 of 4 checks passed
@aichannode
aichannode deleted the feat/update-frontend-ui branch July 13, 2026 02:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants