Skip to content

Add dashboard layout with topbar, icons package, and design tokens#9

Merged
stylessh merged 1 commit into
mainfrom
stylessh/dashboard-layout
Apr 7, 2026
Merged

Add dashboard layout with topbar, icons package, and design tokens#9
stylessh merged 1 commit into
mainfrom
stylessh/dashboard-layout

Conversation

@stylessh
Copy link
Copy Markdown
Owner

@stylessh stylessh commented Apr 7, 2026

Summary

  • Introduces @quickhub/icons package wrapping @hugeicons/react with stable aliases for easy future migration
  • Adds horizontal topbar layout with user avatar dropdown (theme switcher, profile, settings with keyboard shortcuts), nav tabs (Overview, Pull Requests, Issues, Reviews), and more menu
  • Establishes dashboard layout shell: muted background surface with rounded content card and subtle border/shadow
  • Adds surface-0/1/2 design tokens for layered background levels, tunes dark mode with inverted surface hierarchy and elevated popovers
  • Updates foundational UI: 13px body text at weight 450, font-medium (500) for interactive elements, consistent rounded-md across buttons/dropdowns/selects, and smooth background-color transitions on buttons
  • Moves protected dashboard route from /dashboard to /

Test plan

  • Verify layout renders correctly in light and dark mode
  • Check topbar nav tabs highlight correctly on active route
  • Test avatar dropdown: theme switcher toggles light/dark/system, sign out works
  • Verify keyboard shortcut hints render in dropdown (G then P, G then S)
  • Confirm @quickhub/icons imports resolve correctly

- Create @quickhub/icons package wrapping @hugeicons/react with stable aliases
- Add horizontal topbar with user avatar dropdown, nav tabs, and theme switcher
- Establish layout shell: muted background surface with rounded content card
- Add surface tokens (surface-0/1/2) for layered background levels
- Tune typography: 13px body at weight 450, 500 for interactive elements
- Configure dark mode with inverted surface hierarchy and elevated popovers
- Update button, dropdown, and select components for consistent radius and transitions
- Move dashboard route from /dashboard to / with protected layout wrapper
@stylessh stylessh merged commit 7cda710 into main Apr 7, 2026
1 check passed
stylessh added a commit that referenced this pull request Apr 18, 2026
- Create @quickhub/icons package wrapping @hugeicons/react with stable aliases
- Add horizontal topbar with user avatar dropdown, nav tabs, and theme switcher
- Establish layout shell: muted background surface with rounded content card
- Add surface tokens (surface-0/1/2) for layered background levels
- Tune typography: 13px body at weight 450, 500 for interactive elements
- Configure dark mode with inverted surface hierarchy and elevated popovers
- Update button, dropdown, and select components for consistent radius and transitions
- Move dashboard route from /dashboard to / with protected layout wrapper
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant