improveSearchBar: centralized the search bar and used the dark theme

[Jumeb]

Improvements to search bar.

• Centralized the search bar.
• Change the search bar to a dark theme.

Centralized for larger devices

dark theme for all devices

Centralized for smaller devices like tables

fixes #177

[tuxology]

Generally, LGTM 🏳️‍🌈 I'll let @NdibeRaymond merge this. Can you also add a screenshot in the description to show how it looks?

[NdibeRaymond]

Thanks for making this PR @Jumeb!
I noticed are lots of dirty diffs in your PR, particularly in the package-lock.json file. I understand that it's probably your local development environment that is adding these diffs and it's not your fault. Perhaps you can clean it up a bit?
If you can't avoid dirty diffs in the package-lock.json file, a quick way to fix it before committing is to run git checkout package-lock.json in the folder containing the package-lock.json file, then git add . and git commit.

[NdibeRaymond]

See previous comment about dirty diffs.

[NdibeRaymond]

Hello @Jumeb , I noticed you deleted the package-lock.json file. My review about cleaning up dirty diffs wasn't about deleting the package-lock.json file, rather I was talking about returning the package-lock.json to it's initial state before your local dev environment made changes to it. Right now you should just copy the package-lock.json from master branch to your branch and that'd solve the issue. Do this, then let's merge your PR

[NdibeRaymond]

Also resolve the conflict in pageWrapperStyles.js and squash your commits into one (this can be done using git rebase then force push. You can read it up)

[Jumeb]

@NdibeRaymond thanks for the tips, everyday is an opportunity to learn. I just made the changes and changed the package-lock.json file to its original state. Always had problems with git rebase hope I did it right this time.

[tuxology]

@Jumeb Take a look at latest changes we've merged on http://zubhub.unstructured.studio. The search bar's behavior and UX has changed a bit. Can you adapt to that and rebase in addition to changes @NdibeRaymond requested? Then we can merge this one 👍

[AndrewLester]

@Jumeb Also, feel free to fix this current issue with the search category selector in the UI. Should just need to override the min-width: 0 (and set it to unset) on the FormControl element which wraps the category selector, then give the outlined input's form control a flex-shrink: 1.

[Jumeb]

I’m on it @tuxology and @AndrewLester

[Jumeb]

@Jumeb Also, feel free to fix this current issue with the search category selector in the UI. Should just need to override the min-width: 0 (and set it to unset) on the FormControl element which wraps the category selector, then give the outlined input's form control a flex-shrink: 1.

Thanks for the tip, it worked perfectly. I have solved the issues

[tuxology]

@NdibeRaymond Should we merge this one?

[NdibeRaymond]

@NdibeRaymond Should we merge this one?

I'll attempt removing the package-lock.json change

[NdibeRaymond]

@Jumeb can you try clicking on "allow edits by maintainers" on this PR? the PR made a large change to the package-lock and should be reverted back before merging.

[Jumeb]

@Jumeb can you try clicking on "allow edits by maintainers" on this PR? the PR made a large change to the package-lock and should be reverted back before merging.

Sorry for the troubles, I just clicked the option to allow edit by maintainer