Relocate Add Item Functionality to Modal on List Page

[Hudamabkhoot]

Description

The add item functionality has been relocated to the list page, where it is now accessed via a modal triggered by clicking the "+" next to the search bar. This modal includes an option for specifying item quantity.

Related Issue

closes #33

Acceptance Criteria

• Move the add item form to list page.
• Prevent adding only numbers as item names, currently the form allows numbers to be item names and it will submit it as empty item list name.
• Add item quantity.
• Create a modal for add item to be displayed when the add button is clicked.
• Clear input button should be removed following the design.

Type of Changes

Enhancement

Updates

Before

After

Testing Steps / QA Criteria

• Do a git pull and git checkout hm-addItemForm-relocation-and-modifications
• Open the homepage by running npm start.
• Navigate to the list page.
• The add item functionality should now be in a modal triggered by the "+" button next to the search bars with an option to specify item quantity.

[github-actions]

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

https://tcl-79-smart-shopping-list--pr37-hm-additemform-reloc-69f6yhk4.web.app

_{(expires Fri, 11 Oct 2024 15:31:59 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: d91d9ddbda780208241c52942f544acf8e81407a}

[joriordan332]

This looks brilliant! Well done

[marshjaja]

Well done!👏🏾🚀
I just left some comments with some minor styling adjustments to aline with the design(sorry, as I wasn't sure--but you might have said you would address it in another issue?)

[Hudamabkhoot]

Thank you @marshjaja i have applied all the adjustments you mentioned! Also yes the page styling will be on a different issue 👍