@RHo -- this is the placeholder task for restyling work that surfaced in the newcomer tasks mockups. I don't consider this a higher priority than our newcomer tasks work, but designs can go on this task for development in the future.

@RHo -- it looks like part of the homepage restyling will be removing the icons from the headers of each module. Therefore, I think that your design to add the large question mark graphic to the desktop help module should coincide and be included in this task. Mockup here.

hi @MMiller_WMF - I've specified the bulk of the pure css style changes for Desktop here, ready for prioritization.

This format is great @RHo , but there are two copies of everything, one with good formatting and one with bad formatting. It looks like you pasted the entire thing (1-6) in the middle of itself between 3 and 4.

In T232546#5690771, @Catrope wrote:

This format is great @RHo , but there are two copies of everything, one with good formatting and one with bad formatting. It looks like you pasted the entire thing (1-6) in the middle of itself between 3 and 4.

Oh derp. Thanks, let me take out the cruft.

Change 568966 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Homepage desktop style updates

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

@RHo the patch is not ready for review because I'm going to submit the mobile fixes one on top, but you can look at the styles as I've adapted them from what you posted in this task: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/568966

There are some TODO items in the patch about possibly using wmui or mediawiki.ui variables, is there anything we could use there? Otherwise we can leave it as is and I can remove the TODO comments.

@RHo, I've also updated specifications from pixels to em where I thought it made sense, per Volker's comment here on a previous patch.

This patch could be reviewed but it breaks some things on mobile (which are then fixed in the mobile CSS task/patch), so it could wait until that one is ready too.

Change 568966 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage desktop and mobile style updates

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

Moved to Design review - looks according to specs with some notes on suggested-edits-footer margin - see below. The Impact module will be addressed in T223221.

(1) the specs call for

.suggested-edits-footer {
  margin: 0 -16px -16px!important; /* changed from margin: 0 -1.11111111em -1.11111111em */
}

What I see in betalabs (although visually it does not look too much different to me).

.growthexperiments-homepage-module-suggested-edits .suggested-edits-footer {

    margin: 16px -13.33333333px -13.33333333px -13.33333333px;
        margin-top: 16px;
        margin-right: -13.3333px;
        margin-bottom: -13.3333px;
        margin-left: -13.3333px;
    padding: 12px 24px 16px;
    background-color: 

#ffffff;

color:

    #54595d;
    font-size: 0.9em;

}

The screenshots are taken with uselang=en option

(2) (minor) I noticed that the mockup has the following phrasing (collapsible) in the Mentorship module - "You've been assigned an experienced editor...". The Mentorship module currently won't have it.

Although, the default text provides enough explanation "This experienced user knows you're new and can help you with editing.", a mentor's customized message may not be that clear.
Are we still planning to implement the collapsible Mentorship explanation?

Some screenshots

• in the intro module - one active sub-module; SE is not activated

• one edit made (the Impact module shows pending pageviews counter);
  
• the intro module has two finished sub-modules; SE is activated
  

Some screenshots

• in the intro module - one active sub-module; SE is not activated

• one edit made (the Impact module shows pending pageviews counter);
  
• the intro module has two finished sub-modules; SE is activated
  

@Etonkovidova -- in the last two comments you posted, you included several screenshots. Are those screenshots showing things that are wrong? Or things that are right?

In T232546#5914325, @Etonkovidova wrote:

(1) the specs call for

.suggested-edits-footer {
  margin: 0 -16px -16px!important; /* changed from margin: 0 -1.11111111em -1.11111111em */
}

What I see in betalabs (although visually it does not look too much different to me).

.growthexperiments-homepage-module-suggested-edits .suggested-edits-footer {
    margin: 16px -13.33333333px -13.33333333px -13.33333333px;
        margin-top: 16px;
        margin-right: -13.3333px;
        margin-bottom: -13.3333px;
        margin-left: -13.3333px;
    padding: 12px 24px 16px;
    background-color: #ffffff;
color: #54595d;
    font-size: 0.9em;
}

The screenshots are taken with uselang=en option

The different in margin is causing a slight gap between the left, right, and bottom of the white suggested-edits-footer container with the corresponding edges of the suggested edits module. This is more noticeable when I change the module background color to red:

