Issue #15: Implement IconButton and update icon imports for consistent design and functionality

[shuveksha-tuladhar]

Description

This PR addresses enhancements to improve the overall design and functionality of the application.

• All icons are imported from the "react-icons" library, replacing CDN-imported icons.
• All buttons and icons incorporate IconButton components.
• The share list icon has been moved to be a sibling of the disclosure header, rather than being integrated within it.
• A list name is displayed on the manage-list page.
• The purchase frequency options for items are now presented as vertically aligned radio buttons.

Related Issue

• Closes 15. As a user, I want my buttons to be uniform for legibility. #40

Acceptance Criteria

• Replace all CDN icon imports with imports from "react-icons."

• Ensure the share button is positioned as a sibling of the disclosure.

• Implement IconButton for all applicable buttons and links, including:

  • Add (Create List) button
  • Share button
  • Sign-in button
  • View lists button in footer
  • Add item button in footer
  • Sign out button in footer
  • Delete button within the disclosure, with refactoring to support keyboard accessibility.

Type of Changes

enhancement
bug fix
refactoring

Updates

Before

After

Testing Steps / QA Criteria

• Confirm that your List Name is now displayed in the header of manage-list page.

• Confirm that all buttons function as expected.

  For Landing page

  • Sign in button

  For View List page:

  • Add a button for creating a list.
  • Share button for each list.
  • Delete button for each item.

  For Manage-List page

  • Add a button for creating an item on a list.
  • Share button for sharing with a recipient.

  For Footer

  • View List button
  • Add Items button
  • Sign out button

[github-actions]

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

https://tcl-74-smart-shopping-list--pr42-st-nr-15-b5vqnxo2.web.app

_{(expires Wed, 09 Oct 2024 18:51:02 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 79d73546692f99aad8468c28e36db434e2c190ac}