@alexhollender_WMF I took a look at this and it turned out to be a little more complicated then expected. I think when changing this icon we can't do that in isolation. We'd also need to change the more dropdown and Wikilove.
Here's a screenshot of the POC above:

This seems like a stretch goal for the first release in Q4 but a very achievable stretch goal for Q1 so I'm moving this back to the backlog for now!

Change 807651 merged by jenkins-bot:

[mediawiki/extensions/WikiLove@master] Use Wikimedia standard icon for Wikilove

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

Change 807652 merged by jenkins-bot:

[mediawiki/core@master] Register watchstar icon in menu definition

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

This may also require changes to the watchlist expiry feature, which uses the half-star icon.

Change 807653 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] WIP: Use standard icons for article toolbar

Reason:

Abandoning for now. Will pick up later down the road.

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

@Jdlrobson I'm noticing the watchstar is also positioned a bit too high. would it make sense to address that in this task, or in a separate task?

current	slightly lower

If you want a short-term quick fix then yes I suggest another task. It might be easier to just do it as part of this one if we have the bandwidth - to me the existing SVG we use for the star icon looks a little out of place.

The work here involves:

1. Updating hooks to use the icon field for items in the "views" menu
2. Making sure the JS stays functional.
3. Using the vector watchstar hook to update the icon on JS click (See Minerva for an example: https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/bcdfd66fa67a9c9bd6406b125ee99a57e7ba0f72/resources/skins.minerva.scripts/watchstar.js#L1)
4. Double check Wikilove still progressively enhances our icon

Change 824303 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] [WIP] Visual enhancements: Icons

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

Change 826218 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Skins: Watchstar icon for expiring item is incorrect

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/dcb2317c72/w

@Jdlrobson I'm realizing I don't think it will be possible to do this task until we've reduced the size of icon buttons (T314323), otherwise the watchstar and wikilove buttons will force the toolbar to be too tall, which throws off the alignment of the tabs:

before T314323	after T314323

I think we can workaround that (ignore more menu functionality for now)?

ok cool, that could work then. tab underlines aren't showing up in that patchdemo so I can't fully verify though.
also, of course your call, but is there a benefit to working around it vs. blocking on T314323?

also, of course your call, but is there a benefit to working around it vs. blocking on T314323?

Let me get back to you on that one. I'll look to chat to Volker next week.

@Jdlrobson just wanted to clarify: even though we've completed T310838, this task still requires more design work as well as design review. Based on the screenshot you posted we need to make additional changes to sizing and spacing of the icons:

Yep. This is not done. Once we've estimated I'll pick this up and it will go through the usual process.

Discussed with @alexhollender_WMF and we determined this is not a blocker for deployment. Moving back to the backlog for the time being.

@Jdlrobson I think I'm missing something, why can't we just change the SVG's as defined in this file?

https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/refs/heads/master/resources/skins.vector.styles/components/TabWatchstarLink.less

	#ca-unwatch.icon a:before {
		background-image: url( ../common/images/unwatch-icon.svg );
	}
	#ca-unwatch.mw-watchlink-temp.icon a:before {
		background-image: url( ../common/images/unwatch-temp-icon.svg );
	}
	#ca-watch.icon a:before {
		background-image: url( ../common/images/watch-icon.svg );
	}
	#ca-unwatch.icon a:hover:before,
	#ca-unwatch.icon a:focus:before {
		background-image: url( ../common/images/unwatch-icon-hl.svg );
	}
	#ca-unwatch.mw-watchlink-temp.icon a:hover:before,
	#ca-unwatch.mw-watchlink-temp.icon a:focus:before {
		background-image: url( ../common/images/unwatch-temp-icon-hl.svg );
	}
	#ca-watch.icon a:hover:before,
	#ca-watch.icon a:focus:before {
		background-image: url( ../common/images/watch-icon-hl.svg );
	}

Change 828653 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/WikiLove@master] Vector 2022: Remove skin styles

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/fc355bcae6/w

