NicoandCopilot Autofix powered by AI
34d1c09c3f
<!-- Add the related story/sub-task/bug number, like Resolves #123, or remove if NA --> **Related issue:** Resolves #48129, resolves #44352 The 500 error page rendered a broken background image and stray "500 background" alt text and used outdated styling, and the 404 page predated the current design system. All error pages also dropped the app's top navigation, so hitting an error felt like leaving Fleet. This updates the 403/404/500 pages to the new designs and reuses the app's nav via a shared `ErrorPageLayout`. Notes: - For the 404 page, followed this Figma: https://www.figma.com/design/zSvjztoDsTZDaJ5PAFeOqD/-47395---404-page?node-id=7319-46&t=Q6vFAIETTW1ZpYY0-0 - For the 500/403 error pages, followed https://www.figma.com/design/gxvU745LfOdkE9AuRg64wi/%F0%9F%A7%A9-Product-design-system?node-id=4786-48606&t=LlD9fl7FxUKPIZfr-0 - I compressed `404.png` locally using `pngquant`. (Original asset from figma is almost 2MB.) <img width="1916" height="546" alt="Screenshot 2026-07-07 at 9 38 07 AM" src="https://github.com/user-attachments/assets/ab44d45a-87e6-4fac-a025-8435715701bb" /> # Checklist for submitter - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. See [Changes files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files) for more information. ## Testing - [x] Added/updated automated tests - [x] QA'd all new/changed functionality manually #### Authenticated <img width="1290" height="1397" alt="Screenshot 2026-07-06 at 8 41 19 PM" src="https://github.com/user-attachments/assets/3d08c7b8-dd23-4fb4-976a-d8116700d608" /> <img width="1285" height="1396" alt="Screenshot 2026-07-06 at 8 41 29 PM" src="https://github.com/user-attachments/assets/fd7529d4-6aeb-49e4-a1eb-13ea5363fb21" /> <img width="1295" height="1397" alt="Screenshot 2026-07-06 at 8 41 39 PM" src="https://github.com/user-attachments/assets/e6427078-fbd6-4113-a0e3-dda5c693bdb8" /> <img width="1294" height="1397" alt="Screenshot 2026-07-06 at 8 41 57 PM" src="https://github.com/user-attachments/assets/0c78de7e-8652-4372-95fd-10c62925f003" /> #### Unauthenticated <img width="1296" height="1399" alt="Screenshot 2026-07-06 at 8 42 20 PM" src="https://github.com/user-attachments/assets/78d320d1-92f0-4313-ace3-e0221e4055dc" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Error pages now render in a shared error-page layout with consistent top navigation behavior. * Refreshed 403/404/500 pages with streamlined, more focused actions. * **Bug Fixes** * Removed broken image elements from the 500 error page. * **Tests** * Added Jest/RTL tests to verify the layout’s navigation switches based on authentication state. * **Style** * Updated error-page spacing, typography, and visuals to better match the design system. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
assets Directory
This directory is used by the frontend build tool to store generated frontend build assets, such as JavaScript bundles, CSS files, and other static resources (images, fonts, etc.) that are produced during the build process.
Key Points
- Do not commit generated files: All files in this directory are generated automatically and are git-ignored. They should not be committed to version control.
- Not for static files: Do not place unrelated static files (like PDFs, config profiles, or documentation) here. Use a separate directory for non-UI assets.
- Regenerated on build: These files are recreated every time you run the frontend build process.