Misc UI Fixes

[mirmirmirr]

This pull request introduces a new set of responsive loading skeleton UIs for multiple pages, refactors header and layout structure for better consistency, and improves accessibility and visual styling across the app. The most important changes are grouped below:

New Loading Skeletons

• Added custom loading skeleton components for edit, results, and main event pages in [event-code], as well as the dashboard page, replacing generic loading UIs with visually consistent placeholders. (app/[event-code]/edit/loading.tsx, app/[event-code]/results/loading.tsx, app/[event-code]/loading.tsx, app/dashboard/loading.tsx) (app/[event-code]/edit/loading.tsxR1-R26, app/[event-code]/results/loading.tsxR1-R26, app/[event-code]/loading.tsxR1-R28, app/dashboard/loading.tsxR1-R20)
• Updated the root loading UI to a centered, styled "loading..." message for improved user experience. (app/loading.tsx)

Header and Layout Refactor

• Refactored header structure: made header fixed, updated navigation and button placement for consistency, and improved layering/z-index. (app/ui/components/header/header.tsx, app/ui/components/header/header-spacer.tsx, app/ui/components/header/logo-area.tsx) [1] [2] [3]
• Updated main layout to use a centered, max-width container for improved appearance on large screens. (app/layout.tsx)

Accessibility and Label Improvements

• Improved accessibility by adding htmlFor and id attributes to labels and inputs in date range components and corrected label targets. (app/ui/components/date-range/date-range-drawer.tsx, app/ui/components/date-range/date-range-input.tsx, app/ui/components/date-range/date-range-selector.tsx) [1] [2] [3] [4] [5]
• Changed button wrappers from <button> to <div> where appropriate to avoid nested interactive elements and improve accessibility. (app/ui/components/date-range/date-range-drawer.tsx)

Visual and Theming Updates

• Updated button styles for authentication flows to include text-white and dark mode support, ensuring better contrast and consistency. (app/login/page.tsx, app/forgot-password/page.tsx, app/register/page.tsx, app/reset-password/page.tsx, app/ui/components/header/new-event-button.tsx) [1] [2] [3] [4] [5]
• Improved calendar accent background and border styling for better appearance and theme support. (app/globals.css) [1] [2]

Minor UI/UX Enhancements

• Updated overlays and sticky elements for drawers and dialogs to improve layering and visual clarity. (app/ui/components/event-info-drawer.tsx)
• Added text-nowrap to account button for better layout control. (app/ui/components/header/account-button.tsx)
• Passed new props to calendar components for improved context awareness. (app/ui/components/date-range/date-range-drawer.tsx)

These changes collectively enhance the app's visual consistency, accessibility, and user experience.

[Copilot]

Pull Request Overview

This PR enhances the application's UI consistency, accessibility, and user experience through comprehensive styling updates, component refactoring, and the introduction of custom loading states. Key improvements include a fixed header with better positioning, enhanced accessibility through proper label associations, and responsive loading skeletons across multiple pages.

• Refactored header to be fixed with improved layout and button positioning
• Added proper id and htmlFor attributes for accessibility across form inputs and selectors
• Introduced custom loading skeleton components for event, results, edit, and dashboard pages
• Updated button styling for better contrast and dark mode support across authentication flows

Reviewed Changes

Copilot reviewed 40 out of 40 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
app/ui/layout/results-page.tsx	Updated layout spacing, replaced timezone selector, added responsive button styling with icons
app/ui/layout/message-page.tsx	Fixed duplicate border class in button styling
app/ui/layout/event-editor.tsx	Replaced time/timezone/duration selectors, added accessibility IDs, disabled custom code editing
app/ui/layout/dashboard-page.tsx	Updated padding classes for consistency
app/ui/layout/availability-page.tsx	Replaced timezone selector, updated button hover styles, adjusted layout spacing
app/ui/components/weekday-calendar.tsx	Fixed mutation bug by creating new object for state updates, added drawer prop
app/ui/components/toasts/*.tsx	Updated padding for consistent toast styling
app/ui/components/selectors/timezone-selector.tsx	New component with mobile drawer support and accessibility improvements
app/ui/components/selectors/time-selector.tsx	New component replacing time-dropdown with mobile drawer support
app/ui/components/selectors/duration-selector.tsx	New component with mobile drawer support for duration selection
app/ui/components/selectors/custom-select.tsx	Added required id prop for accessibility
app/ui/components/header/*.tsx	Refactored header structure to fixed positioning with improved layout
app/ui/components/logo.tsx	Fixed text stroke color from white to black
app/ui/components/date-range/*.tsx	Added accessibility attributes and updated button wrapper
app/**/loading.tsx	Added custom loading skeletons for multiple pages
app/globals.css	Enhanced calendar accent styling with transparency
app/_utils/validate-data.tsx	Added event name length validation

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[jzgom067]

🫡🫡🫡