Update list `<li>`

[jamesncox]

Description

Refactors the <li> for displaying the list items to reflect our Figma design.

Related Issue

Closes #50

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
✓	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

1. Add gray-200 background to list items
2. Add category names "...soon", "...soonish", "...not soon" and "...to rethink" above each section
3. Update trash icon color to midnight-green and hover:text-red-500 on hover
4. Add clock SVG as JSX and pass each category's color to the clock.
5. Add conditional render of category in return to display category if there is at least one item in that category

BONUS UPDATE

6. Update delete Sweet Alert to display the name of the item being deleted
7. Refactored the confirm color to match destructive red and the cancel color to be non-destructive blue

Visual Changes

	Before	After
Mobile Nav
Desktop

Sweet Alert Change	Before	After

Testing Steps / QA Criteria

1. On main run git pull
2. Run git checkout update-list-li
3. Run npm install
4. Run npm start
5. Add new items to each category and see the new display and notice how the items filter into each category.
6. The category names (...soon, ...soonish, etc) won't display unless there is at least one name in that category
7. Notice the delete alert displays the item's name and the confirmation button is red to indicate destructive action.

[github-actions[bot]]

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

https://tcl-23-shopping-list--pr53-update-list-li-m4rr1do2.web.app

_{(expires Thu, 03 Jun 2021 17:06:47 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[jssckbl]

I tested this out on mobile and desktop views, and everything looked good on screen.

From what I can tell, the form labels and the voice over regarding the <li> items works as I'd suspect they should.

Time to merge, James!