From 452d59c7efa760d9a9233547c4ae2c36aa8cd416 Mon Sep 17 00:00:00 2001
From: Jon Robson <jdlrobson@gmail.com>
Date: Fri, 23 Sep 2022 10:46:28 -0700
Subject: [PATCH] Echo: Move skinStyles from Echo extension to Vector

Bug: T257143
Change-Id: If52986fe56b65479adabe8233b0fc6df164b5376
---
 skin.json                             |  2 ++
 skinStyles/ext.echo.styles.badge.less | 45 +++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 skinStyles/ext.echo.styles.badge.less

diff --git a/skin.json b/skin.json
index e9fb2d68..8a2b5988 100644
--- a/skin.json
+++ b/skin.json
@@ -420,6 +420,7 @@
 	},
 	"ResourceModuleSkinStyles": {
 		"vector-2022": {
+			"ext.echo.styles.badge": "skinStyles/ext.echo.styles.badge.less",
 			"+ext.echo.styles.alert": "skinStyles/ext.echo.styles.alert.less",
 			"+mediawiki.action.edit": "skinStyles/mediawiki.action.edit.less",
 			"+mediawiki.action.view.redirectPage": "skinStyles/mediawiki.action.view.redirectPage.less",
@@ -432,6 +433,7 @@
 			"+ext.visualEditor.base": "skinStyles/ext.visualEditor.less"
 		},
 		"vector": {
+			"ext.echo.styles.badge": "skinStyles/ext.echo.styles.badge.less",
 			"+ext.echo.styles.alert": "skinStyles/ext.echo.styles.alert.less",
 			"jquery.tipsy": "skinStyles/jquery.tipsy.less",
 			"jquery.ui": [
diff --git a/skinStyles/ext.echo.styles.badge.less b/skinStyles/ext.echo.styles.badge.less
new file mode 100644
index 00000000..6d75a380
--- /dev/null
+++ b/skinStyles/ext.echo.styles.badge.less
@@ -0,0 +1,45 @@
+.vector-feature-visual-enhancement-next-disabled,
+.skin-vector-legacy {
+	#pt-notifications-notice .mw-echo-notifications-badge,
+	#pt-notifications-alert .mw-echo-notifications-badge {
+		top: -5px;
+	}
+}
+
+.vector-feature-visual-enhancement-next-disabled .vector-user-links {
+	#pt-notifications-alert,
+	#pt-notifications-notice {
+		margin: 0;
+
+		// Override OOUI icon styles to match core icons
+		.mw-echo-notifications-badge {
+			top: 0;
+			margin: 0;
+			background-repeat: no-repeat;
+			background-position: center;
+			width: 44px;
+			height: 44px;
+			opacity: 1;
+
+			&:hover {
+				background-color: rgba( 0, 0, 0, 0.03 );
+				border-radius: 2px;
+			}
+
+			// Adjust counter styles when counter is present
+			&:not( .mw-echo-notifications-badge-all-read ) {
+				&:after {
+					left: 24px;
+					top: 19px;
+				}
+			}
+		}
+	}
+}
+
+.vector-feature-visual-enhancement-next-disabled {
+	#p-personal #pt-notifications-alert,
+	#p-personal #pt-notifications-notice {
+		margin-right: 0.4em;
+	}
+}