JRA-26 #done Implement 404 Page

[CaptainExtremis]

Checklist

Please ensure you have followed all of the steps below before submitting a pull request:

• Include the corresponding Jira issue key and #done in the PR title, like so: "JRA-123 #done Migrate Election Reminders"
• Verify that the code compiles (npm run dev)
• Verify that the project builds (npm run build)
• Verify that all tests pass
• Verify that unit tests cover 100% of the code
• Create Storybook stories for visual components
• Verify that any visual components match the Figma
• [--] Test with a screen reader (if applicable)
• [--] Document your code with TSDoc comments
• [--] Format your code with Prettier

Overview

Implement a 404 page when a user navigates to a page that hasn't been created for the site.

Test Plan

• Used npm run dev/build to verify the website would build and run locally
• Created a .test document to verify 100% testing coverage
• Created a .scss file to ensure page visually matched the Figma document
• Created and verified a Storybook page

Follow ups

I have not been able to fix the code formatting with Prettier. I will attempt to reinstall and see if it fixes itself; the code for the 404 page will have to be reformatted manually.

[dvorakjt]

Hi Phillip,

Good work, this is pretty much ready to be merged as soon as you resolve the merge conflict in src/stories/components/utils/page-container.stories.tsx. Here are the steps you will need to take to resolve this:

• Open up the file in VSCode and find the merge conflict marker:
  
• Above the marker you will see a few small buttons with text such as "accept current change", "accept incoming change", and "accept both changes." The current change is your local changes, the incoming changes are from the upstream repository. In this case, the only difference is that in your local changes, the name of the story is "empty" and in the incoming changes from the 8by8 repo, it is "Empty." PascalCase is the correct case for Storybook stories, so we want to click "accept incoming changes."
• Save the file.
• Open up a terminal and run git add .
• Then run, git commit -m "fixed merge conflicts"
• Finally, run git push

Once you resolve this conflict, I will approve and merge this.

As a first basic step to troubleshoot Prettier, please open VSCode and navigate to file->preferences->settings. Then search for "default formatter." Find the setting called "Editor: Default Formatter." Ensure that you have selected "Prettier - Code Formatter." If you cannot find this option, you will need to install the Prettier extension. To do this, go to file->preferences->extensions. Search for "Prettier" and install it. The go back to file->preferences->settings and select it as your default formatter.

[dvorakjt]

Great job! Approved!