Page MenuHomePhabricator

[Short term fix] Notification icon not same color as other icons
Open, MediumPublic2 Estimated Story PointsBUG REPORT

Description

NOTE: T364119 is the long term fix. On short term we'll update our filter. Steps to replicate the issue (include links if applicable):
  • Login on mobile
  • Turn on night mode.
  • Visit any page
  • The bell icon in the top right is not the

What happens?:
The icon is not the same color as the rest.

What should have happened instead?:
The icon should be the same.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
@Jdrewniak proposes updating the CSS filter just for this icon to use brightness to make it appear like the rest.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Jdlrobson triaged this task as Medium priority.Fri, Jun 21, 1:27 AM

Change #1048506 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/MinervaNeue@master] [POC] Add brightness filter to night-mode-invert-image() mixin.

https://gerrit.wikimedia.org/r/1048506

Change #1048507 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/MinervaNeue@master] Change color of notification icon in dark-mode

https://gerrit.wikimedia.org/r/1048507

@Jdrewniak proposes updating the CSS filter just for this icon to use brightness to make it appear like the rest.

Expanding on this, I think there are two ways to handle this. In the image below, the notification icon (bell) is lighter than the surrounding icons.
Therefore, we can either make the notification icon darker, or the surrounding icons lighter.

Interestingly, the notification icon is actually the correct color, it's the rest of the icons that are too dark. However, changing the rest of the icons by adding a brightness filter is somewhat risky, because it'll change the appearance of colored icons. So, as a temporary measure, changing the color of the notification icon (to make it incorrect but consistent) seems like the easiest path forward.

en.m.wikipedia.org_wiki_Ichthyotitan(iPhone SE).png (234×750 px, 17 KB)

@Jdrewniak proposes updating the CSS filter just for this icon to use brightness to make it appear like the rest.

Expanding on this, I think there are two ways to handle this. In the image below, the notification icon (bell) is lighter than the surrounding icons.
Therefore, we can either make the notification icon darker, or the surrounding icons lighter.

Interestingly, the notification icon is actually the correct color, it's the rest of the icons that are too dark. However, changing the rest of the icons by adding a brightness filter is somewhat risky, because it'll change the appearance of colored icons. So, as a temporary measure, changing the color of the notification icon (to make it incorrect but consistent) seems like the easiest path forward.

Discussed in standup and decided to proceed with this ^ and change the notification icon color.

en.m.wikipedia.org_wiki_Ichthyotitan(iPhone SE).png (234×750 px, 17 KB)