Issue #18: Implement Modal dialog box for Share List and Create a List functionality

[shuveksha-tuladhar]

Description

This PR introduces two modal components: one for sharing a list via email and another for creating a new list name. This enhances the UI with modal dialog boxes that include a Submit button to confirm the action and a Cancel button to close the modal.

Related Issue

• Closes #50

Acceptance Criteria

• [x] The Share List modal should allow users to input the email addresses of recipients to share their lists.
• [x] The Create a List modal should allow users to input the name of the new list they want to create.
• [x] Both modals should include a Submit button to confirm the action and a Cancel button to close the modal.

Type of Changes

enhancement refactoring

Updates

After

Testing Steps / QA Criteria

• Modal Functionality:

  • Verify that clicking the Share button opens the Share List modal.
  • Verify that clicking the Add button opens the Create a List modal.
  • Ensure that both modals can be closed by clicking the Cancel button.

• Verify input validation for both modals and error messages/toasts.

• Verify functionality of Create a List and Share List.

• Ensure a success message is displayed upon successful submission.

[github-actions[bot]]

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

https://tcl-74-smart-shopping-list--pr51-st-modal-s7qnarqc.web.app

_{(expires Mon, 14 Oct 2024 06:39:43 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 79d73546692f99aad8468c28e36db434e2c190ac}