Style the basic page layout that applies to all views of the app using components from MUI Library

[Amy-Pr]

Description

This PR styles the layout of the app using MUI. The Navigation and Header area are separated from the main body of the app using MUI Container layout components. The containers are given a flex display attribute to center the content. Note: Containers are given color attributes for visualization purposes only and will change as customization decisions are made later in development.

Related Issue

Type of Changes

	Type
	🐛 Bug fix
✓	✨ New feature
	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

Updates

Before

Before this PR, the navigation links show up at the bottom of the UI, and basic layout is controlled by layout.css

After

After this PR, the page is broken into different MUI Container components and an App Bar for headline and navigation is set at the top of the page.

Testing Steps / QA Criteria

-Check out the links on the nav bar and spacing of main content.

[github-actions]

Visit the preview URL for this PR (updated for commit 1269e1c):

https://tcl-57-smart-shopping-list--pr34-ap-mui-app-layout-sc6ka69b.web.app

_{(expires Wed, 31 May 2023 05:58:50 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: ad3eb6c34c2ec5986fcc218178df5985eb9c9ffb}