Implement design for list page

[Hudamabkhoot]

Description

This pull request implements the design for the list page as specified in the Figma design. The main changes include:

• The layout of the list page has been updated to align with the Figma design.
• The delete alert has been redesigned for improved clarity and user experience.

Related Issue

Closes #34

Acceptance Criteria

• Add list name to list page to be able to know which list you're currently on.
• Follow the figma design for the list page.

Type of Changes

Enhancement

Updates

Before

After

Testing Steps / QA Criteria

• Do a git pull and git checkout hm-list-layout
• Open the homepage by running npm start.
• Navigate to the list page.
• You can see the newly implemented design for the list page as specified in the Figma design.
• Click the delete button to view the redesigned delete alert.

[github-actions]

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

https://tcl-79-smart-shopping-list--pr41-hm-list-layout-v11uvy5m.web.app

_{(expires Sun, 13 Oct 2024 11:45:58 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: d91d9ddbda780208241c52942f544acf8e81407a}

[joriordan332]

Looks brilliant! Well done :)

[Wyna-7]

Looks amazing, Huda!
The list items are styled a bit different form the singleList items on the home page, maybe we should make them match in size and style? We can look into it as group once we put all PRs together :)

[marshjaja]

@Hudamabkhoot amazing job!🚀
We need to alter the styling a bit, but I think it is good for now as we need to come together as a group and have all of our PR's inline. We can always adjust the styling later