Ks radio styling - Githubissues

ksiman14 commented 3 years ago

Description

Re-styled existing frequency radio inputs in AddItem component to look and act like buttons
Incorporated new color palette
Added :focus and :checked styling features

Related Issue

closes #48

Acceptance Criteria

[x] Make radio inputs look like buttons
[x] Maintain existing functionality

Type of Changes

	Type
✓	:sparkles: New feature
✓	:hammer: Refactoring

Updates

Before

Screen Shot 2021-08-31 at 12 51 37 PM

After

Screen Shot 2021-08-31 at 12 59 31 PM

Testing Steps / QA Criteria

checkout ks-radio-styling branch
navigate to Add an Item
Try to add an item without selecting a frequency, you should still get an error
Add an item with a frequency selected, it should appear on your list with the proper frequency
Navigate through frequencies using proper keys instead of mouse (tab to get to the first frequency, spacebar to select, up/down keys to move between them) and all should still function as expected

github-actions[bot] commented 3 years ago

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

https://tcl-28-shopping-list--pr57-ks-radio-styling-05yyyvvp.web.app

_{(expires Thu, 09 Sep 2021 00:20:03 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

isaabutaa commented 3 years ago

@ksiman14! I have to say, everything you did for this issue is pure dev magic. ✨ Like, I'm probably going to reference this code when I need to implement Material-UI in a future project. I tested it locally, and it works great! I can also use my keyboard to navigate the buttons, so that's awesome. 👍

the-collab-lab / tcl-28-smart-shopping-list

Ks radio styling #57