Contribution to Wrap-nd-Go

Process

I helped the owner to fix the Search bar UI. Since the site is just started, there were a lot of works need to do. Firstly, I asked the project's owner to assign the task for me. After getting accepted and reading all the rules of the project, I forked and cloned it.
After installing all the packages, I ran the project locally and started working on it.

I Created a component for search bar. This also included a package named react-ioicons, which is used for creating wonderful icon.

Since the owner told me to work on a single CSS file, which was public/style.css, I did not create a CSS module file.

Here is the design of the search bar:

That was a combination of 2 input html element. I removed all the border of the inputs and instead put them in a div that is a flex-box. After adding the Icons, I added a big border around the

and rounded it. Some margins were added so that the search bar would be in proper position.

Challenge

For the first time, I had no idea what I would do. I went to Youtube to look for some tutorial of flexbox to myself, and some that showed how to style a button element. Finally, I did it, and my job got merged. Still, the owner told me that I need to submit another PR since the first one faced some error.