Could you explain why they are "too large"? Looking at the screenshots in https://phabricator.wikimedia.org/T140900 this looks as intended to me?

It probably is intentional, but I think the complaint is (or at least mine is) that they are significantly larger than anything else in the personal tools menu.

Especially in MonoBook it looks like if I had more tabs added by scripts/gadgets (which I do on en.wp) they will overlap or something?

Funny, I was just about to complain about the same thing.

In T141923#2517278, @Legoktm wrote:

Especially in MonoBook it looks like if I had more tabs added by scripts/gadgets (which I do on en.wp) they will overlap or something?

I split this to T141942: New notices and alerts icons overlap MonoBook tabs.

The icons look fine on Vector (although I would decrease them a little bit).

On Monobook, however, it doesn't look good at all. The icons are much larger than the links. I think this change should not affect Monobook users.

Change 302625 had a related patch set uploaded (by Mooeypoo):
Adjust notification badges for monobook

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

Change 302625 merged by jenkins-bot:
Adjust notification badges for monobook

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

Thanks for the patch

Change 302654 had a related patch set uploaded (by Catrope):
Adjust notification badges for monobook

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

Change 302654 merged by jenkins-bot:
Adjust notification badges for monobook

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

Mentioned in SAL [2016-08-03T23:41:02Z] <dereckson@tin> Synchronized php-1.28.0-wmf.13/extensions/Echo/modules/nojs/: Adjust notification badges for monobook (T141923). Prevent IE from rendering the badge SVGs ridiculously big (T142042). (duration: 00m 29s)

Checked in betalabs - the badge icons for monobook were decreased to 16px from 24px in Vector.

width: 16px;
height: 16px;

Compare to Vector:

Sorry, but I can't tell what happened here. Was the size of the icons reduced, and if so were they reduced to meet Pau's spec or was the spec changed? @Mooeypoo, do I need to hold this for @Pginer-WMF to review?

In T141923#2534673, @jmatazzoni wrote:

Sorry, but I can't tell what happened here. Was the size of the icons reduced, and if so were they reduced to meet Pau's spec or was the spec changed? @Mooeypoo, do I need to hold this for @Pginer-WMF to review?

We made changes in Monobook but not in Vector. We're merging https://gerrit.wikimedia.org/r/303334 which puts the badges closer together, but we haven't yet adjusted the height/positioning of the badges in Vector. We probably should, given that in their current state they're taller than the text and stick out both above and below.

This was apparently changed in monobook but not vector. I confess that I don't see the problem. That the notification icons are bigger than the user icon seems entirely appropriate to me, since the user icon serves no particular purpose that I can discern, while the notification icons have quite a bit of functionality a) in them, in that they change states and display data and b) behind them in that they are the gateways to the notification panels. @Pginer-WMF, please have a look and see what you'd like to do. (Sending this to Design column.)

I'd propose a couple of small adjustments that can be done for the badges to better fit in the toolbar: aligning them better vertically and increase the text size of the counters.

The image bellow shows the current (left) and adjusted (right) badges:

Below I added a CSS snippet that I used as an override for my example:

#pt-notifications-alert, #pt-notifications-notice {
 margin-top:4px !important;
 margin-right: 0.375em;

}

.mw-echo-notifications-badge {
font-size: 13px;
  
}

.mw-echo-notifications-badge:after {
	left: 55% !important;
  	top: 9px !important;
  
}

Note also that the user avatar icon is not updated (T123810). We may want to do further adjustments as part of the process of updating the existing icon.

Change 304584 had a related patch set uploaded (by Catrope):
Tweak badge styles

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

In T141923#2547883, @Pginer-WMF wrote:

#pt-notifications-alert, #pt-notifications-notice {
 margin-top:4px !important;

My patch implements this as margin-top: 0.3em; (=3.6px), moving them up just a bit more. Because this was apparently intended to reduce the top margin (overriding #p-personal li {margin-top: 0.5em }), I only applied this rule in Vector, because the 0.5em rule only appears in Vector.

margin-right: 0.375em;

I bumped this up to 0.4em so that "99+" would (barely) fit. In Monobook, 0.2em seemed to be enough.

.mw-echo-notifications-badge {
font-size: 13px;

My patch bumps the font-size on the :after rule from 0.8em to 0.9em instead of raising the base font size from 12px to 13px; this has approximately the same effect (for equivalence, I'd have to use 0.8666em but between that and 0.9em the result seemed to be the same in my browser).

.mw-echo-notifications-badge:after {
left: 55% !important;

	top: 9px !important;

Done verbatim.

Note also that the user avatar icon is not updated (T123810). We may want to do further adjustments as part of the process of updating the existing icon.

That bug is half-fixed, in that the userAvatar icon in OOUI was updated. So the updated icon is used in the notifications panel and other places where notifications are rendered, but not in the personal toolbar because that doesn't use OOUI for the icon (yet).

@Pginer-WMF If your Vagrant install isn't still all screwed up, please check out my patch and tell me what you think.

In T141923#2549905, @Catrope wrote:

@Pginer-WMF If your Vagrant install isn't still all screwed up, please check out my patch and tell me what you think.

Vagrant got up but showed me an error ("Class 'Wikimedia\PhpSessionSerializer' not found") instead of MediaWiki. I'll try to go through the destroy/update/create ritual to see if there is more luck.

Change 304584 merged by jenkins-bot:
Tweak badge styles

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

@Pginer-WMF - please take a look to sign-off or do some follow-up if needed.

1. All changes from https://gerrit.wikimedia.org/r/#/c/304584/2/modules/nojs/mw.echo.badge.less are in betalabs

(2) The screenshots are taken with 99+ for both Alerts and Notices and with 'seen' and 'unseen' background colors.

For comparison - the screenshot before changes with previous settings for top, left, font-size:

// Counter
		&:after
{
			position: absolute;
			display: inline-block;
			cursor: pointer;
			top: 10px;
			left: 50%;
			font-size: 0.8em;
			font-weight: bold;
			padding: 0 0.3em;
			border: 1px solid white;
			border-radius: 2px;
			background-color: @badge-counter-background-seen;
			content: attr(data-counter-text);
			color: white;
}

I think that the changes work better in general except for the 99+ case, which I think can be fixed as proposed in T142454#2598085 which is part of a separate ticket.