Edit individual list items.

[Hudamabkhoot]

Description

Users can now edit their item details directly through the "Edit Item" form. This feature allows them to modify the item name, update the next purchase date, and adjust the quantity.

Related Issue

closes #49

Acceptance Criteria

• Users should be able to edit their list items details.

Type of Changes

Feature

Updates

Before

After

Testing Steps / QA Criteria

• Do a git pull and git checkout hm-edit-listItem.
• Open the homepage by running npm start.
• Navigate to the list page.
• The edit item functionality should now be in a modal triggered by the pencil icon next to the delete button.
• You can now modify the item name, update the next purchase date, and adjust the quantity.

[github-actions]

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

https://tcl-79-smart-shopping-list--pr54-hm-edit-listitem-cezd4csr.web.app

_{(expires Sun, 20 Oct 2024 14:58:59 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: d91d9ddbda780208241c52942f544acf8e81407a}

[marshjaja]

I love this additional feature!
Small note I think the pencil and trash can should be two different colours but not necessarily the pinks and greens we use throughout the app(cause there is a lot of colour going on) Maybe just black/dark grey/dark slate on Light mode and a a light grey/slate on Dark mode? I don't know🤷🏾‍♀️

[Hudamabkhoot]

I did the following in my recent commits:

• Modified the on hover opacity of list items buttons and matched the design of home and list buttons.
• Matched the dialogs buttons.
• Added a loading state so the add list items div wont show as the data is loading.
• Added the inactive share button to match the inactive delete button.
• Also solved conflicts with dev branch.

[joriordan332]

Great work and really nice feature! Well done

[marshjaja]

Looks okay!
Just the loading state now stays if there are
no items on a new list and you can't see the add item button that was visible previously.