nitrix/fete
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases 13 Wiki Activity

Apply glassmorphism design system across all UI surfaces #23

Merged
nitrix merged 11 commits from glassmorphism-event-cards into master 2026-03-09 19:11:53 +01:00
Conversation 0 Commits 11 Files Changed 15 +344 -82
nitrix commented 2026-03-09 19:08:42 +01:00
Owner
Copy Link

Summary

  • Introduce glass design tokens and shared CSS utilities (gradient backgrounds, backdrop blur, glass borders)
  • Apply glassmorphism to event cards, FAB, meta icon boxes, RSVP bar, BottomSheet, and ConfirmDialog
  • Add animated glow border to CTA buttons (RSVP, empty state)
  • Replace aurora mesh gradient background, fix hero image transition
  • Replace all hardcoded color values (#fff, #999, #ccc, #e0e0e0) with glass design tokens

Test plan

  • Verify event list view: cards, FAB, empty state CTA all use glass effect
  • Verify event detail view: meta icons, RSVP bar, BottomSheet form all glassmorphic
  • Verify ConfirmDialog (delete event) uses glass surface
  • Check text readability on all glass surfaces (WCAG AA)
  • Test on mobile viewport

🤖 Generated with Claude Code

## Summary - Introduce glass design tokens and shared CSS utilities (gradient backgrounds, backdrop blur, glass borders) - Apply glassmorphism to event cards, FAB, meta icon boxes, RSVP bar, BottomSheet, and ConfirmDialog - Add animated glow border to CTA buttons (RSVP, empty state) - Replace aurora mesh gradient background, fix hero image transition - Replace all hardcoded color values (#fff, #999, #ccc, #e0e0e0) with glass design tokens ## Test plan - [ ] Verify event list view: cards, FAB, empty state CTA all use glass effect - [ ] Verify event detail view: meta icons, RSVP bar, BottomSheet form all glassmorphic - [ ] Verify ConfirmDialog (delete event) uses glass surface - [ ] Check text readability on all glass surfaces (WCAG AA) - [ ] Test on mobile viewport 🤖 Generated with [Claude Code](https://claude.com/claude-code)
nitrix added 11 commits 2026-03-09 19:08:43 +01:00
Apply glassmorphism styling to event cards on list view e203ecf687 
Replace solid white event cards with glass-effect cards featuring
backdrop blur, semi-transparent gradient backgrounds, and light
borders that blend with the Electric Dusk gradient background.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace linear gradient background with aurora mesh gradient 9f82275c63 
Use layered radial gradients on a dark base (#1B1730) with
backdrop blur for an organic, aurora-like background effect
that better complements the glassmorphism event cards.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Fix hero image transition on event detail page a9743025a7 
Replace hard-edged color overlay with CSS mask-image fade-out and
increase hero height to 420px for a seamless blend into the aurora
mesh background.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Restyle FAB with glass effect and static glow border 877c869a22 
Replace solid orange FAB with glassmorphism inner and a conic
gradient border (pink-purple-indigo) with subtle glow halo.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Apply glassmorphism to meta icon boxes on event detail view 29974704d0 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Extract glass system into shared CSS utilities and design tokens 019ead7be3 
Centralize all hardcoded rgba color values into CSS custom properties
and extract glass/glow styles into reusable utility classes (.glass,
.glass-inner, .glow-border, .glow-border--animated) in main.css.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Apply glass utility class to form fields and buttons 64816558c1 
Use .glass class on form fields and buttons on gradient backgrounds.
Buttons get gradient glow border via background-clip trick. Solid
white fallback preserved for BottomSheet context.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add animated glow border to RSVP CTA button 5dd7cb3fb8 
Wrap the "I'm attending" button with animated glow-border and
glass-inner styling. Update test selectors for new structure.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Apply glassmorphism to BottomSheet and RSVP bar status 831ffc071a 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Apply glassmorphism to ConfirmDialog overlay and surface e6c4a21f65 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace hardcoded color values with glass design tokens
All checks were successful
CI / backend-test (push) Successful in 1m0s
Details
CI / frontend-test (push) Successful in 25s
Details
CI / frontend-e2e (push) Successful in 1m13s
Details
CI / build-and-publish (push) Has been skipped
Details
32f96e4c6f 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
nitrix merged commit e6ea9405a6 into master 2026-03-09 19:11:53 +01:00
nitrix deleted branch glassmorphism-event-cards 2026-03-09 19:11:53 +01:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
nitrix
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: nitrix/fete#23
Delete Branch "glassmorphism-event-cards"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?