feat(404): added 404 page #1401
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR adds a custom 404 page to the application and improves branding consistency across error/status pages. The main addition is a new not-found.tsx file that creates a 404 page matching the application's authentication theme and branding system. The page features dynamic button styling that adapts to custom brand colors through CSS custom properties, automatic dark/light theme detection using color luminance calculations, and proper cleanup of event listeners and mutation observers.
The PR also updates the invite status card component to use dynamic brand configuration instead of hardcoded values. Specifically, it replaces the hardcoded support email 'help@sim.ai' with brandConfig.supportEmail, making the contact information configurable through environment variables. This change aligns with the branding approach used in the new 404 page and removes some unused icon rendering code to simplify the UI.
The 404 page implementation follows existing patterns in the codebase by reusing components like AuthBackground and Nav, ensuring visual consistency with other auth-style pages. The sophisticated brand detection logic allows the page to work seamlessly with white-label deployments by detecting custom brand configurations and adjusting styling accordingly. Users encountering non-existent pages will now see a cohesive experience with helpful navigation options back to the workspace and support contact information.
Confidence score: 4/5
- This PR is safe to merge with minimal risk of breaking existing functionality
- Score reflects well-structured code following existing patterns, proper cleanup of resources, and non-breaking changes to existing components
- Pay attention to the dynamic styling logic in
not-found.tsxto ensure it works correctly across different brand configurations
2 files reviewed, 2 comments
| } | ||
| } | ||
| checkCustomBrand() | ||
| window.addEventListener('resize', checkCustomBrand) |
There was a problem hiding this comment.
style: Resize event listener seems unnecessary for brand color detection - brand colors don't typically change on window resize
Summary
added 404 page
Type of Change
Testing
Tested manually.
Checklist
Screenshots/Videos