(2) (minor) I noticed that the mockup has the following phrasing (collapsible) in the Mentorship module - "You've been assigned an experienced editor...". The Mentorship module currently won't have it.
Although, the default text provides enough explanation "This experienced user knows you're new and can help you with editing.", a mentor's customized message may not be that clear.
Are we still planning to implement the collapsible Mentorship explanation?

– The task to implement this is T229802 and ready for dev. Maybe @MMiller_WMF can take a look and see if it's a small but high prio enough to work as part of the guidance release?

Thanks @Etonkovidova for the screenshots and also checking the CSS, I agree this is very close. The following 2 minor fixes/outstanding items can be done after this week's train.

1. Suggested-edits-footer

In T232546#5914325, @Etonkovidova wrote:

(1) the specs call for

.suggested-edits-footer {
  margin: 0 -16px -16px!important; /* changed from margin: 0 -1.11111111em -1.11111111em */
}

What I see in betalabs (although visually it does not look too much different to me).

.growthexperiments-homepage-module-suggested-edits .suggested-edits-footer {
    margin: 16px -13.33333333px -13.33333333px -13.33333333px;
        margin-top: 16px;
        margin-right: -13.3333px;
        margin-bottom: -13.3333px;
        margin-left: -13.3333px;
    padding: 12px 24px 16px;
    background-color: #ffffff;
color: #54595d;
    font-size: 0.9em;
}

The screenshots are taken with uselang=en option

The difference in expected vs actual margin is causing a slight gap between the left, right, and bottom of the white suggested-edits-footer container with the corresponding edges of the suggested edits module. This is more noticeable when I change the module background color to red:

2. Mentor module after SE added should no longer have the border when it is on the RHS column

Expected:	Actual:

**3. Mentor module - minor style tweaks
a. the bullet " • " separating the mentor edit count and last active date should be the same color and font-size as the two pieces of text.
b. There should be an extra ~4px gap between the mentor icon and the edit count/last active text block
c. There should be an extra ~8px gap between the mentor edit count/last active text block
d. There should be an extra ~4px gap between the grey vertical bar and the mentor message.

In T232546#5918493, @MMiller_WMF wrote:

@Etonkovidova -- in the last two comments you posted, you included several screenshots. Are those screenshots showing things that are wrong? Or things that are right?

Yes, those screenshots are for illustration only (and overall review) - and, as per our conversation, I'll annotate clearer explanation what screenshots are showing.

@RHo -- have we done any parts of this task already? If so, we should slim the task description down to just the parts that remain.

In T232546#6527715, @MMiller_WMF wrote:

@RHo -- have we done any parts of this task already? If so, we should slim the task description down to just the parts that remain.

Apologies I had the following comment sitting in draft unposted since Oct 6, 2020. Per my comments below, it looks like the only remaining items is some styling in (1) Homepage layout (footer), and (3) Mentor module.

In T232546#5919621, @RHo wrote:

Thanks @Etonkovidova for the screenshots and also checking the CSS, I agree this is very close. The following 2 minor fixes/outstanding items can be done after this week's train.

1. Suggested-edits-footer

In T232546#5914325, @Etonkovidova wrote:

(1) the specs call for

.suggested-edits-footer {
  margin: 0 -16px -16px!important; /* changed from margin: 0 -1.11111111em -1.11111111em */
}

What I see in betalabs (although visually it does not look too much different to me).

.growthexperiments-homepage-module-suggested-edits .suggested-edits-footer {
    margin: 16px -13.33333333px -13.33333333px -13.33333333px;
        margin-top: 16px;
        margin-right: -13.3333px;
        margin-bottom: -13.3333px;
        margin-left: -13.3333px;
    padding: 12px 24px 16px;
    background-color: #ffffff;
color: #54595d;
    font-size: 0.9em;
}

The screenshots are taken with uselang=en option

The difference in expected vs actual margin is causing a slight gap between the left, right, and bottom of the white suggested-edits-footer container with the corresponding edges of the suggested edits module. This is more noticeable when I change the module background color to red:

2. Mentor module after SE added should no longer have the border when it is on the RHS column

Expected:	Actual:

**3. Mentor module - minor style tweaks
a. the bullet " • " separating the mentor edit count and last active date should be the same color and font-size as the two pieces of text.
b. There should be an extra ~4px gap between the mentor icon and the edit count/last active text block
c. There should be an extra ~8px gap between the mentor edit count/last active text block
d. There should be an extra ~4px gap between the grey vertical bar and the mentor message.