Cw labels

[polly89]

Description

This PR updates the look and feel of the List page in order to create an appealing list for our users. It updates the styling for the ListItems, standardizes the colors in the app, and imports our fonts.

Related Issue

closes#39

Acceptance Criteria

Style the list items on the List page to match our wireframes, while keeping all necessary information and functionality.

Acceptance Criteria

• [ x ] List items include the items name and current status
• [ x ] List items visually and semantically differentiate between checked and unchecked items
• [ x ] List items include a delete icon button to trigger the delete modal

Type of Changes

	Type
	🐛 Bug fix
	✨ New feature
✓	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

Updates

• There was a typo in our yellow, so I fixed it and it standardized the yellows across the app
• Updated our dark mode font to light teal
• Changed the look of the listItems being displayed
• Added conditional styling for checked items
• Imported Google Fonts
• Modified spacing between elements and page alignment.

Before

After

Testing Steps / QA Criteria

• Navigate to an existing list
• Switch system settings from dark to light mode
• mark an item as purchased

Note:

I'll adjust the placement of the buttons on the empty list once I've merged the issue. It's hard to visualize without the buttons.

[Satoshi-Sh]

You need to resolve the merge conflicts otherwise the preview isn't available.

I think you can add a message like "share token with friends/family to use the same shopping list" above the list token section in this PR.

I will check this later. The list looks cool now 🥇

[github-actions]

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

https://tcl-64-smart-shopping-list--pr45-cw-labels-g0p8zci3.web.app

_{(expires Sat, 14 Oct 2023 11:09:35 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: a60b3bbf6240277c6faac0e586ba48982028ef7b}

[polly89]

You need to resolve the merge conflicts otherwise the preview isn't available.

I think you can add a message like "share token with friends/family to use the same shopping list" above the list token section in this PR.

I will check this later. The list looks cool now 🥇

I fixed the merge conflict. Thanks for letting me know.

[tialaaa]

Everything looks great! 🎉🎉

[Satoshi-Sh]

It's giving a breakthrough to the trash icon as well.

Right now clicking on a card updates the item because of the label. Is this what you are looking for? I kind of want users to click on the radio button to update the item. It's my preference.

It would be nice to have a cursor pointer to show users that it's a button like a copy icon.

One more thing I feel it's hard to read the urgency. It's important information for users to know what to buy. Maybe aligning urgency right looks better since it changes the position according to the length of item names.

We don't have much time to work on them anymore. Please feel free to ignore the points I listed.

[polly89]

It's giving a breakthrough to the trash icon as well.

Right now clicking on a card updates the item because of the label. Is this what you are looking for? I kind of want users to click on the radio button to update the item. It's my preference.

It would be nice to have a cursor pointer to show users that it's a button like a copy icon.

One more thing I feel it's hard to read the urgency. It's important information for users to know what to buy. Maybe aligning urgency right looks better since it changes the position according to the length of item names.

We don't have much time to work on them anymore. Please feel free to ignore the points I listed.

Hi @Satoshi-Sh , I wanted to send an updated response to your comments:

1. I updated the trashcan so it doesn't have a line going through it.
2. According to this article, we need them to be able to click on the label to make it accessible.
3. The cursor is appearing on my end now, let me know if it is on yours.
4. I made the urgency tab black and increased the font-weight. Let me know if it's a bit more visible now.

[ismarjiw]

Looks good to me! This is a non-blocking comment but is there anyway the list items could be a little more centered with the page in Desktop view? Other than that it looks awesome!

[Satoshi-Sh]

Great. Thanks for the update.

[Satoshi-Sh]

I meant a pointer on the third point. If it's a cursor instead of a pointer, users cannot see if clicking trigger an action or not.

I thought that it made more sense to have an item name only as a label to trigger updating the item. It's fine as is though.