1692539 - Implementing dark background on hover for all panels

Status: RESOLVED FIXED

(Webtools Graveyard :: Pontoon, enhancement, P3)

Description

[Anuj Pandey]

Attachment: WhatsApp Image 2021-02-12 at 9.47.19 PM-2.jpeg

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36

Steps to reproduce:

We recently added a "Copy Into Translation" tooltip to the terms listed in the Terms panel (https://bugzilla.mozilla.org/show_bug.cgi?id=1679565)

Actual results:

When hovering over an entity in the Terms panel, the hovered term and the Comments Panel have the same Background (Image attached), which might make the hovered term less distinguishable which might confuse the user regarding their selection of the panel, making them think they are under the Comments panel because of the similar background.

Expected results:

Proposed Fix: As suggested by Matjaž, we can use a darker background on hover for all panels (string list, history, machinery, locales and terms) thereby increasing the contrast which will resolve the issue and enhance user experience.

Comment 1

[Matjaz Horvat [:mathjazz]]

If the experiment turns out to be successful, we should also drop the margin in the Locales tab which is used to mitigate this issue.

Comment 2

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1872