Update Create room UI #144
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR improves the UI for the create room functionality by adding scroll behavior fixes, enhancing responsive design, and implementing user authentication state management. The changes focus on making the interface more polished and user-friendly across different screen sizes.
- Replaced fixed scaling with responsive design patterns for better mobile/desktop compatibility
- Added authentication state management to navbar with login/logout functionality
- Fixed overflow and scroll behavior issues in the create room page
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| client/src/pages/LandingPage.jsx | Updated responsive design with proper container widths and removed fixed scaling |
| client/src/pages/HomePage.jsx | Added redirect logic for authenticated users |
| client/src/pages/CreateRoom.jsx | Removed scroll lock logic and improved layout structure with proper scaling wrapper |
| client/src/components/common/Navbar.jsx | Added authentication state management with login/logout functionality and conditional avatar display |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| // ✅ Redirect if already logged in | ||
| useEffect(() => { | ||
| const token = localStorage.getItem("token"); | ||
| if (token) { | ||
| navigate("/landing", { replace: true }); | ||
| } | ||
| }, [navigate]); |
There was a problem hiding this comment.
The useEffect hook has incorrect indentation. The opening line should align with the comment above it.
| }} | ||
| /> | ||
| {showNotification && ( | ||
| <div className="absolute left-full ml-2 bg-[#fffb0065]/60 text-[#FFFB00] border border-[#FFFB00] font-silkscreen px-3 py-1 rounded-lg drop-shadow-[0_0_5px_#111] text-sm whitespace-nowrap z-10"> |
There was a problem hiding this comment.
The color value #fffb0065 appears to have redundant opacity specification. Using both /60 suffix and the alpha channel in hex is confusing. Consider using either bg-[#fffb00]/60 or bg-[#fffb0065] but not both.
| <div className="absolute left-full ml-2 bg-[#fffb0065]/60 text-[#FFFB00] border border-[#FFFB00] font-silkscreen px-3 py-1 rounded-lg drop-shadow-[0_0_5px_#111] text-sm whitespace-nowrap z-10"> | |
| <div className="absolute left-full ml-2 bg-[#fffb00]/60 text-[#FFFB00] border border-[#FFFB00] font-silkscreen px-3 py-1 rounded-lg drop-shadow-[0_0_5px_#111] text-sm whitespace-nowrap z-10"> |
1 participant
Fix: #88
Added scroll bar and make ui better
before:
after:
