Skip to content

Restyle NotificationsPanel to glass terminal theme - #493

Open
Olajcodes wants to merge 4 commits into
TevaLabs:mainfrom
Olajcodes:feat/notifications-panel-glass-theme
Open

Restyle NotificationsPanel to glass terminal theme#493
Olajcodes wants to merge 4 commits into
TevaLabs:mainfrom
Olajcodes:feat/notifications-panel-glass-theme

Conversation

@Olajcodes

Copy link
Copy Markdown
Contributor

Replace light-mode panel styles with the app's glass-card aesthetic:

  • Use .glass-card class for frosted dark translucent background + backdrop blur
  • Replace gray borders with subtle #BEC7FE/10 borders matching Navbar
  • Update all text colors to light-on-dark (gray-100/300/400/500)
  • Use white/5 hover states instead of gray-100/gray-800
  • Set focus ring offset to xelma-card (#111827)
  • Remove all dark: prefix overrides (panel is now always dark glass)
  • Keep mark-as-read, empty, loading, and error states intact
  • Escape key dismiss still works via useFocusTrap

Closes #397

Replace light-mode panel styles with the app's glass-card aesthetic:
- Use .glass-card class for frosted dark translucent background + backdrop blur
- Replace gray borders with subtle #BEC7FE/10 borders matching Navbar
- Update all text colors to light-on-dark (gray-100/300/400/500)
- Use white/5 hover states instead of gray-100/gray-800
- Set focus ring offset to xelma-card (#111827)
- Remove all dark: prefix overrides (panel is now always dark glass)
- Keep mark-as-read, empty, loading, and error states intact
- Escape key dismiss still works via useFocusTrap

Closes TevaLabs#397
@vercel

vercel Bot commented Aug 26, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the josephchimebuka's projects Team on Vercel.

A member of the Team first needs to authorize it.

olajcodes added 3 commits August 26, 2026 13:57
…panel-glass-theme

# Conflicts:
#	src/components/NotificationsPanel.tsx
Add eslint-disable blocks inside effects that call setState for:
- PriceChart.tsx: reset + reload on asset change
- Dashboard.tsx: clear entry price, fetch stats/activities, refresh inspector
- Learn.tsx: fetch education content on mount

These are all legitimate data-fetching/reset patterns that trigger
the lint rule because they call setState indirectly through async
callbacks. The PredictionHistory case was already suppressed by the
next-line comment since the setState call is on the following line.

Closes TevaLabs#397
The dark mode support test was checking for old light-mode classes
(bg-white, dark:bg-gray-900, border-gray-200, dark:border-gray-800).
Update to verify the new glass-card classes instead.

Closes TevaLabs#397
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.

Theme-align NotificationsPanel to glass terminal

1 participant