Collaborator

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.

Collaborator

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

Collaborator

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/.

Collaborator Author

So, I've made the changes :
Messaging :

Projects

Settings

Permissions

Collaborator

Thanks for the update! It looks really good!

Please also make sure the search input background in popups with light backgrounds (#333941) is dark (#272a2f). That will match the appearance of the Messaging panel.

Example:

Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Collaborator Author

Thanks for the update!

At least the following are not fixed yet:

* Homepage selector on http://localhost:8000/settings/
* Project selector on http://localhost:8000/abq/permissions/

It'd be great if we could find a generic CSS rule for all menus and set the background there.

So, I've made the changes .

Homepage selector with a generic CSS rule for all menus

Project selector :

Collaborator

The idea is that there's always contrast between the search field background and the surrounding background.

The fix on the settings page looks good - nice work! 👍

But it looks like there was a misunderstanding regarding the Project selector. The Search field on the locale page was fine. I was referring to the project selector on the Permissions pages, e.g. http://localhost:8000/abq/permissions/.

Collaborator Author

My mistake - yes having contrast makes sense. I think I've finally seen the project selector you're referring to.

Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.