Page MenuHomePhabricator

Provide Add a link on-boarding assets without embedded background colors
Closed, ResolvedPublic0.5 Estimated Story Points

Description

The on boarding dialogs for add a link tasks contain images that have embedded background colors. This makes the support for dark mode more complex as inverting the image directly does not work and is generally not desired. And creating dedicated assets just for dark mode is a maintenance burden. This task is to update the existing assets to have transparent background and set the required background (background-color-progressive-subtle, #eaf3ff) in CSS. Also, we need to test that the non-inverted image over the inverted CSS background has no contrast issues.

Screenshot 2024-08-06 at 17.31.09.png (1×1 px, 235 KB)
Screenshot 2024-08-06 at 17.31.37.png (1×1 px, 268 KB)
Screenshot 2024-08-06 at 17.24.58.png (1×1 px, 233 KB)
Screenshot 2024-08-06 at 17.24.27.png (1×1 px, 219 KB)
Current light modeCurrent dark modeWith @background-color-progressive-subtle light modeWith @background-color-progressive-subtle dark mode

Problematic assets

Acceptance criteria

  • New assets without background color embedded are provided

Event Timeline

Sgs triaged this task as Medium priority.
Sgs moved this task from Inbox to Estimated tasks backlog on the Growth-Team board.
Sgs updated the task description. (Show Details)

No background SVGs:

Left to right:



Right to left:

No background SVGs:

Left to right:

The third LTR image is actually RTL. Could you update that 🙏 @JFernandez-WMF

@Sgs apologies! I updated the comment with the LTR svg :)

Change #1060866 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] SuggestedEdits: use background-less images in AddLink onboarding

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

Change #1060866 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] SuggestedEdits: use background-less images in AddLink onboarding

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