feat: redesign NotFoundPage with modern brutalist responsive layout#86
feat: redesign NotFoundPage with modern brutalist responsive layout#86banthevaishnavi wants to merge 1 commit into
Conversation
🚀 PR Received SuccessfullyHello @banthevaishnavi, Thank you for taking the initiative to contribute to this project. Please ensure that your PR follows all project guidelines properly before requesting review.
|
📝 WalkthroughWalkthroughThe NotFoundPage component is completely redesigned from a simple layout into a full-page, modern 404 experience. The new design introduces a background grid, dual-panel organization with left and right sections, multiple detail cards, and expanded navigation options including new routes to Changes404 Page Redesign
Sequence Diagram(s)Not applicable. This change is a self-contained UI component redesign with Tailwind styling and static JSX markup, with no multi-component interactions or complex control flow to visualize. Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
frontend/src/pages/NotFoundPage.jsx (1)
191-196:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winLogin route does not exist.
The "Login" link points to
/login, but this route is not defined in the routing configuration. Based on the router context, authentication appears to use GitHub OAuth with a callback at/auth/github/callback, but there's no dedicated/loginroute.Action required: Either add a
/loginroute or update this link to point to the correct authentication entry point for your application.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/pages/NotFoundPage.jsx` around lines 191 - 196, The NotFoundPage.jsx Link currently points to a non-existent "/login" route; update the Link in NotFoundPage.jsx (the Link element that renders "Login") to point to your actual auth entrypoint (e.g., the OAuth initiation path such as "/auth/github" or whatever route starts the GitHub OAuth flow) OR add a new "/login" route that triggers the existing GitHub OAuth flow (so it redirects to the same initiation endpoint or invokes the OAuth handler). Ensure the Link's "to" value matches the real authentication entrypoint used by your router (not "/login").
🧹 Nitpick comments (1)
frontend/src/pages/NotFoundPage.jsx (1)
8-14: ⚡ Quick winGrid column count mismatch with rendered divs.
The grid uses 6 columns on smaller screens but always renders 12 divs. The extra 6 divs add unnecessary DOM nodes on mobile and tablet viewports.
♻️ Proposed fix to match rendered divs to visible columns
- <div className="absolute inset-0 grid grid-cols-6 lg:grid-cols-12 pointer-events-none"> - {Array.from({ length: 12 }).map((_, i) => ( + <div className="absolute inset-0 grid grid-cols-12 pointer-events-none"> + {Array.from({ length: 12 }).map((_, i) => ( <div key={i} - className="border-r border-black/10 h-full" + className="border-r border-black/10 h-full hidden lg:block [&:nth-child(-n+6)]:block" /> ))} </div>Alternatively, keep all 12 columns visible on all screen sizes if the design permits.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/pages/NotFoundPage.jsx` around lines 8 - 14, The grid renders 12 divider divs regardless of viewport while the CSS grid uses 6 columns by default and 12 at lg; update the Array.from({ length: 12 }) in NotFoundPage.jsx so the rendered count matches the visible columns (e.g., compute columnsCount = isLargeScreen ? 12 : 6 using a small responsive check like window.matchMedia or a useMedia hook inside the NotFoundPage component, then use Array.from({ length: columnsCount }) for the mapped divs), ensuring the key/layout code that currently maps the divs remains unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/pages/NotFoundPage.jsx`:
- Around line 24-26: The decorative background paragraph in NotFoundPage.jsx
(the <p> that renders the large "404" with classes including "absolute inset-0
... pointer-events-none select-none") is announced by screen readers; add
aria-hidden="true" to that <p> so it is ignored by assistive technology and only
the main accessible "404" heading is read.
---
Duplicate comments:
In `@frontend/src/pages/NotFoundPage.jsx`:
- Around line 191-196: The NotFoundPage.jsx Link currently points to a
non-existent "/login" route; update the Link in NotFoundPage.jsx (the Link
element that renders "Login") to point to your actual auth entrypoint (e.g., the
OAuth initiation path such as "/auth/github" or whatever route starts the GitHub
OAuth flow) OR add a new "/login" route that triggers the existing GitHub OAuth
flow (so it redirects to the same initiation endpoint or invokes the OAuth
handler). Ensure the Link's "to" value matches the real authentication
entrypoint used by your router (not "/login").
---
Nitpick comments:
In `@frontend/src/pages/NotFoundPage.jsx`:
- Around line 8-14: The grid renders 12 divider divs regardless of viewport
while the CSS grid uses 6 columns by default and 12 at lg; update the
Array.from({ length: 12 }) in NotFoundPage.jsx so the rendered count matches the
visible columns (e.g., compute columnsCount = isLargeScreen ? 12 : 6 using a
small responsive check like window.matchMedia or a useMedia hook inside the
NotFoundPage component, then use Array.from({ length: columnsCount }) for the
mapped divs), ensuring the key/layout code that currently maps the divs remains
unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ce707229-b96b-49db-8d12-d7e7ca0765e7
📒 Files selected for processing (1)
frontend/src/pages/NotFoundPage.jsx
| <p className="absolute inset-0 flex items-center justify-center text-[55vw] lg:text-[30vw] font-black tracking-tighter leading-none text-black opacity-[0.04] pointer-events-none select-none"> | ||
| 404 | ||
| </p> |
There was a problem hiding this comment.
Missing aria-hidden on decorative background text.
The decorative background "404" will be announced by screen readers, creating redundant content alongside the main "404" heading. This degrades the experience for users relying on assistive technology.
♿ Proposed accessibility fix
- <p className="absolute inset-0 flex items-center justify-center text-[55vw] lg:text-[30vw] font-black tracking-tighter leading-none text-black opacity-[0.04] pointer-events-none select-none">
+ <p aria-hidden="true" className="absolute inset-0 flex items-center justify-center text-[55vw] lg:text-[30vw] font-black tracking-tighter leading-none text-black opacity-[0.04] pointer-events-none select-none">
404
</p>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <p className="absolute inset-0 flex items-center justify-center text-[55vw] lg:text-[30vw] font-black tracking-tighter leading-none text-black opacity-[0.04] pointer-events-none select-none"> | |
| 404 | |
| </p> | |
| <p aria-hidden="true" className="absolute inset-0 flex items-center justify-center text-[55vw] lg:text-[30vw] font-black tracking-tighter leading-none text-black opacity-[0.04] pointer-events-none select-none"> | |
| 404 | |
| </p> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/pages/NotFoundPage.jsx` around lines 24 - 26, The decorative
background paragraph in NotFoundPage.jsx (the <p> that renders the large "404"
with classes including "absolute inset-0 ... pointer-events-none select-none")
is announced by screen readers; add aria-hidden="true" to that <p> so it is
ignored by assistive technology and only the main accessible "404" heading is
read.
2 participants
Related Issue
issue #30
Overview
Redesigned the
NotFoundPage.jsxwith a modern full-screen brutalist-inspired responsive layout while maintaining consistency with the existing CodeLens visual system.Changes Made
UI Improvements
Testing
Screenshots
Summary by CodeRabbit
New Features
Styling