style the AddItem component

[redapy]

For an example of how to fill this template out, see this Pull Request.

Description

This PR style the "Add item" page, and remove the "filter text" from the Search component

• To make the radio buttons look better, I installed the custom-forms plugin.
• I wrapped all the inputs inside their label because I had some issues to style them as they were.
• Styles error and success messages

Related Issue

Closes #48
Closes #52

Type of Changes

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

Updates

Before

After

Testing Steps / QA Criteria

• From your terminal, pull down this branch with git pull origin rb-style-add-item-page and check that branch out with git checkout rb-style-add-item-page
• run npm install to install the new dependecie
• Compare the changes with the Figma file.

Test searching the list

• In the list page, start your search with a white space.

[github-actions]

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

https://tcl-44-smart-shopping-list--pr53-rb-style-add-item-pa-aedjev8f.web.app

_{(expires Thu, 02 Jun 2022 12:42:43 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[hellodeborahuk]

Great work Reda!

[JimeBlue]

Excellent job @redapy 🚀

[redapy]

what do you think about the colors? I don't if green looks good, was thinking about cyan also for the success message

[JimeBlue]

Cyan would be the perfect combination for the success message IMO

[hellodeborahuk]

what do you think about the colors? I don't if green looks good, was thinking about cyan also for the success message

I agree with Jimena, cyan would look good. I'd just check the colour contrast of the cyan on the white. If it fails, then try a higher number like cyan-600 until it passes the contrast.

[JimeBlue]

Great job with the changes @redapy! I love the way it looks with the messages now. This I found very instructive in relation to using aria-label or aria-labelledby https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/. Also this https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html

[redapy]

Thanks for the great review. I used cyan-800 because of a11y, lees than that it will be poor contrast