@Jdlrobson I think I'm missing something, why can't we just change the SVG's as defined in this file?

If we changed the SVGs we then have to sync them with any changes upstream.

@alexhollender_WMF this is now ready for design review.
Please login as "Patch Demo" and visit https://patchdemo.wmflabs.org/wikis/fc355bcae6/w/index.php?title=Watch (note I didn't setup Wikilove correctly on this so but here's how it looks:

Have fixed margin it latest patchset.

this icon is not currently aligned with T314323: [Visual refinements] Standardize icon buttons & links (Vector 2022)

We're feature flagging so we can pick up that ticket before deploying this change.

Change 829219 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Icons: Make the new watchstar icon spin

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

@alexhollender_WMF I know this is a given with the small icon styles, but the difference in height between the small icon and the menu tabs is more noticeable when you hover over them. It's a minor thing, but is reducing the height of the menu tabs something we've discussed or considered for the future?

Currently:

In T234990#8208856, @bwang wrote:

@alexhollender_WMF I know this is a given with the small icon styles, but the difference in height between the small icon and the menu tabs is more noticeable when you hover over them. It's a minor thing, but is reducing the height of the menu tabs something we've discussed or considered for the future?

Currently:

After reducing menu tab height by 6px (total height of 34px)

yes 100%, that's something i've had in the prototype for a bit now. thanks for bringing it up. i just created T316950: [Visual refinements] Reduce height of article toolbar

Change 828653 merged by jenkins-bot:

[mediawiki/extensions/WikiLove@master] Vector 2022: Dedicated skin styles

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

Change 830185 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [POC](CSS only) Icons: Make the new watchstar icon spin

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

Change 826218 merged by jenkins-bot:

[mediawiki/core@master] Skins: Watchstar icon for expiring item is incorrect

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

Change 824303 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Icons: Watchstar and wikilove are upgraded

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

In T234990#8223317, @Jdlrobson wrote:

https://en.wikipedia.beta.wmflabs.org/wiki/User:JDrewniak?vectorvisualenhancementnext=1

<3 <3 <3

@Jdlrobson, two things:

• I wonder if the WikiLove icon should be red, given that it currently is in Legacy Vector? cc @Ladsgroup
  

• Due to the extra padding around the icon (currently 9px, vs. the eventual 6px we hope to achieve via T314323), the icon is not properly aligned with the tabs. Would it be possible to fix the padding just on this icon? This would also require changing the margin-top from 4px to 10px:

current	fixed (6px padding around icon, 10px margin-top)

In T234990#8229081, @alexhollender_WMF wrote:

@Jdlrobson, two things:

• I wonder if the WikiLove icon should be red, given that it currently is in Legacy Vector? cc @Ladsgroup

I like the mono-chromatic approach. It's simpler and less "on your face" but if you want to deviate from that. I wonder if we can make the watch start 36c.

ok, we will move forward with the monochromatic heart for now, and potentially follow up via a separate task about making it red.

@Jdlrobson to move this task to the appropriate place, either:

• Needs more work we change the padding & margin, then design review & deploy
• Blocked on others we wait to make the padding & margin changes as part of T314323

Regarding color, I'd also want to check with @Volker_E. We have a similar open question around whether the filled watchstar should be blue and our icons currently don't support states where the stroke color is different from outline, If we want to do that we should do it in a separate ticket T317710

Due to the extra padding around the icon (currently 9px, vs. the eventual 6px we hope to achieve via T314323), the icon is not properly aligned with the tabs. Would it be possible to fix the padding just on this icon?

This will be done as part of T314323

@Jdlrobson to move this task to the appropriate place, either:

I'm moving this to sign off as the new icons are feature flagged and it's not clear yet when we'll deploy them. There will be a full design review/QA before we enable them so plenty of opportunities to make sure the icon padding and margins are done first.

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/dcb2317c72/w/

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/fc355bcae6/w/