Sd input component

[sandaiiyahh]

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

Description

• Created Input reusable component using Material UI's TextField
• Input component takes in props (label, name, value, onChange, required) Thank you @isaabutaa for the amazing idea! 🤩
• Applied Input component to entering an existing token, filtering items, and adding a new item

Related Issue

closes #47

Acceptance Criteria

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

• Pull down sd-input-component
• Checkout to sd-input-component
• Check to see if you are still able to enter an existing token using the new input
• Check to see if you are still able to filter properly using the new input
• Check to see if you are still able to add a new item using the new input

[github-actions[bot]]

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

https://tcl-28-shopping-list--pr60-sd-input-component-40oqufh4.web.app

_{(expires Thu, 09 Sep 2021 00:52:33 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[sandaiiyahh]

Good job, Sandy! I can use the input field to enter an existing token, filter items, and add an item. to the list. Just I cannot see the placeholder text. I don't know what is causing that.

Ooh thanks for catching that Hulya! I changed it last minute and forgot to look over it. I was passing placeholder as props but forgot to change the “label” to placeholder in the Input component. Will update tomorrow!

[sandaiiyahh]

This looks great @sandaiiyahh! I love the styling with the green outline when you're typing in the input field. Only comment I have is the same comment as Hulya on the placeholder text 😊

Yeah it was part of Hulya and Isa's UI theme! I was thinking we might need to change have a white background over the main part of the app though, to see everything a bit better 🧐