Dark mode: Special:Notifications
Closed, ResolvedPublic
Actions

Assigned To

None

Authored By

	KStoller-WMF
	Tue, Jul 9, 4:05 AM

Description

Background

The Web team is releasing dark mode more widely. To prepare for this, some Growth maintained features need improvements.

User story

As a user who uses dark mode, I want the ability to view my notifications in dark mode, so that I do not have an inconsistent experience

Echo - Special:Notifications
The issues are present only on Special:Notifications

✅ DONE not visible elements		Fixed - checked on `enwiki betalabs`
✅ DONE hovering over rows makes them unreadable		Fixed - checked on `enwiki betalabs`
✅ DONE low contrast for `oo-ui-image-invert`		Fixed - checked on `enwiki betalabs`

Acceptance Criteria:

Given I'm viewing Special:Notifications
When I'm viewing in dark mode,
Then all elements are readable and pass WCAG AA contrast requirements

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Resolved	ovasileva	T341632 [EPIC] Palette customizations and dark mode
Open	None	T366760 [EPIC] Dark mode for Growth team maintained features
Resolved	Etonkovidova	T367058 QA Growth-related OOUI updates (mobile + desktop)
Resolved	None	T369591 Dark mode: Special:Notifications

Event Timeline

KStoller-WMF created this task.Tue, Jul 9, 4:05 AM

KStoller-WMF triaged this task as High priority.Tue, Jul 9, 4:08 AM

KStoller-WMF moved this task from Inbox to Up Next on the Growth-Team board.

KStoller-WMF attached a referenced file: F55631357: Screen Shot 2024-06-22 at 4.17.49 PM.png. (Show Details)Tue, Jul 9, 4:47 PM

KStoller-WMF attached a referenced file: F55546464: Screen Shot 2024-06-21 at 3.51.02 PM.png. (Show Details)

KStoller-WMF attached a referenced file: F55546433: Screen Shot 2024-06-21 at 3.50.46 PM.png. (Show Details)

KStoller-WMF moved this task from Up Next to FY2024-25 Q1 Sprint 1 on the Growth-Team board.Tue, Jul 9, 4:53 PM

KStoller-WMF edited projects, added Growth-Team (FY2024-25 Q1 Sprint 1); removed Growth-Team.

Also, when opening on of the popups that feature a new item it briefly flashes very light blue in dark mode.

Thank you, @Sjoerddebruin for reporting it! That change in color when a notifications changes from unseed state to the seen state, seems to be consistent with instances where such colors appear. For example, a success message (for a saved edit) displays the same color:

Screen Shot 2024-07-10 at 4.25.10 PM.png (318×972 px, 73 KB)

So, here is an animated gif for notifications displaying the same color when their state is changed (specifically the number four displays a green-blue color):

green_light_notifications.gif (888×1 px, 352 KB)

I don't seem to be able to reproduce any of the issues mentioned in the descriptions on enwiki's Special:Notifications (already on .wmf13). @Etonkovidova can you confirm?

I'm not able to reproduce the issue mentioned here in the comments either, but maybe I'm not understanding it well enough.

Etonkovidova closed this task as Resolved.Thu, Jul 11, 7:50 PM

Etonkovidova updated the task description. (Show Details)

In T369591#9972441, @Michael wrote:

I don't seem to be able to reproduce any of the issues mentioned in the descriptions on enwiki's Special:Notifications (already on .wmf13). @Etonkovidova can you confirm?

I'm not able to reproduce the issue mentioned here in the comments either, but maybe I'm not understanding it well enough.

All issues reported in the task have been re-checked and marked as Done in the task description. I closed the task as Resolved.

In T369591#9971327, @Sjoerddebruin wrote:

Also, when opening on of the popups that feature a new item it briefly flashes very light blue in dark mode.

I now stumbled over a way to reproduce this and have created T370042: New Notification flashes bright blue, unreadable in dark mode for it.

	F56360626: Screen Shot 2024-07-11 at 12.48.36 PM.png
	Thu, Jul 11, 7:50 PM

	F56360609: Screen Shot 2024-07-11 at 12.47.41 PM.png
	Thu, Jul 11, 7:50 PM

	F56360604: Screen Shot 2024-07-11 at 12.44.44 PM.png
	Thu, Jul 11, 7:50 PM

	F56341399: green_light_notifications.gif
	Wed, Jul 10, 11:35 PM

	F56341303: Screen Shot 2024-07-10 at 4.25.10 PM.png
	Wed, Jul 10, 11:35 PM

	F55631357: Screen Shot 2024-06-22 at 4.17.49 PM.png
	Tue, Jul 9, 4:05 AM

	F55546464: Screen Shot 2024-06-21 at 3.51.02 PM.png
	Tue, Jul 9, 4:05 AM

	F55546433: Screen Shot 2024-06-21 at 3.50.46 PM.png
	Tue, Jul 9, 4:05 AM

Dark mode: Special:NotificationsClosed, ResolvedPublicActions