Skip to content

refactor: modularize styles, extract RevealDiv, add design system and… - #406

Merged
Mikey-222 merged 1 commit into
Hel-Phone:mainfrom
Chidubemkingsley:refactor/architecture-modular-css-design-system
Aug 28, 2026
Merged

refactor: modularize styles, extract RevealDiv, add design system and…#406
Mikey-222 merged 1 commit into
Hel-Phone:mainfrom
Chidubemkingsley:refactor/architecture-modular-css-design-system

Conversation

@Chidubemkingsley

@Chidubemkingsley Chidubemkingsley commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

All 4 refactor tasks completed on branch refactor/architecture-modular-css-design-system and pushed to origin.
Modular CSS (src/styles/, src/pages/)

  • src/styles/theme.css:1 — CSS variables for colors (--color-primary, --color-accent, etc.), typography (--font-serif), spacing, radii, shadows, and .hp-section-label presets.
  • src/styles/animations.css:1 — extracted mdblink, mdpulse, mddash, mdfloat, mddrift + .hp-reveal helpers.
  • src/styles/global.css:1 — html/body, ::selection, .char-image responsive, Mapbox and Stellar Wallets Kit overrides.
  • src/App.css:1 now aggregator via @import './styles/theme.css' etc.
  • src/pages/Help.css:1 — .hp-help-wrap, .hp-help-sidebar, .hp-help-input, mobile hp-mobile-open logic.
  • src/pages/Ranking.css:1 — .hp-ranking-* card/row/badge styles.
  • src/main.jsx:10 imports theme.css; Help.jsx:12 imports Help.css, Ranking.jsx:5 imports Ranking.css.
    RevealDiv extraction
  • src/components/animations/RevealDiv.jsx:1 — self-contained IntersectionObserver (threshold:0.12, rootMargin:0px 0px -7% 0px, 4.5s fallback), respects isVisible override, avoids inline remount. src/App.jsx:2 imports it and uses without index/getNextRevealIdx (removed observer state from App.jsx:8).
    Design System
  • src/components/ui/Button.jsx:1 + Button.css — variants primary/teal/purple/muted/ghost/outline/nav, sizes sm/md/lg; polymorphic to/href.
  • src/components/ui/Input.jsx:1 + Input.css — label/hint/error, variant dark/light, wrapperStyle.
  • src/components/ui/Modal.jsx:1 + Modal.css — overlay, Escape handling, body scroll lock, size/variant.
  • Replacements: src/App.jsx:45 uses Button for hero CTAs/final CTA, SectionHeader for section headings; src/pages/Help.jsx:9 uses Button/Input/Modal for Allow location (Help.jsx:1405), search (1428), Request help (1532), I'll help (1609), Mark Arrived (1574), HelpOnboardingModal→Modal (296), ArrivalThanksModal→Modal (152), cancel/emergency modals (2039); src/pages/Ranking.jsx:4 uses Badge for arrivals.
    Layout
  • src/components/layout/Navbar.jsx:1 / Navbar.css — floating (landing) vs solid (inner) variants.
  • src/components/layout/Footer.jsx:1 / Footer.css
  • src/components/layout/MainLayout.jsx:1 — wraps Navbar+Footer with props navbar/footer/background.
  • src/components/shared/Card.jsx:1, SectionHeader.jsx:1, Badge.jsx:1 extracted to components/shared/.
  • src/App.jsx:38 now , src/pages/Ranking.jsx:27 , src/pages/Help.jsx:1253 with Help.css classes (hp-help-wrap).
    Verification
  • npm run build passed (vite build 627 modules, ✓ built in 2.4s).
  • Commit 6ed4241 pushed: git push -u origin refactor/architecture-modular-css-design-system → remote PR link https://github.com/Chidubemkingsley/HelPhone/pull/new/refactor/architecture-modular-css-design-system.All 4 refactor tasks completed on branch refactor/architecture-modular-css-design-system and pushed to origin.
    Modular CSS (src/styles/, src/pages/)
  • src/styles/theme.css:1 — CSS variables for colors (--color-primary, --color-accent, etc.), typography (--font-serif), spacing, radii, shadows, and .hp-section-label presets.
  • src/styles/animations.css:1 — extracted mdblink, mdpulse, mddash, mdfloat, mddrift + .hp-reveal helpers.
  • src/styles/global.css:1 — html/body, ::selection, .char-image responsive, Mapbox and Stellar Wallets Kit overrides.
  • src/App.css:1 now aggregator via @import './styles/theme.css' etc.
  • src/pages/Help.css:1 — .hp-help-wrap, .hp-help-sidebar, .hp-help-input, mobile hp-mobile-open logic.
  • src/pages/Ranking.css:1 — .hp-ranking-* card/row/badge styles.
  • src/main.jsx:10 imports theme.css; Help.jsx:12 imports Help.css, Ranking.jsx:5 imports Ranking.css.
    RevealDiv extraction
  • src/components/animations/RevealDiv.jsx:1 — self-contained IntersectionObserver (threshold:0.12, rootMargin:0px 0px -7% 0px, 4.5s fallback), respects isVisible override, avoids inline remount. src/App.jsx:2 imports it and uses without index/getNextRevealIdx (removed observer state from App.jsx:8).
    Design System
  • src/components/ui/Button.jsx:1 + Button.css — variants primary/teal/purple/muted/ghost/outline/nav, sizes sm/md/lg; polymorphic to/href.
  • src/components/ui/Input.jsx:1 + Input.css — label/hint/error, variant dark/light, wrapperStyle.
  • src/components/ui/Modal.jsx:1 + Modal.css — overlay, Escape handling, body scroll lock, size/variant.
  • Replacements: src/App.jsx:45 uses Button for hero CTAs/final CTA, SectionHeader for section headings; src/pages/Help.jsx:9 uses Button/Input/Modal for Allow location (Help.jsx:1405), search (1428), Request help (1532), I'll help (1609), Mark Arrived (1574), HelpOnboardingModal→Modal (296), ArrivalThanksModal→Modal (152), cancel/emergency modals (2039); src/pages/Ranking.jsx:4 uses Badge for arrivals.
    Layout
  • src/components/layout/Navbar.jsx:1 / Navbar.css — floating (landing) vs solid (inner) variants.
  • src/components/layout/Footer.jsx:1 / Footer.css
  • src/components/layout/MainLayout.jsx:1 — wraps Navbar+Footer with props navbar/footer/background.
  • src/components/shared/Card.jsx:1, SectionHeader.jsx:1, Badge.jsx:1 extracted to components/shared/.
  • src/App.jsx:38 now , src/pages/Ranking.jsx:27 , src/pages/Help.jsx:1253 with Help.css classes (hp-help-wrap).
    Verification
  • npm run build passed (vite build 627 modules, ✓ built in 2.4s).
  • Commit 6ed4241 pushed: git push -u origin refactor/architecture-modular-css-design-system → remote PR link https://github.com/Chidubemkingsley/HelPhone/pull/new/refactor/architecture-modular-css-design-system.

