Style the list page so that it looks polished, is easy to use, is easy to comprehend, and is accessible.

[jongranados]

Description

This PR styles the List page. By leveraging Material UI, we were able to implement a lightweight design that gives the page a polished look-and-feel while maintaining its ease-of-use and enhancing its comprehensibility. This PR also addresses ongoing TODOs related to the List page such as correctly handling empty search results and rendering the specific item name in the item-deletion process.

Related Issue

Closes #31

Acceptance Criteria

• The overall page follows a cohesive design language (except for header and navigation bar which Amy is tackling).
• The list items look polished and are accessible.
• Item purchasing urgency is effectively communicated, looks polished, and is accessible.
• The search feature is intuitive to use, looks polished, and is accessible.
• The mark-item-as-purchased feature is intuitive to use, looks polished, and is accessible.

Type of Changes

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

Updates

Before

After

Testing Steps / QA Criteria

• Visit the preview link for this PR.
• Create a new list or join an existing one
• Test add-new-item functionality
• Test search functionality
• Test purchase functionality
• Test delete-item functionality

[github-actions]

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

https://tcl-57-smart-shopping-list--pr32-jg-style-list-page-va2xlh7v.web.app

_{(expires Wed, 31 May 2023 03:54:15 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: ad3eb6c34c2ec5986fcc218178df5985eb9c9ffb}

[emilysellers]

Really nice work, @jongranados! The list items are looking excellent. The way you've styled the urgency icon and delete icon really clean up the presentation of the list. I also like the inclusion of the last purchase date and total number of purchases - I think that could be useful info for the user.