Relocate Share List func to modal + navigation to lists from Home + styled Home components

[Wyna-7]

Description

The share list functionality has been moved to a modal, which opens when the share button next to each list is clicked.
When a list name is clicked, the site navigates to the list view for that specific list.
Components visible from the home page have been styled to match Figma (as much as I could).

Related Issue

Closes #32

Acceptance Criteria

• Each SingleList component renders a button that allows the user to open a modal when clicked.
• The modal allos the user to share the list with another user by filling and submitting a form.
• Each SingleList component renders a clickable list name, which navigates to that list's view.
• - [x] Each SingleList component renders a delete list button that does nothing (for now :))

Type of Changes

enhancement

Updates

Before

After

Testing Steps / QA Criteria

• Do a git pull and git checkout refactor_homepage
• Open the homepage by running npm start.
• The share list functionality should be in a modal, which opens clicking the share icon next to each list.
• When clicking on a list name, the site should navigate to that list's view

[github-actions]

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

https://tcl-79-smart-shopping-list--pr38-refactor-homepage-fj2gxrnh.web.app

_{(expires Sun, 13 Oct 2024 12:41:29 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: d91d9ddbda780208241c52942f544acf8e81407a}

[marshjaja]

Well done! 🚀 I’ve made some suggested adjustments to align with the colour palette and design we chose on Figma.

There where a lot of file and I hope I didn't miss one😅
Please let me know if you have any questions

[Hudamabkhoot]

Aside from the design notes from marcia it looks good to me great work! 👏