feat(ui/ux): comprehensive UI/UX improvements with enhanced authentication and navigation#25
Merged
JacksonR64 merged 11 commits intomainfrom Jun 19, 2025
Merged
Conversation
… touch targets - Add responsive horizontal padding to prevent content from touching screen edges - Add card styling with proper borders and background for visual hierarchy - Improve form input spacing and touch targets for better mobile UX - Make OAuth buttons stack vertically on mobile to prevent cramping - Add minimum button heights (44px) to meet mobile accessibility standards - Apply consistent mobile-first responsive design across login and signup pages
- Redesign GoogleCalendarConnect component with better mobile/desktop layout - Change from horizontal to vertical layout on mobile with proper button stacking - Add proper card styling with border, background, and shadow - Increase button padding and minimum heights for better touch targets (44px) - Improve spacing and typography hierarchy - Add flex-shrink-0 to prevent icon/text wrapping issues - Center align action buttons and improve visual balance - Update GoogleCalendarAddButton with better header and max-width constraint - Ensure buttons stay within card boundaries on all screen sizes
- Remove disconnect button from calendar cards for cleaner design - Add Google Calendar connection toggle to user profile dropdown menu - Show real-time connection status with visual indicators (connected/disconnected) - Add connect/disconnect functionality directly in navigation - Implement status checking on component mount and user change - Better separation of concerns: calendar cards for actions, dropdown for settings - Improve button alignment and remove unnecessary complexity from event cards
- Add role badges next to logo showing Admin or Staff status when logged in - Use distinct colors: red for Admin (with Settings icon), blue for Staff (with Shield icon) - Responsive design: show text on desktop (sm+), icon only on mobile for space - Add badges to both desktop header and mobile menu for consistency - Only visible to users with elevated permissions (admin/organizer roles) - Improves role awareness and administrative workflow clarity
- Fix RefundDialog component displaying cents as dollars (e.g. instead of ) - Replace manual price formatting with formatPrice() utility in RefundDialog - Fix AttendeeManagement component revenue and ticket price displays - Ensure consistent currency formatting across all refund-related components - Database correctly stores amounts in cents, now properly converted for display - Affects ticket prices, refund amounts, processing fees, and revenue calculations - No changes to underlying refund calculation logic (which was correct)
- Hide Create Event button from regular users (only visible to staff/admin) - Reorder navigation buttons: Create Event (leftmost) → Staff → My Events → Browse Events (rightmost) - Apply consistent ordering to both desktop and mobile navigation - Prepare layout for future admin button placement (will be rightmost) - Improve role-based navigation security and user experience - Remove unnecessary Create Event visibility for users without permissions
- Show Sign In button immediately on page load instead of loading spinner - Remove jarring layout shift when auth state loads - Add smooth opacity transition during auth check (75% opacity while loading) - Disable pointer events during loading to prevent premature clicks - Apply consistent behavior to both desktop and mobile navigation - Improves perceived performance and eliminates CLS (Cumulative Layout Shift) - Better UX with immediate interactive elements rather than delayed UI
- Add getEventCardDescription utility function for consistent description handling - Prioritize short_description over full description across all card styles - Implement consistent 85-character truncation (adjustable per card type) - Add line-clamp-2 and min-height classes for uniform card heights - Apply consistent spacing with leading-relaxed for better readability - Update all card variants: DefaultCard, PreviewListCard, FullListCard, TimelineCard - Eliminate layout shift issues caused by varying description lengths - Ensure all event cards have consistent visual hierarchy and spacing
…ct loops - Enhanced middleware to validate both session and user state - Added comprehensive error handling for expired/invalid tokens - Implemented automatic clearing of stale authentication cookies - Added client-side utility to clear authentication data - Added debug button on login page for users experiencing auth issues - Improved session validation with expiry checks This resolves issues where middleware detected stale sessions causing redirect loops.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🚀 PR Quick Check Results
This is a quick check for immediate feedback. Full testing will run in the main CI pipeline. |
- Fix TypeScript error in utils/supabase/middleware.ts line 55 - Ensure hasValidSession and hasValidUser are explicitly boolean values - Use double negation (!!) operator for safe boolean conversion - Minimal change to maintain auth functionality integrity This resolves the CI pipeline failure blocking PR deployment.
🚀 PR Quick Check Results
This is a quick check for immediate feedback. Full testing will run in the main CI pipeline. |
- Add missing footer-title test ID with visible LocalLoop text in Footer - Update E2E test to conditionally check create-event-link (staff/admin only) - Replace img tags with Next.js Image component for better performance - Fix ESLint warnings for optimized image loading - All E2E tests now passing locally (3/3 tests) These changes resolve the CI pipeline failures while maintaining: - Role-based access control for staff/admin features - Proper accessibility with test IDs - Performance optimizations with Next.js Image - Non-breaking changes to authentication functionality
🚀 PR Quick Check Results
🎉 All quick checks passed! Your PR is ready for full CI pipeline. This is a quick check for immediate feedback. Full testing will run in the main CI pipeline. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Comprehensive UI/UX improvements across authentication, navigation, and user interface components to enhance user experience and resolve authentication issues.
Key Changes
🔐 Enhanced Authentication System
🧭 Improved Navigation & User Experience
🎨 UI Component Enhancements
🔧 Google Calendar Integration
Files Modified
Core Authentication
app/api/auth/clear/route.ts- New API endpoint for comprehensive auth data clearingapp/auth/debug/page.tsx- New debugging interface for authentication issuesapp/auth/login/page.tsx- Enhanced with debug capabilities and improved UXapp/auth/signup/page.tsx- Improved mobile styling and form layoutlib/auth-context.tsx- Added auth data clearing utilitiesutils/supabase/middleware.ts- Enhanced session validation and error handlingNavigation & UI Components
components/ui/Navigation.tsx- Implemented optimistic UI and role-based access controlscomponents/auth/ProfileDropdown.tsx- Major enhancement with better organizationcomponents/GoogleCalendarConnect.tsx- Restructured for better UXcomponents/checkout/GoogleCalendarAddButton.tsx- Improved responsive designEvent Management
components/events/EventCard.tsx- Improved description consistency and layoutcomponents/events/EventForm.tsx- Enhanced form functionality and validationcomponents/dashboard/RefundDialog.tsx- Fixed critical price display issuecomponents/dashboard/AttendeeManagement.tsx- Minor UI improvementsUtilities & Testing
lib/utils.ts- Added authentication and utility functionstest-auth-storage.html- New testing utility for auth storage debuggingTechnical Improvements
🚀 Performance Optimizations
🔒 Security Enhancements
📱 Mobile Experience
Test Results
Benefits
Code Quality Improvements
Testing Instructions
Authentication Testing
/create-eventwith different user roles/auth/debugshows proper auth state informationUI/UX Testing
Google Calendar Testing
Migration Notes
This PR maintains backward compatibility while significantly improving the user experience. All existing functionality is preserved with enhanced implementation.
Environment Considerations
🤖 Generated with Claude Code