Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@mousberg
Copy link
Contributor

@mousberg mousberg commented Jan 25, 2026

Summary

  • Swap Inter for Space Grotesk typography (geometric, techy feel)
  • Punchier accent colors with teal secondary
  • Better hover states, shadows, and micro-interactions
  • More breathing room in layout

Changes

  • ui/src/styles/base.css - typography, colors, animations
  • ui/src/styles/components.css - cards, buttons, stats, callouts
  • ui/src/styles/layout.css - navigation, spacing, page titles

Test plan

  • Run pnpm dev in /ui and verify dashboard renders
  • Check both light and dark themes
  • Test responsive behavior on mobile sizes
  • Verify all views (Overview, Chat, Config, Channels, etc.)

mousberg and others added 4 commits January 25, 2026 12:23
- Typography: swap Inter for Space Grotesk (geometric, techy)
- Colors: punchier accent red, add teal secondary, warmer darks
- Cards: better shadows, hover lift effect, increased padding
- Stats: uppercase labels, larger bold values
- Buttons: hover lift micro-interaction, glow on primary
- Status dots: glow effects and subtle pulse animation
- Callouts: gradient backgrounds for depth
- Navigation: active state accent bar indicator
- Layout: more breathing room, bolder page titles
@steipete steipete force-pushed the ui/dashboard-refresh branch from 72afc06 to 48ca19c Compare January 25, 2026 12:29
@steipete steipete merged commit 2fcbed2 into openclaw:main Jan 25, 2026
@steipete
Copy link
Contributor

Landed via temp rebase onto main.

  • Gate: pnpm lint && pnpm build && pnpm test
  • Land commit: 48ca19c
  • Merge commit: 2fcbed2

Thanks @mousberg!

steipete added a commit to orlyjamie/clawdbot that referenced this pull request Jan 25, 2026
* UI: refresh dashboard design system

- Typography: swap Inter for Space Grotesk (geometric, techy)
- Colors: punchier accent red, add teal secondary, warmer darks
- Cards: better shadows, hover lift effect, increased padding
- Stats: uppercase labels, larger bold values
- Buttons: hover lift micro-interaction, glow on primary
- Status dots: glow effects and subtle pulse animation
- Callouts: gradient backgrounds for depth
- Navigation: active state accent bar indicator
- Layout: more breathing room, bolder page titles

* UI: remove nav active bar indicator

* UI: hide nav scrollbar, remove nav border

* fix: add changelog entry for dashboard refresh (openclaw#1786) (thanks @mousberg)

---------

Co-authored-by: Peter Steinberger <[email protected]>
EnzeD added a commit to EnzeD/clawdbot that referenced this pull request Jan 25, 2026
mcinteerj pushed a commit to mcinteerj/moltbot that referenced this pull request Jan 25, 2026
* UI: refresh dashboard design system

- Typography: swap Inter for Space Grotesk (geometric, techy)
- Colors: punchier accent red, add teal secondary, warmer darks
- Cards: better shadows, hover lift effect, increased padding
- Stats: uppercase labels, larger bold values
- Buttons: hover lift micro-interaction, glow on primary
- Status dots: glow effects and subtle pulse animation
- Callouts: gradient backgrounds for depth
- Navigation: active state accent bar indicator
- Layout: more breathing room, bolder page titles

* UI: remove nav active bar indicator

* UI: hide nav scrollbar, remove nav border

* fix: add changelog entry for dashboard refresh (openclaw#1786) (thanks @mousberg)

---------

Co-authored-by: Peter Steinberger <[email protected]>
@bradleypriest
Copy link
Contributor

bradleypriest commented Jan 26, 2026

@mousberg there's some specificity issues with the light theme.
Try visiting <your-web-ui-url>/chat, and toggling on the thinking mode in light and dark modes.

In light mode,

:root[data-theme="light"] .btn--icon {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 1px 2px #1018280d;
  color: var(--muted);
}

is overriding

.btn.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}

@mousberg
Copy link
Contributor Author

Thanks @bradleypriest! Fixed the light mode specificity issue in #1816 - added :root[data-theme="light"] .btn--icon.active override.

rodrigouroz pushed a commit to rodrigouroz/moltbot that referenced this pull request Jan 26, 2026
* UI: refresh dashboard design system

- Typography: swap Inter for Space Grotesk (geometric, techy)
- Colors: punchier accent red, add teal secondary, warmer darks
- Cards: better shadows, hover lift effect, increased padding
- Stats: uppercase labels, larger bold values
- Buttons: hover lift micro-interaction, glow on primary
- Status dots: glow effects and subtle pulse animation
- Callouts: gradient backgrounds for depth
- Navigation: active state accent bar indicator
- Layout: more breathing room, bolder page titles

* UI: remove nav active bar indicator

* UI: hide nav scrollbar, remove nav border

* fix: add changelog entry for dashboard refresh (openclaw#1786) (thanks @mousberg)

---------

Co-authored-by: Peter Steinberger <[email protected]>
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.

3 participants