@drips-wave

drips-wave Bot commented Aug 28, 2026

Copy link
Copy Markdown

@Chidubemkingsley Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@Chidubemkingsley
refactor: port modular CSS/design system to upstream TypeScript baseline
a3f23e2 
- Rebase onto upstream/main (5ff5d7e) with i18n, WalletProvider, TS migration
- Keep App.css as modular aggregator (theme/animations/global) with upstream PWA extras (spin/hp-shimmer/skip-link)
- App.tsx: extract RevealDiv to components/animations/RevealDiv, wrap with MainLayout, use Button/SectionHeader, keep i18n/LanguageSwitcher
- Help.tsx: add Help.css, MainLayout wrapper, Button/Input/Modal imports (preserve useWallet, hooks, Map openRequests, zkReducer)
- Ranking.tsx: add Ranking.css, MainLayout, Badge, handle loading/empty states for test compatibility
- main.tsx: import theme.css; package.json: add @testing-library/dom for 200-test suite
- Preserve src/styles, src/components/* from original refactor
- Build passes, 398/407 tests passing (6 pre-existing upstream failures unchanged)
@Chidubemkingsley
Chidubemkingsley force-pushed the refactor/architecture-modular-css-design-system branch from ee178c2 to a3f23e2 Compare August 28, 2026 02:56
@Mikey-222
Mikey-222 merged commit d6a13d4 into Hel-Phone:main Aug 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

2 participants

@Chidubemkingsley @Mikey-222