Skip to content

feat(ui): enhance logo and favicon sizing for better visibility#22

Merged
JacksonR64 merged 59 commits intomainfrom
feat/add-favicon
Jun 19, 2025
Merged

feat(ui): enhance logo and favicon sizing for better visibility#22
JacksonR64 merged 59 commits intomainfrom
feat/add-favicon

Conversation

@JacksonR64
Copy link
Copy Markdown
Owner

Summary

  • Increase navigation logo size from 32px to 48px (w-8 h-8 → w-12 h-12)
  • Reduce logo spacing for tighter layout (gap-3 → gap-2)
  • Crop favicon viewBox to make favicon appear larger in browser tabs
  • Apply optimized viewBox to all favicon variants

Changes Made

Navigation Logo

  • Updated Navigation.tsx to use larger logo dimensions
  • Reduced spacing between logo and text for cleaner appearance

Favicon Optimization

  • Modified viewBox from "0 0 1024 1024" to "150 100 700 700"
  • Applied cropped viewBox to:
    • icon.svg (main favicon)
    • favicon.ico (fallback)
    • favicon-16x16.svg
    • favicon-32x32.svg

Test Plan

  • Verify larger logo displays correctly in navigation
  • Check favicon appears more prominent in browser tabs
  • Confirm all favicon sizes work across different browsers
  • Validate layout spacing looks balanced

🤖 Generated with Claude Code

