As a user, I want to see the items in the selected list displayed with a checkbox, item name, urgency category (in different colors), and a delete button #42
Conversation
|
Visit the preview URL for this PR (updated for commit 153c1d1): https://tcl-78-smart-shopping-list--pr42-dc-urgency-categorie-ull8oxz4.web.app (expires Fri, 04 Oct 2024 21:58:45 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c781903507c1507075d7a974036959ddeec29c0a |
src/components/ListItem.jsx
Outdated
| @@ -26,6 +32,23 @@ export function ListItem({ name, dateLastPurchased, onCheck, onDelete }) { | |||
| } | |||
| }; | |||
|
|
|||
| const categoryColor = (category) => { | |||
There was a problem hiding this comment.
This switch statement works fine. Another option would be to use an object instead:
const categoryColor = { soon: 'purple', 'kind of soon': 'orange', 'not soon': 'green', overdue: 'red', inactive: 'gray', };
And then just use the key/value pair:
categoryColor[category]
Aside from that, I noticed that the combination of the text color for the 'soon' category and its background isn’t passing the contrast ratio check.
You can check it yourself here: https://webaim.org/resources/contrastchecker/.
You may want to consider using a darker text color or lightening the background, so the chosen colors reinforce accessibility in the app
Description
all the items to appear in a single line but the text for the urgency category (e.g., "soon") should be colored based on urgency.
Related Issue
closes #43
Acceptance Criteria
ListItemcomponent displays category colors, assigning specific colors (purple, orange, green, red, gray) to urgency categories such as "soon," "kind of soon," etc.Updates
Before
After