Update header elements #20
Merged
Conversation
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
If the user is not logged in, the account button will be a "sign in" button. This is checked against the actual API. This is not checked again on any page change, but it might be helpful to add a check after a sign in or log out to update it. The theme toggle button style was also adjusted to play nicely with the container its now in.
Just to centrally manage that one style. There is a child selector class for nested frosted-glass elements, so that even in light mode it always has a light background. This is to make sure that any layered frosted glass layers are visible and don't get too dark on top of one another.
Turns out that you can't read HTTP-only cookies from JavaScript. It's ok, I guess the API will just have to deal with a few more requests.
No functionality yet, we're getting there.
They weren't being animated anyway, so this made more sense functionally.
I was only testing, until I actually liked the result and forgot to get rid of the old styling.
We finally have a real logout button.
This might be a slight accessibility issue, but we'll see.
The log in button was changed to a Link so it wasn't needed.
Now when logging in and out, the account button will update immediately with your new login status.
When on the /new-event page, it will hide the button. Makes sense.
It looked weird to have both the new event and log in buttons be red around the frosted glass theme toggle. Also, the log in button has an annoying 1.5 padding instead of 2, just to keep the size consistent with the theme toggle and account buttons. The joys of using outlines.
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a redesigned header with improved navigation functionality, including user authentication state management and centralized styling patterns.
- Replaces basic header with comprehensive navigation containing account/login button, new event creation button, and theme toggle
- Implements login context provider for automatic UI updates based on authentication state
- Creates reusable
frosted-glassCSS class for consistent visual styling across components
Reviewed Changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Adds Radix UI dropdown menu dependency for account menu functionality |
| app/ui/layout/theme-toggle.tsx | Removes old fixed theme toggle component |
| app/ui/layout/header.tsx | Removes old basic header component |
| app/ui/components/header/theme-toggle.tsx | Creates new theme toggle component with frosted glass styling |
| app/ui/components/header/new-event-button.tsx | Adds new event creation button that hides on new-event page |
| app/ui/components/header/header.tsx | Creates new header component with integrated navigation elements |
| app/ui/components/header/account-dropdown.tsx | Implements dropdown menu for logged-in users with dashboard and logout options |
| app/ui/components/header/account-button.tsx | Creates account button that shows login link or user icon based on auth state |
| app/login/page.tsx | Integrates login context to update authentication state |
| app/layout.tsx | Updates header import path |
| app/globals.css | Adds frosted-glass CSS class with theme-aware styling |
| app/dashboard/page.tsx | Removes logout button functionality now handled by header |
| app/_utils/providers.tsx | Adds LoginContext provider for authentication state management |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
This PR introduces a bunch of updates to the header, including a redesigned layout, an account button, and a new event button.
Account Button
Now the user will know if they're logged in by checking the header. The button says "Log In" when logged out, and shows a person icon when logged in.
This component uses a context provider to automatically update the moment a user logs in and out.
When the user is logged in, clicking the account button will display a dropdown menu, with an option to view the "Dashboard" page, and another option to log out.
New Event Button in Header
As seen above, the header now includes a "New Event" button. This makes creating a new event available to the user in an easily-accessible location.
This button will also automatically hide when on the
/new-eventpage.Removed Dashboard Log Out Button
It never belonged there to begin with. Now it has a proper home, so it was removed from the dashboard page.
New
frosted-glassCSS ClassIn the spirit of modularity and DRY, the
frosted-glassclass was created to centrally manage the blurred background effect that was initially present on the theme toggle button. This theme was given to the entire right side of the header.One interesting thing to note is that any
frosted-glasselement that's a child of another will always have a light background, regardless of the theme. This should hopefully keep readability consistent when multiplefrosted-glasselements are stacked.File Reorganization
All the header-related files were moved to their own folder within components.
Why?
We needed an account button. With that came a bunch of improvements to the header.
How?
We did a bit of digging into the generated CSS from Tailwind, and Providers ended up being very useful here.
Testing?
Some things (like the
/new-eventpage) don't fully work, but for the most part everything seems to work fine.