…ck with GitHub-inspired soft colors - Update all components to use CSS custom properties - Much more pleasant and readable dark mode experience
…ure next-themes - Update CSS to use .dark class - Create ThemeToggle component - Update core components for dark mode
…rdcoded gray colors with CSS custom properties - Update text colors to use muted-foreground variables - Fix Past event badges to use proper theming
…pages - Move Navigation component to root layout - Remove duplicate navigation from HomePageClient - Theme toggle now appears on every page
… Navigation to root layout - Remove duplicate imports - Fix component paths - Theme toggle now on every page
…duplicate Navigation components from all pages - Fix hardcoded colors for proper dark mode support - Update components with CSS custom properties - Fix about/contact page layouts and add Footer - Fix authentication error handling - All dark mode and navigation issues resolved
…eplace long sort labels with compact versions using arrows - Add tooltip support to show full descriptions on hover - Fix text wrapping issue in sort filter dropdown - Improve accessibility and follow established UX patterns
…ed colors with CSS custom properties - Update button and dropdown backgrounds for dark mode - Update text colors to use foreground/muted-foreground - Update borders to use border custom property - Ensure proper contrast and readability in dark mode
…g-white/bg-gray-50 with bg-card/bg-muted - Update text colors to use foreground/muted-foreground - Fix ticket card backgrounds for proper dark mode display - Update borders to use border custom property - Ensure consistent theming across all ticket components
…structure quantity controls and subtotal to use vertical stacking - Add border separator between quantity controls and subtotal - Use flex layout for subtotal to prevent text overflow - Ensure proper spacing and alignment within ticket cards - Fix layout issues when subtotal text extends beyond card width
…ose-gray with proper CSS custom properties - Update About This Event section for better dark mode readability - Fix hardcoded colors in event description display
…- Update StaffDashboard status badges and text colors - Fix staff pages (create/edit event) backgrounds and headers - Update LoadingSpinner to use CSS custom properties - Modernize Badge component with proper variant system - Fix Dialog component backgrounds, borders, and text colors - Update Alert component with proper variant system - Fix Textarea component for consistent theming - Replace all hardcoded grays with semantic color tokens - Ensure consistent dark mode support across all UI components
…sive color improvements - Fixed Event Details section hardcoded gray colors causing invisible text in dark mode - Updated EventDetailClient.tsx Event Stats section to use semantic color tokens - Fixed CheckoutForm.tsx hardcoded colors for better dark mode support - Updated EventCard.tsx text colors throughout all card variants - Replaced text-gray-* classes with text-foreground/text-muted-foreground - Improved form inputs with proper dark mode border and background colors - Enhanced payment success section with dark mode variants - All changes use CSS custom properties for proper theme adaptation
… EventList empty state, loading skeletons, and timeline connector colors - Updated EventListWithHeader and GroupedEventList text colors - Fixed SortControl dropdown with proper dark mode support including tooltips - Updated EventFilters search icon and summary text colors - Replaced all hardcoded gray colors with semantic CSS custom properties - All components now properly adapt to dark/light theme changes
…ode improvements across staff dashboard, app pages, and demo components with semantic color tokens replacing hardcoded gray colors following SOLID principles
…ated reusable FilterButton, FilterDropdown, FilterContainer components - Refactored all filter components to use modular architecture - Fixed text color consistency issues in DateFilter - Replaced harsh border-input with softer border-border styling - Applied DRY principles to eliminate code duplication - Fixed TypeScript aria-haspopup type issues - Build status: Passing - Session handoff: Ready for continuation
…filter text color consistency across all 4 filter components by fixing DateFilter's manual color override. Removed manual text color classes from DateFilter span element. All filters now consistently use FilterButton's built-in text color handling. Maintains SOLID principles and DRY architecture. Build Status: Production build passing. Completes Filter Consistency Task.
…tency - Updated all filter button text to use text-muted-foreground for softer appearance in dark mode. Changed FilterButton placeholder logic and added text-muted-foreground to all filter content spans. Filters now match grey tone used in search box and other page elements. Improves visual harmony and reduces bright white text in dark mode. Build Status: Production build passing.
…ns - Added hover:text-foreground to all filter button text for grey to white transition on hover. Added transition-colors for smooth animations matching My Events button behavior. Filters now have polished interactive states that match top navigation UX. Updated FilterButton component and all 4 individual filter components. Build Status: Production build passing.
… - Updated vercel.json with deployment protection settings - Added production-deploy workflow that waits for CI success - Disabled automatic main branch deployment in Vercel - Added GitHub integration settings for better PR feedback - Ensures only successful CI runs trigger production deployments
…ct functionality - Critical Google Calendar fixes: removed excessive debug logs, implemented proper disconnect API call, cleaned up performance issues. Root causes resolved: useGoogleCalendarStatus auto-running with verbose logging, incomplete handleDisconnect function causing errors. Build passes, critical MVP feature restored.
… callback incorrectly using Google Calendar tokens as Supabase auth tokens. All Google Calendar functionality should now work properly.
…omepage-header test ID to Navigation component - Add homepage-title test ID to LocalLoop branding - Add desktop-navigation test ID to desktop nav container - Add mobile-menu-button test ID to mobile menu toggle - Add browse-events-button test ID to browse events button - Add create-event-link test ID to create event navigation link - Update footer test ID from 'footer' to 'homepage-footer' - Ensure all smoke test selectors are properly covered
…ardcoded Tailwind classes with CSS custom properties - bg-blue-600 → bg-primary, text-white → text-primary-foreground - bg-gray-100 → bg-secondary, bg-red-600 → bg-destructive - text-gray-900 → text-foreground, text-blue-600 → text-primary - Tests now properly validate dark mode theming system - All 125 tests passing ✅
…adataBase to fix metadata warnings and improve build performance - Implement caching and timeouts in Google Calendar API routes - Add 5-minute in-memory cache for connection status requests - Add timeout wrappers (10s for status, 8s for connection tests) - Optimize Lighthouse configuration for CI stability - Optimize GitHub Actions workflow with better timeouts and cleanup - Expected: Lighthouse audit should complete within timeout limits
…memory caching for RSVP checks (5 minutes) - Add in-memory caching for event details (10 minutes) - Optimize database queries with specific field selection - Improve RSVP route with query optimization and result limits - Fix TypeScript build errors from timeout wrapper - Clean up duplicate email sending logic - Add cache invalidation on data updates/deletes Build Status: ✅ PASSING, Test Status: ✅ All 93 tests passing, Dev Server: ✅ Running successfully
JacksonR64 and others added 21 commits June 17, 2025 22:05
…ate issues - CRITICAL FIX: Authentication system was stuck in loading state due to missing error handling - Added comprehensive error handling in auth context getInitialSession() - Added 10-second timeout fallback to ensure loading state always resolves - Enhanced auth state change error handling with proper cleanup - Added connection testing and validation for Supabase client - Results: Login button now visible, auth context properly initializes, Supabase connection validated - Resolves critical production authentication failure where users could not access login functionality
…: OAuth callback was using getSession() instead of exchangeCodeForSession() - Fixed OAuth code exchange process for Google authentication - Added comprehensive error handling for OAuth callback scenarios - Added return URL support and session storage management - Enhanced debugging with detailed console logging - Added proper error redirects instead of infinite loading - Results: Google OAuth login now properly redirects to homepage after authentication - Resolves critical user experience issue where OAuth callback gets stuck on loading screen
…d conflicting auth systems causing OAuth callback hangs - Enhanced sign out reliability with forced redirects and state clearing - Added proper OAuth session storage and return URL handling - Improved error handling and timeout management for auth operations - Added Google OAuth consent prompt for better session management - Results: OAuth callback now properly processes codes, sign out consistently works - Requires Supabase Dashboard OAuth redirect URL configuration to complete fix
…AL: Enhanced OAuth callback with 20-second timeout and retry logic - Added comprehensive error handling to prevent Turbopack console errors - Implemented user-friendly error messages for all OAuth failure scenarios - Added automatic error parameter cleanup in login page - Enhanced debugging with detailed OAuth exchange logging - Results: OAuth callback no longer hangs, proper error handling, better UX - NOTE: Requires Supabase Dashboard OAuth redirect URL configuration to complete
…loading skeleton that caused 2+ second delay - Always show 'Sign In' button first, then swap to ProfileDropdown when user confirmed - Add dedicated render functions for desktop and mobile auth buttons - Reduce auth context timeout from 2s to 1s for faster UI response - Improves perceived performance like modern apps (Twitter, GitHub) - Addresses: Google OAuth UX issues - authentication button delay
…ror - Add Suspense boundary around useSearchParams in auth callback page - Split component into AuthCallbackContent and AuthCallbackLoading - Prevents Next.js prerender error during static generation - Resolves Vercel build failure with proper loading fallback
…- Add detailed step-by-step logging to auth callback page with timing - Include PKCE storage checks (sessionStorage/localStorage) - Add debug info display on callback page for troubleshooting - Enhanced Google sign-in logging in auth context - Update debug OAuth endpoint with Supabase Auth testing - Track code verifier presence and OAuth flow timing - Helps diagnose exchange_failed redirect issue while users still get logged in
- Implement proper @supabase/ssr patterns following Next.js 15 best practices
- Replace deprecated cookie handling with getAll()/setAll() methods only
- Create clean auth context without complex debugging overhead
- Add proper OAuth callback route handler with error page
- Simplify middleware using official Supabase SSR patterns
- Remove PKCE debugging - now handled automatically by Supabase
- Add development documentation (CLAUDE.md) and diagnostic pages
- Fix Google OAuth hanging issue and inconsistent sign-in/sign-out behavior

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Keep optimistic UI patterns from main branch for faster perceived performance
- Maintain clean Supabase SSR authentication system that fixes OAuth hanging
- Reduce auth timeout from 10s to 1s for faster UI response
- Add session support and feature toggles from original implementation
- Best of both worlds: working OAuth + great UX

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Update useAuth hook to use new createClient from utils/supabase/client
- Handle missing user records gracefully with default 'user' role
- Fix PGRST116 error (no rows found) by providing fallback user profile
- Prevent foreign key constraint errors in performance_metrics table
- Maintain dual auth system compatibility during transition

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Fix react/no-unescaped-entities in auth error page
- Remove unused debugInfo state variables from debug page
- Remove unused router import from ProfileDropdown
- Preserve optimistic UI authentication feature

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Fix malformed auth-context.tsx file from rebase conflicts
- Remove unused helper functions replaced with inline conditional rendering
- Preserve optimistic UI authentication patterns
- All critical parsing and unused variable errors resolved
- Only warnings remain (won't block CI)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Clean up malformed lib/supabase.ts file from rebase conflicts
- Fix import in RSVPTicketSection to use new utils/supabase/client
- Remove duplicate exports and undefined variables
- All TypeScript errors now resolved, ESLint passing with warnings only

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Created favicon in multiple sizes (16x16, 32x32, any)
- Generated SVG-based favicons from existing logo design
- Updated manifest.json to include icon references
- Added fallback favicon.ico for browser compatibility
…on assets (16x16, 32x32, icon.svg, logo.svg) - Modified navigation component styling/functionality - Added LocalLoopLogo.svg asset - Session prep for Vercel deployment issue investigation Ready for handoff - Vercel build failing with module resolution errors
- Increase navigation logo size from w-8 h-8 to w-12 h-12
- Reduce logo spacing from gap-3 to gap-2 for tighter layout
- Crop favicon viewBox from "0 0 1024 1024" to "150 100 700 700"
- Makes favicon appear larger and more prominent in browser tabs
- Applied cropped viewBox to all favicon variants (16x16, 32x32, icon.svg, favicon.ico)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel bot commented Jun 19, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
local-loop ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2025 4:23am

Resolve favicon conflicts by preserving LocalLoop logo designs over placeholder versions:
- Keep enhanced LocalLoop logo favicons with optimized viewBox (150 100 700 700)
- Maintain full logo design for better brand visibility in browser tabs
- Preserve navigation logo sizing improvements (w-12 h-12)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown

🚀 PR Quick Check Results

Check Status
Quick Check ✅ success
Unit Tests ✅ success
Smoke Test ✅ success

🎉 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.

@JacksonR64 JacksonR64 merged commit 8fedeb2 into main Jun 19, 2025
16 checks passed
@JacksonR64 JacksonR64 deleted the feat/add-favicon branch June 19, 2025 04:35
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