Adds Chakra UI To List and ListItem Components

[Yaosaur]

For an example of how to fill this template out, see this Pull Request.

Description

This code changes the styling structure of all of the List and ListItem components by using chakra UI components. It also adds a new component, Dialog, to replace the window.confirm dialog. This code also adds a new display for the user's current token and the ability to quickly copy the token.

Link to the design wireframe: https://www.figma.com/file/4oxU5wehZPNinZpr24UuLw/Chakra-UI-Figma-Kit-(Community)?type=design&node-id=2102-2110&t=ciT6mhpJqrDlx0bY-0

Related Issue

Closes #34
Closes #35

Acceptance Criteria

Issue 16.

• Header should be fixed and contain the List Luxe title.
• When the user joins a new list or creates one and navigate directly to /list, the current token should be displayed along with a graphic to copy the token on click (Asset: CkCopychakra icon)
• The Search input field should include an x to clear the search filter. (Asset: InputRightElement with CkClose chakra icon)
• dialog should be styled using a chakra toast component at the top of the page [tbd]

Issue 17.

• Tab asset should be added for each category.
• The list items should be filtered and displayed only based on that category.
• Each item will be displayed as an accordion button that includes the ListItemDetails.jsx (chakra asset: AccordionButton)
  • A x icon (chakra asset: InputRightElement with CkClose chakra icon) will display in the accordion button and perform the onClick delete functionality
  • Multiple items should be able to be expanded at once (allowMultiple)
• Each item in the accordion button will have a checkbox color based on the urgency category (see wireframe styling)
• Confirm alert that pops up when user deletes item should be styled using the chakra AlertDialog component instead of window.confirm

Type of Changes

	Type
✓	✨ New feature
✓	🔨 Refactoring

Updates

Before

After

Testing Steps / QA Criteria

In your terminal, use git checkout yj-ky-list-item-chakra to create a new branch and switch over.
Use git pull origin yj-ky-list-item-chakra to bring the changes from remote to local.
npm start to start a local instance of our app

• Select the Copy icon next to the List token name and paste it somewhere to make sure the list is copied correctly onto the clipboard.
• When typing an item into the Filter Items input field, the list on whatever tab you're on should update along with all other tabs if you click through each category.
  • When you click on the X after your search, the lists should go back to the original items in each category and the input field should go back to the placeholder.
  • You should be able to hover over each Item in the list and click on it to drop down an accordion
    • The Item details should display below the item and you should be able to click the item again to close it
  • Clicking on the garbage can icon should open an Alert Dialog
  • Selecting Cancel will bring you back, selecting Delete will delete the item in firebase, remove it from the list, and a Toast should pop up if successful
• When the list is empty, the tabs and accordion should not display

[github-actions]

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

https://tcl-55-smart-shopping-list--pr42-yj-ky-list-item-chak-coq3e9rm.web.app

_{(expires Sun, 04 Jun 2023 23:04:46 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 607d14028385ebfcc7c9ec69a7bb14d95ed54078}

[mentalcaries]

It's looking great!
My main concern:

• Font size is a bit hard to read on my end (not sure if this is addressed in another PR)

For future consideration:

• a toast saying something like "token copied"

[jeremiahfallin]

After messing around with the code with Ticia I think we came up with with a nice solution for the Tabs overflowing. If you try the code in this gist then just the Tab titles should scroll and all of the details from the TabPanel should fit without overflowing:
https://gist.github.com/jeremiahfallin/132158b37eec2b71a2a8a9ac0709d36a

[jeremiahfallin]

Looks a little bit off on really thin devices. May need to adjust some widths to get it all to fit, even if we need to have horizontal scroll.

[ticiadev]

Everything is functional, and the tab highlighting looks great! I think the whole page is looking good besides the padding and scroll on smaller screens, but Jeremiah and I looked at it and he came up with a great solution that I think resolves those issues.