Sm simple list view style 26

[sar-mko]

Description

The main changes made were to the List page with more styles, and incorporates updates to our navbar to help make timely changes.

• Updated the navbar in Layout.jsx and List Page on List.jsx and ListItem.jsx
• Added the User's list name as the header
• Added new global stylings in index.css
• Added proper heading elements
• Incorporated new colors and added responsiveness for the navbar for better user experience
• New icons throughout the List Page
• Removed ManageList from the navbar
• Included more spacing between elements
• Added aria-labels on elements with icons to provide better descriptions for screen-readers

Related Issue

closes #46 (Issue #26)

Acceptance Criteria

• The list the user is working on is visible: [List Name] List is seen at the top of the list between new navbar and above Add Item button
• Apply proper heading elements (ex. List Name is an h2)
• “Hello from the /list page!” message is removed

Type of Changes

enhancement

Updates

Before

After

Testing Steps / QA Criteria

• Pull from sm-simple-list-view-style-26 branch
• Open the List page from the Navbar
• See items and new stylings on List Page
• Dropdown Icon( aka for seeing purchase details) toggles between open and close
• Navbar is responsive on small screens
• Navbar hamburger toggles between open and close on small screens

[github-actions]

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

https://tcl-76-smart-shopping-list--pr55-sm-simple-list-view-sod4glo0.web.app

_{(expires Fri, 11 Oct 2024 19:25:44 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 512b1a88be8ae05fd3e727b99332819df760271d}

[arandel1]

Looks great!! Especially love the navbar change when the screen is smaller. Nice job Sarah!

[EmmaBin]

Love how it looks! Great job:)

[MarcosPerez16]

Very nice!