@RHo The task says that the top part of the difficulty overlay for variant D is the same as for variant A, but that doesn't appear to be completely true: in the variant D mocks, the image is missing, and the text "easy" is not colored green.

Is this an intentional difference? (It's OK if it is, just checking.)

Variant A (in production)	Variant D (mock)

In T258017#6468611, @Catrope wrote:

@RHo The task says that the top part of the difficulty overlay for variant D is the same as for variant A, but that doesn't appear to be completely true: in the variant D mocks, the image is missing, and the text "easy" is not colored green.

Is this an intentional difference? (It's OK if it is, just checking.)

Variant A (in production)	Variant D (mock)

Hi @Catrope - thanks for checking, and yes, on Desktop the text is Base10 because it is on the pale blue background instead, where Green30 text does not pass colour contrast accessibility.
I also removed the image from desktop and mobile on variant D to simplify the screen a bit since we are allowing users to use the checkboxes in varD.

Change 628747 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Factor out TaskTypeSelectionWidget

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

Change 628747 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Factor out TaskTypeSelectionWidget

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

Change 629051 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditing: Refactor CTA setup code

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

Change 629052 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Add TaskTypeSelectionWidget for variant D

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

Change 629053 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditing: Launch dialog from mobile summary button for variant D

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

Some additional styling questions for @RHo:

First, in variant A, and in the variant C mocks, the text color of the "There are many ways you can contribute..." subheader is lighter (base20) and smaller (14.8px) than that of the "Try some easy suggested edits first" header above it (base10, 16px). In the variant D mock, they're the same color and font size (both base10, 14px). Is that intended? Should these color and font size changes only apply in variant D? Or should they apply in all variants, or in none of them? (Any of these answers is easy to implement, I just want to know.)

Second, the styling of the "task type selector" (the Easy, Medium and Hard headers, the checkboxes, and their labels) in this mock is pretty different between desktop and mobile:

• The headers are colored on mobile, but not on desktop
• The subheaders are bolded on mobile, but not on desktop
• The font sizes are generally larger on mobile (18px/16px vs 16px/14px)
• The subheaders have a smaller font size (14.8px) than the checkbox labels (16px) on mobile, but the same font size on desktop (14px)
• The vertical separation between the three sections is larger on mobile (24px) than on desktop (16px), even as a proportion of the font size of the header (1.333em vs 1em)

Are these differences intentional? Should these changes also be applied to the task type selector that appears when you click the "Easy tasks" button in the (activated) suggested edits module to change your task type selections later? If so, should those changes apply in variants A and C as well? (Applying these changes only to variant D or only to one of the occurrences of the task type selector would be doable, but a bit annoying, so I'd prefer to apply them universally.)

This is working and ready for review, except for the styling tweaks that I asked Rita about above.

Change 629051 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditing: Refactor CTA setup code

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

Change 629052 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Add TaskTypeSelectionWidget for variant D

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

Change 629053 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditing: Launch dialog from mobile summary for variant D

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

Change 629500 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Load extra data for mobile summary task preview after initiation

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

Change 629500 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Load extra data for mobile summary task preview after initiation

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

Change 629526 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Fix sizing/position of intro image in variant D

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

Change 629526 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Fix sizing/position of intro image in variant D

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

Change 629954 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] TaskTypeSelectionWidget: Add mobile-specific styling

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

In T258017#6482609, @Catrope wrote:

Second, the styling of the "task type selector" (the Easy, Medium and Hard headers, the checkboxes, and their labels) in this mock is pretty different between desktop and mobile:

• The headers are colored on mobile, but not on desktop
• The subheaders are bolded on mobile, but not on desktop
• The font sizes are generally larger on mobile (18px/16px vs 16px/14px)
• The subheaders have a smaller font size (14.8px) than the checkbox labels (16px) on mobile, but the same font size on desktop (14px)
• The vertical separation between the three sections is larger on mobile (24px) than on desktop (16px), even as a proportion of the font size of the header (1.333em vs 1em)

Are these differences intentional? Should these changes also be applied to the task type selector that appears when you click the "Easy tasks" button in the (activated) suggested edits module to change your task type selections later? If so, should those changes apply in variants A and C as well? (Applying these changes only to variant D or only to one of the occurrences of the task type selector would be doable, but a bit annoying, so I'd prefer to apply them universally.)

My TaskTypeSelectionWidget patch assumes that the answers to these questions are: these changes are intentional; they should apply to the task type selection UI both in the onboarding flow and in the dialog where you can change your filters later; they should only apply in variant D and only on mobile. If any of those assumptions are wrong, I can update my patch to address that.

In T258017#6482609, @Catrope wrote:

First, in variant A, and in the variant C mocks, the text color of the "There are many ways you can contribute..." subheader is lighter (base20) and smaller (14.8px) than that of the "Try some easy suggested edits first" header above it (base10, 16px). In the variant D mock, they're the same color and font size (both base10, 14px). Is that intended? Should these color and font size changes only apply in variant D? Or should they apply in all variants, or in none of them? (Any of these answers is easy to implement, I just want to know.)

And to close this loop: my patches up for review assume that these color and font size changes should be specific to variant D.

hi @Catrope - thanks for your attention to detail on some of these discrepancies. Per my comment on this patch, I messed up font stylings in a few places which was causing inconsistent font-size mappings from Desktop to Mobile. I've now updated the Zeplin mocks to correct this, along with the colour differences across Mobile/Desktop and the variants. Detailed revisions are as follows:

1. Header text for overlays ("Suggested edits to get started" and "Try some...") should use the OOUI fieldset header text style, which on Desktop is 16px (per current), and on Mobile is ~18.28px.
This font-size applies to the case for Variant D on the "Try some easy suggested edits only" header in font-size.

In T258017#6482609, @Catrope wrote:

Some additional styling questions for @RHo:
First, in variant A, and in the variant C mocks, the text color of the "There are many ways you can contribute..." subheader is lighter (base20) and smaller (14.8px) than that of the "Try some easy suggested edits first" header above it (base10, 16px). In the variant D mock, they're the same color and font size (both base10, 14px). Is that intended? Should these color and font size changes only apply in variant D? Or should they apply in all variants, or in none of them? (Any of these answers is easy to implement, I just want to know.)

2. Intro text ("Wikipedia is built collab..." and "There are many ways...") should use the OOUI UI text style, which on Desktop is 14px, and on Mobile is 16px. Accordingly, I think there is no amazing reason for the different colours across variants, so let's make all of them Base10.

Second, the styling of the "task type selector" (the Easy, Medium and Hard headers, the checkboxes, and their labels) in this mock is pretty different between desktop and mobile:

• The headers are colored on mobile, but not on desktop

3. Task type selector - uses the fieldset header style (Desktop 16px, Mobile 18.28px).
Standardized to use corresponding coloured text on Mobile and Desktop.

• The subheaders are bolded on mobile, but not on desktop

4. Task type subheaders - uses the smaller 'UI tag' style (Desktop 13px, Mobile 14.8px) and with both bolded.

5. Task type additional info - this is the info under the subheaderes on variant C (eg. "Copyediting and adding links to other articles")
Additional task info text style should use the inline help text style which on Desktop is 13px and on Mobile is 14.8px, and should be coloured Base20.

• The font sizes are generally larger on mobile (18px/16px vs 16px/14px)
• The subheaders have a smaller font size (14.8px) than the checkbox labels (16px) on mobile, but the same font size on desktop (14px)

This should be fixed with the updates that I am detailing in this comment.

• The vertical separation between the three sections is larger on mobile (24px) than on desktop (16px), even as a proportion of the font size of the header (1.333em vs 1em)

Let's make this 24px for mobile and desktop.

Are these differences intentional? Should these changes also be applied to the task type selector that appears when you click the "Easy tasks" button in the (activated) suggested edits module to change your task type selections later? If so, should those changes apply in variants A and C as well? (Applying these changes only to variant D or only to one of the occurrences of the task type selector would be doable, but a bit annoying, so I'd prefer to apply them universally.)

Universal changes works for me.

In T258017#6498645, @RHo wrote:

hi @Catrope - thanks for your attention to detail on some of these discrepancies. Per my comment on this patch, I messed up font stylings in a few places which was causing inconsistent font-size mappings from Desktop to Mobile. I've now updated the Zeplin mocks to correct this, along with the colour differences across Mobile/Desktop and the variants. Detailed revisions are as follows:

1. Header text for overlays ("Suggested edits to get started" and "Try some...") should use the OOUI fieldset header text style, which on Desktop is 16px (per current), and on Mobile is ~18.28px.
This font-size applies to the case for Variant D on the "Try some easy suggested edits only" header in font-size.

[...]

2. Intro text ("Wikipedia is built collab..." and "There are many ways...") should use the OOUI UI text style, which on Desktop is 14px, and on Mobile is 16px. Accordingly, I think there is no amazing reason for the different colours across variants, so let's make all of them Base10.

I have addressed these points by amending the patch you referred to.

3. Task type selector - uses the fieldset header style (Desktop 16px, Mobile 18.28px).

Done in the TaskTypeSelectionWidget patch.

Standardized to use corresponding coloured text on Mobile and Desktop.

I don't see this change in the mocks, but I'm assuming that you want me to use colored text on both mobile and desktop, in all variants. Let me know if that's not what you want.

• The subheaders are bolded on mobile, but not on desktop

4. Task type subheaders - uses the smaller 'UI tag' style (Desktop 13px, Mobile 14.8px) and with both bolded.

Done in the TaskTypeSelectionWidget patch.

5. Task type additional info - this is the info under the subheaderes on variant C (eg. "Copyediting and adding links to other articles")
Additional task info text style should use the inline help text style which on Desktop is 13px and on Mobile is 14.8px, and should be coloured Base20.

Done in the TaskTypeSelectionWidget patch (even though it's technically not part of TaskTypeSelectionWidget).

• The font sizes are generally larger on mobile (18px/16px vs 16px/14px)
• The subheaders have a smaller font size (14.8px) than the checkbox labels (16px) on mobile, but the same font size on desktop (14px)

This should be fixed with the updates that I am detailing in this comment.

Yes, it is.

• The vertical separation between the three sections is larger on mobile (24px) than on desktop (16px), even as a proportion of the font size of the header (1.333em vs 1em)

Let's make this 24px for mobile and desktop.

Done in the TaskTypeSelectionWidget patch.

Are these differences intentional? Should these changes also be applied to the task type selector that appears when you click the "Easy tasks" button in the (activated) suggested edits module to change your task type selections later? If so, should those changes apply in variants A and C as well? (Applying these changes only to variant D or only to one of the occurrences of the task type selector would be doable, but a bit annoying, so I'd prefer to apply them universally.)

Universal changes works for me.

Yay! That makes it easier.

Change 629954 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] TaskTypeSelectionWidget: Styling tweaks

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

For Design review - looks according to the specs - only the space between two elements
"mw-ge-startediting-dialog-difficulty-banner" and "mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-easy" is rather tight.

The screenshots below are just for the overall look:

Desktop	mobile

@RHo, @Catrope

In T258017#6500692, @Catrope wrote:

In T258017#6498645, @RHo wrote:

• The font sizes are generally larger on mobile (18px/16px vs 16px/14px)

This should be fixed with the updates that I am detailing in this comment.

Yes, it is.

Just double-checking (and I looked at the mock and at the patch ) - so, now

.mw-ge-startediting-dialog-intro-topic-title {
    color: #202122;
    font-weight: bold;
    font-size: 1.14285714em;
    line-height: 1.375;

Question: That's how it's supposed to be - 18px as it is now in betalabs? Bigger than it's currently in produciton? I see in the browser mobile emulator font-size 18px (and from the font-size: 1.14285714em; =17.54 px -close enough).

In production, the title font is smaller.

I believe that is correct, @RHo said that verbatim here:

In T258017#6498645, @RHo wrote:

1. Header text for overlays ("Suggested edits to get started" and "Try some...") should use the OOUI fieldset header text style, which on Desktop is 16px (per current), and on Mobile is ~18.28px.

Thanks @Etonkovidova - yes the header suggested on Desktop as font-size:16px (and Mobile 18.28px) is correct, but the spacing between the top section and difficulty levels is not quite right as you noted, so putting back to needs more work for padding fixes. Specifically:

Actual:	Expected:

a. Similar to comment on T258019#6510238 - please make the Desktop left and right padding 16px for the module
b. The bottom padding under the intro paragraph should be 24px (not 21px - this seems to have been a Zeplin error with export, sorry about that)

Actual:	Expected:

c. Spacing between the first "Easy" header and the bottom of the pale blue background should be 24px

Actual:	Expected:

d. Spacing between last checkbox item and module footer should be 24px

Actual:	Expected:

e. Module footer should be ~56px height as the buttons should have padding: 12px 16px on desktop (not 24px as shown in the Actual screenshot)

Actual:	Expected:

f. Results counter should be vertically centered in the module footer

Actual:	Expected:

g. Icon (20x20px) and difficulty text should be vertically centered, with 8px space between them

Change 634389 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Styling tweaks

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

In T258017#6510357, @RHo wrote:

a. Similar to comment on T258019#6510238 - please make the Desktop left and right padding 16px for the module

This is fixed now, with Kosta's patch for that issue.

b. The bottom padding under the intro paragraph should be 24px (not 21px - this seems to have been a Zeplin error with export, sorry about that)

Fixed in my patch. That also keeps it as 24px on mobile (since it was previously 1.5em, and 1.5*14=21 , 1.5*16=24). But the Zeplin mocks have this at 16px on mobile. Is that accurate, and should I make that change?

c. Spacing between the first "Easy" header and the bottom of the pale blue background should be 24px

Same story here: it's currently 21px/24px, I'm making it 24/24, but the mocks say 24/16, so please advise whether it should be 24px or 16px on mobile.

d. Spacing between last checkbox item and module footer should be 24px

Similar story: currently 21/24, changing it to 24/24, but in this case the mocks actually say 24/24.

e. Module footer should be ~56px height as the buttons should have padding: 12px 16px on desktop (not 24px as shown in the Actual screenshot)
f. Results counter should be vertically centered in the module footer

I don't see these issues, they must have been fixed since your comment (since your comment is 2 weeks old and I somehow missed it until today).

g. Icon (20x20px) and difficulty text should be vertically centered, with 8px space between them

Padding fixed in my patch. I think the text centering has already been fixed, please confirm.

Change 634755 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Make image in difficulty banner top aligned, fix padding

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

In T258017#6557809, @gerritbot wrote:

Change 634755 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Make image in difficulty banner top aligned, fix padding

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

This patch does the 24/16 thing for item (c).

Change 634389 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Styling tweaks

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

Change 634755 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Make image in difficulty banner top aligned, fix padding

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

Change 635904 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Use smaller padding for mobile in various places

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

In T258017#6557815, @Catrope wrote:

In T258017#6557809, @gerritbot wrote:

Change 634755 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Make image in difficulty banner top aligned, fix padding

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

This patch does the 24/16 thing for item (c).

Whoops, I meant (b).

In T258017#6573341, @gerritbot wrote:

Change 635904 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Use smaller padding for mobile in various places

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

This one does the 24->16px change for (c) and (d).

Change 635904 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Use smaller padding for mobile in various places

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

Checked

In T258017#6549150, @Catrope wrote:

In T258017#6510357, @RHo wrote:

a. Similar to comment on T258019#6510238 - please make the Desktop left and right padding 16px for the module

This is fixed now, with Kosta's patch for that issue.

Done

b. The bottom padding under the intro paragraph should be 24px (not 21px - this seems to have been a Zeplin error with export, sorry about that)

Fixed in my patch. That also keeps it as 24px on mobile (since it was previously 1.5em, and 1.5*14=21 , 1.5*16=24). But the Zeplin mocks have this at 16px on mobile. Is that accurate, and should I make that change?

Done

Desktop	Mobile

c. Spacing between the first "Easy" header and the bottom of the pale blue background should be 24px

Same story here: it's currently 21px/24px, I'm making it 24/24, but the mocks say 24/16, so please advise whether it should be 24px or 16px on mobile.

Desktop 24px	Mobile 16px

d. Spacing between last checkbox item and module footer should be 24px

Similar story: currently 21/24, changing it to 24/24, but in this case the mocks actually say 24/24.

Desktop 24px	Mobile 16px

CSS - to clarify mobile screnshots

.growthexperiments-homepage-mobile-summary .mw-ge-startediting-dialog-difficulty-legend, .growthexperiments-homepage-mobile-summary .mw-ge-startediting-dialog-difficulty-taskTypeSelector, .growthexperiments-homepage-mobile-details .mw-ge-startediting-dialog-difficulty-legend, .growthexperiments-homepage-mobile-details .mw-ge-startediting-dialog-difficulty-taskTypeSelector {
    padding: 16px 16px;
}

e. Module footer should be ~56px height as the buttons should have padding: 12px 16px on desktop (not 24px as shown in the Actual screenshot)
f. Results counter should be vertically centered in the module footer

I don't see these issues, they must have been fixed since your comment (since your comment is 2 weeks old and I somehow missed it until today).

As @Catrope said - seems to be fixed.

Desktop	Mobile

g. Icon (20x20px) and difficulty text should be vertically centered, with 8px space between them

Padding fixed in my patch. I think the text centering has already been fixed, please confirm.

Done - the above screenshots are correct.

Checked again and only part of item (g) – the vertical alignment of the text to icon is not quite right.

	Expected	Actual
	a. Desktop left and right padding 16px & b. Desktop - bottom padding under the intro paragraph should be 24px
	c. Desktop Spacing between the first "Easy" header and the bottom of the pale blue background should be 24px
	d. Desktop Spacing between last checkbox item and module footer should be 24px
	e. Module footer should be ~56px height as the buttons should have padding: 12px 16px on desktop
	f. Results counter should be vertically centered in the module footer
	g. Icon (20x20px) and difficulty text should be vertically centered, with 8px space between them	8px space is right, but text is not vertically centered with icon on Desktop. Note that on Mobile vertical alignment looks more vertically centered since the font-size is larger but could still be ~2px lower.

If you have suggestions for how to fix the text alignment (item (g) in your comment above), I'm all ears. Both the text and the icon have vertical-align: middle, and neither has vertical padding or margin, so I don't know what else to do.

Moving to Design Review because the question is for @RHo.

This has been a recurring problem with our custom icons (see the icon before the result count at the bottom of the same dialog, the icons on the task card, the difficulty dialog etc), IIRC in other instances we either ignored it or just added some padding to the icon and tweaked the size until it looked right (with default zoom/font settings anyway). Would be nice to figure out what the proper fix is.

hi @Catrope and @Tgr - one suggestion I have is if we can incorporate the icon to the label element using teh ::before selector instead, as this makes it easier to control the positioning in reference to the text label.
This is what I did for the task types filter instead and it works on both mobile and desktop:

.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-easy h4.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-label:before {
  content: '';
  background-image: url(/w/load.php?modules=ext.growthExperiments.Homepage.icons&image=difficulty-easy&format=rasterized&lang=cs&skin=minerva&version=162dj);
  background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22%3E %3Cpath d=%22M21 3v18h-5V3h5zm-6 6v12h-5V9h5zm-6 6v6H3v-6h6zM20 4h-3v16h3V4zm-6 6h-3v10h3V10z%22 fill=%22%2314866d%22/%3E %3C/svg%3E");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding-left: 1.5em;
}

.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-medium h4.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-label:before {
  content: '';
  background-image: url(/w/load.php?modules=ext.growthExperiments.Homepage.icons&image=difficulty-medium&format=rasterized&lang=cs&skin=minerva&version=162dj);
  background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22%3E %3Cpath d=%22M21 3v18h-5V3h5zm-6 6v12h-5V9h5zm-6 6v6H3v-6h6zM20 4h-3v16h3V4z%22 fill=%22%23ac6600%22/%3E %3C/svg%3E");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding-left: 1.5em;
}

.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-hard h4.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-label:before {
  content: '';
  background-image: url(/w/load.php?modules=ext.growthExperiments.Homepage.icons&image=difficulty-hard&format=rasterized&lang=cs&skin=minerva&version=162dj);
  background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22%3E %3Cpath d=%22M21 3v18h-5V3h5zm-6 6v12h-5V9h5zm-6 6v6H3v-6h6z%22 fill=%22%23b32424%22/%3E %3C/svg%3E");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding-left: 1.5em;
}

The above plus removing the respective <span> icon elements before the h4's and removing the padding-left on the class .h4.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-label makes the icons align better on both Desktop and Mobile:

Desktop	Mobile

Could this work for us, and if so be applied to other places where were have these icon+label elements?
Incidentally, I got this idea from how the language icon is shown in CX

Interesting that removing margin-top: 0 from h4.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-label produces a good-enough alignment effect:

margin-top: 0	margin-top: 0

@Catrope has this mostly complete and just has to clean it up and submit it. He will poke at it, but not more than another hour or two.

@Catrope sent me this in case it's useful to whoever picks this task up.

diff --git a/modules/homepage/suggestededits/ext.growthExperiments.Homepage.TaskTypeSelectionWidget.js b/modules/homepage/suggestededits/ext.growthExperiments.Homepage.TaskTypeSelectionWidget.js
index 44712b3a..0e44d652 100644
--- a/modules/homepage/suggestededits/ext.growthExperiments.Homepage.TaskTypeSelectionWidget.js
+++ b/modules/homepage/suggestededits/ext.growthExperiments.Homepage.TaskTypeSelectionWidget.js
@@ -134,7 +134,7 @@ TaskTypeSelectionWidget.prototype.makeHeadersForDifficulty = function ( difficul
                        'mw-ge-homepage-taskTypeSelectionWidget-difficulty-level ' +
                        'mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-' + difficulty
                )
-               .append( iconWidget.$element, $label, $description );
+               .append( /* iconWidget.$element, */ $label, $description );
 };
 
 /**
diff --git a/modules/homepage/suggestededits/ext.growthExperiments.Homepage.TaskTypeSelectionWidget.less b/modules/homepage/suggestededits/ext.growthExperiments.Homepage.TaskTypeSelectionWidget.less
index 32156910..10bbaf3e 100644
--- a/modules/homepage/suggestededits/ext.growthExperiments.Homepage.TaskTypeSelectionWidget.less
+++ b/modules/homepage/suggestededits/ext.growthExperiments.Homepage.TaskTypeSelectionWidget.less
@@ -31,9 +31,29 @@
                padding-bottom: 0;
                margin-top: 0;
                margin-bottom: 0;
-               // Align with icon
-               vertical-align: middle;
-               padding-left: 8px;
+
+               &:before {
+                       content: '';
+                       padding-left: 1.5em;
+                       background-position: bottom left;
+                       background-repeat: no-repeat;
+                       background-size: 20px 20px;
+
+                       .mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-easy & {
+                               /* @embed */
+                               background-image: url( ../../../images/difficulty-easy-ltr.svg );
+                       }
+
+                       .mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-medium & {
+                               /* @embed */
+                               background-image: url( ../../../images/difficulty-medium-ltr.svg );
+                       }
+
+                       .mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-hard & {
+                               /* @embed */
+                               background-image: url( ../../../images/difficulty-hard-ltr.svg );
+                       }
+               }
        }
 
        .oo-ui-checkboxMultiselectWidget {

Checked in wmf.7 - it seems that the issue is still present

Moving to Incoming.

Note: labels gets aligned with padding-top: 0;
h4.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-label

In T258017#7140864, @Etonkovidova wrote:

Checked in wmf.7 - it seems that the issue is still present

Moving to Incoming.

Note: labels gets aligned with padding-top: 0;
h4.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-label

@RHo could you please confirm that you want the proposed alignment from F34486359?

In T258017#7147901, @kostajh wrote:

In T258017#7140864, @Etonkovidova wrote:

Checked in wmf.7 - it seems that the issue is still present

Moving to Incoming.
Note: labels gets aligned with padding-top: 0;
h4.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-label

@RHo could you please confirm that you want the proposed alignment from F34486359?

Hi @kostajh - yes, to confirm, I would like the alignment for desktop and mobile to be per the screenshots in my T258017#6644676 comment:

In T258017#6644676, @RHo wrote:

hi @Catrope and @Tgr - one suggestion I have is if we can incorporate the icon to the label element using teh ::before selector instead, as this makes it easier to control the positioning in reference to the text label.
-[...]
The above plus removing the respective <span> icon elements before the h4's and removing the padding-left on the class .h4.mw-ge-homepage-taskTypeSelectionWidget-difficulty-level-label makes the icons align better on both Desktop and Mobile:

Desktop	Mobile

Change 711218 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Difficulty Overlay: align icon & label at baseline

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

Updated the alignment of the difficulty icon and label to be per F34486359 (align at baseline)

Desktop:

Mobile:

Change 711218 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Difficulty Overlay: align icon & label at baseline

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

The fix is in place - checked in betalabs: