Merge "Adjust notification icon to be the same size as the other icons"

includes/skins/SkinMinerva.php

@@ -405,7 +405,7 @@ class SkinMinerva extends SkinTemplate {
 
 			$tpl->set( 'userNotificationsData', [
 				'notificationIconClass' => MinervaUI::iconClass( 'bellOutline-base20',
-					'element', '', 'wikimedia' ),
+					'element', 'mw-ui-icon-flush-right', 'wikimedia' ),
 				'title' => $notificationsMsg,
 				'url' => $url,
 				'notificationCountRaw' => $count,

includes/skins/minerva.mustache

@@ -21,7 +21,7 @@
 				<nav class="minerva-user-navigation" aria-labelledby="minerva-user-menu-toggle"> {{! See ToggleList's toggleID. }}
 					<div>{{{searchButton}}}</div>
 					{{^isAnon}}
-							<div class="mw-ui-icon-element minerva-user-notifications">
+							<div class="minerva-user-notifications">
 								{{#userNotificationsData}}{{>userNotifications}}{{/userNotificationsData}}
 							</div>
 					{{/isAnon}}

minerva.less/minerva.variables.less

@@ -35,6 +35,17 @@
 
 @skinContentBgColor: #fff;
 
+//
+// Icons
+//
+// Small icon - 16px square, with 9px padding (total 34px square).
+@icon-size-sm: unit( 16 / @font-size-browser, em );
+@icon-padding-sm: unit( 9 / @font-size-browser, em );
+
+// Medium icon - 16px square, with 9px padding (total 34px square).
+@icon-size-md: unit( 20 / @font-size-browser, em ); // 20px;
+@icon-padding-md: unit( 10 / @font-size-browser, em ); // 44px;
+
 // Navigation Drawers
 @rightDrawerWidth: 60%;
 @primaryNavBackgroundColor: @colorGray14;

resources/skins.minerva.base.styles/userMenu.less

@@ -15,10 +15,3 @@
 	// Show the list relative the button.
 	position: relative;
 }
-
-// Targets the last direct descendant of the navigation menu
-// (i.e. the last icon, or button, or div, etc).
-// and align with the content container.
-.minerva-user-navigation > *:last-child {
-	margin-right: @contentPadding/-2;
-}

resources/skins.minerva.loggedin.styles/styles.less

@@ -15,21 +15,20 @@
 }
 
 .notification-count {
-	@circleSize: 24px;
-	@borderSize: 2px;
 	display: inline-block;
 	margin: auto;
-	height: @circleSize;
 	background: @notificationBackgroundRead;
 	color: @notificationColorRead;
+	// same as mw-ui-icon-flush-right
+	margin-right: -@icon-padding-md;
 	cursor: pointer;
 
 	.circle {
 		border-radius: 50%;
-		border: @borderSize solid @notificationColorRead;
+		border: 2px solid @notificationColorRead;
 		margin: auto;
-		height: @circleSize - @borderSize;
-		width: @circleSize - @borderSize;
+		height: @icon-size-md;
+		width: @icon-size-md;
 
 		/* stylelint-disable declaration-block-no-duplicate-properties */
 		// Center the text number inside the circle
@@ -52,6 +51,7 @@
 
 	&.notification-unseen {
 		color: @notificationColorUnread;
+		padding: @icon-padding-md;
 
 		.circle {
 			background: @notificationBackgroundUnread;

resources/skins.minerva.scripts/NotificationBadge.js

@@ -7,6 +7,7 @@
 		Icon = mobile.Icon,
 		notificationIcon = new Icon( {
 			name: 'bellOutline-base20',
+			additionalClassNames: 'mw-ui-icon-flush-right',
 			glyphPrefix: 'wikimedia'
 		} );
 

skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less

@@ -16,15 +16,6 @@
  */
 
 @import '../../minerva.less/minerva.variables.less';
-
-// Small icon - 16px square, with 9px padding (total 34px square).
-@icon-size-sm: unit( 16 / @font-size-browser, em );
-@icon-padding-sm: unit( 9 / @font-size-browser, em );
-
-// Medium icon - 16px square, with 9px padding (total 34px square).
-@icon-size-md: unit( 20 / @font-size-browser, em ); // 20px;
-@icon-padding-md: unit( 10 / @font-size-browser, em ); // 44px;
-
 /**
  * Mixin for a pseudo-element with a background image.
  */

tests/phpunit/skins/SkinMinervaTest.php

@@ -272,7 +272,8 @@ class SkinMinervaTest extends MediaWikiTestCase {
 	) {
 		return [
 			'notificationIconClass' =>
-				MinervaUI::iconClass( 'bellOutline-base20', 'element', '', 'wikimedia' ),
+				MinervaUI::iconClass( 'bellOutline-base20', 'element',
+					'mw-ui-icon-flush-right', 'wikimedia' ),
 			'title' => $notificationsMsg,
 			'url' => SpecialPage::getTitleFor( $notificationsTitle )
 				->getLocalURL(