Right, the center-to-sides gradient (left over from the times when the menu looked like this) doesn't make sense in old Vector as well.

This was partially done in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/803355
There are no plans to touch old Vector.

@alexhollender_WMF do we want to remove the subtle gradient in the sidebar, or is that mute given the future reorganization of the sidebar?

Current (Interaction underline is what we are talking about);

Maybe?:

@alexhollender_WMF hi! :) And what are we going to do with the gradient in the left menu?

If the gradient is kept, a left-to-right gradient would make more sense from the design point of view. A center-to-sides gradient, as I said, is a leftover from the times when the menu looked like this.

In T307771#8013151, @Iniquity wrote:

@alexhollender_WMF hi! :) And what are we going to do with the gradient in the left menu?

thanks for pointing this out. we will remove these gradients as well.

@alexhollender_WMF - do we want to go ahead with this task or create a new one based on the feedback from the current prototype testing round?

In T307771#8029728, @ovasileva wrote:

@alexhollender_WMF - do we want to go ahead with this task or create a new one based on the feedback from the current prototype testing round?

we can use this task but I think we should wait a bit longer on this and do it together with some other visual changes we're going to be making to the menus

@ovasileva @Jdlrobson I've updated this task and it's ready to be included in the Visual refinements part 2 work

Maybe instead of having separators, we should remove them completely, and make the section headings bolder (font-weight: 600)?

In T307771#8106145, @SerDIDG wrote:

Maybe instead of having separators, we should remove them completely, and make the section headings bolder (font-weight: 600)?

I think that is a reasonable proposal. My assumption is: for larger menus (such as this one) the border lines, combined with spacing and the different font-style of the section headings, help break the menu into sections, and make it easier for people to scan. I wonder if removing the border lines makes the menu groupings harder to scan? I am not aware of any research we have done regarding this. I did take a quick look around and have found some other menus that use similar dividers/borders, which may serve as reference points:

YouTube	GitHub	New York Times

Looking at our design style guide we have a "Menu" component (link), though it is more of a Select menu. I think the designs systems team is planning to further develop this component, so perhaps this question of sections & divider lines is something they will take into consideration. cc @Sarai-WMDE

Thanks for the heads-up on this one! In Codex, we defined some early specification for a potential divider mixin/component. The light variant is a solid 1px line/border that presents the color suggested in this ticket: #C8CCD1. Looks like we're aligned!

So:

• remove gradient
• use solid gray line (#C8CCD1 - find equivalent LESS variable) .vector-menu-portal .vector-menu-heading

In T307771#8143221, @Jdlrobson wrote:

So:

• remove gradient
• Bold .vector-menu-portal .vector-menu-heading

just remove gradient and use solid gray line (#C8CCD1) instead. no bolding.

Change 822658 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Remove gradient from modern Vector, align SidebarAction with portlet styles and classes

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

Change 822658 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove gradient from modern Vector, align SidebarAction with portlet styles and classes

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Replace gradient line separator in collapsible sidebar with a solid gray line.

Can confirm gradient does not appear on Mediawiki. Resolving