Isa - Single Item Styling

isaabutaa commented 3 years ago

Description

Added styling to the SingleItem component so that it more closely aligns with our wireframe.

Referenced @ksiman14's code for the radio button styling and Material UI docs to create styling
Imported makeStyles from MUI specifically for SingleItem styling
Created styling for the div container, label, and delete button
Put the styling inside a separate file called SingleItemStyles.js in src/themes
Imported the styling from that file into the SingleItem component
Imported InputLabel and Button components from MUI to replace existing label and delete button in SingleItem component
Changed condition for "not soon" items from > 30 && < 40 to >= 30 && < 40 because "not soon" items were previously showing up as inactive

Related Issue

Closes #50

Acceptance Criteria

Modify Single Item styling so that they reflect the what's in the wireframe, and match the soon, kind of soon, and not soon colors used in AddItem

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
✓	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

Before

After

Testing Steps / QA Criteria

checkout the project url or git checkout ia-single-item, then npm start
see how you like the styling

NOTE: The styling for inactive elements probably won't show up because that still needs to be sorted out, but otherwise the styling is fine Also note: When you hover over the delete button, it changes color as intended, but doesn't fill the entire silhouette for some reason. I'm not a fan, but I don't know how to fix it. For now, maybe it's okay?

github-actions[bot] commented 3 years ago

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

https://tcl-28-shopping-list--pr61-ia-single-item-45a2t5fg.web.app

_{(expires Thu, 09 Sep 2021 00:49:34 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

isaabutaa commented 3 years ago

Thank you everyone! @sandaiiyahh I think that's a great idea to use the same styling for the clear search/X button. I'm going to try and implement that before our office hour this evening. 👍

isaabutaa commented 3 years ago

Should the "Clear" x button on the filter search also have the same styling as the "Delete" buttons?

@sandaiiyahh the buttons should match now 🙂

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