Unifying search box styling across Settings and Search pages

[MundiaNderi]

Fixes #4264

Unifies search box styling in the search page and settings page, so that it's similar to the search box on the resource page drop down and copy from locale batch action drop down.

To test:

• Check if the changes apply to all the search boxes.

[functionzz]

Hey @MundiaNderi, @mathjazz is on vacation, when he comes back he can take a look and approve the design - thanks!

[mathjazz]

Thanks!

What about other pages, e.g.:
https://pontoon.mozilla.org/sl/permissions/
https://pontoon.mozilla.org/messaging/
https://pontoon.mozilla.org/admin/projects/
...

Are those meant to be fixed in a separate PR?

[MundiaNderi]

Thanks!

What about other pages, e.g.: https://pontoon.mozilla.org/sl/permissions/ https://pontoon.mozilla.org/messaging/ https://pontoon.mozilla.org/admin/projects/ ...

Are those meant to be fixed in a separate PR?

I had missed those, thanks. No, I'd rather address them in this PR.

[MundiaNderi]

I checked the rest of the pages and they all have the fix. I'm targeting the .search-wrapper and .search-wrapper .icon classes in pontoon/base/static/css/style.css, which is shared by every search box in the app.

[mathjazz]

I checked the rest of the pages and they all have the fix. I'm targeting the .search-wrapper and .search-wrapper .icon classes in pontoon/base/static/css/style.css, which is shared by every search box in the app.

Thanks for clarifying. I tested locally and didn't spot any remaining search field to be using the old design. Nice work!

One thing we should change though is the background color, which seems too light on most of the pages. We should use the same background as the input box. For example:

• On http://localhost:8000/messaging/, let's use the same background as the input boxes use on that page.
• On http://localhost:8000/admin/projects/amo/, let's use the same background as the input boxes use on that page.
• On http://localhost:8000/settings/, let's use the same background as the input boxes use on that page.
• On http://localhost:8000/sl/permissions/, let's use the same background as "Filter projects" uses on http://localhost:8000/sl/.