From 13f0e379b82c5c5799dcf8dcb59e279a60ffc379 Mon Sep 17 00:00:00 2001
From: Jdrewniak <jdrewniak@wikimedia.org>
Date: Mon, 22 Jul 2024 22:17:30 -0400
Subject: [PATCH] Dark-mode feedback link UX improvements

- Makes the dark-mode feedback link (the "report a dark mode issue" )
link in the Appearance menu, only appear when dark-mode is activated.
- Keeps the Appearance dropdown menu open after the dark-mode feedback
link has been clicked.

Bug: T367871
Change-Id: I75d040650f613a7af5db553689d734e56f910431
---
 .../clientPreferences.js                         | 13 +++++++++++--
 .../clientPreferences.less                       | 16 ++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/resources/skins.vector.clientPreferences/clientPreferences.js b/resources/skins.vector.clientPreferences/clientPreferences.js
index 4f60d2e2c..5089d00b4 100644
--- a/resources/skins.vector.clientPreferences/clientPreferences.js
+++ b/resources/skins.vector.clientPreferences/clientPreferences.js
@@ -361,7 +361,16 @@ function makeClientPreference( parent, featureName, config, userPreferences ) {
 					anchor.setAttribute( 'target', '_blank' );
 				}
 				anchor.textContent = linkLabel;
-				const showSuccessFeedback = function () {
+
+				/**
+				 * Shows the success message after clicking the beta feedback link.
+				 * Note: event.stopPropagation(); is required to show the success message
+				 * without closing the Appearance menu when it's in a dropdown.
+				 *
+				 * @param {Event} event
+				 */
+				const showSuccessFeedback = function ( event ) {
+					event.stopPropagation();
 					const icon = document.createElement( 'span' );
 					icon.classList.add( 'vector-icon', 'vector-icon--heart' );
 					anchor.textContent = mw.msg( 'vector-night-mode-issue-reporting-link-notification' );
@@ -369,7 +378,7 @@ function makeClientPreference( parent, featureName, config, userPreferences ) {
 					anchor.prepend( icon );
 					anchor.removeEventListener( 'click', showSuccessFeedback );
 				};
-				anchor.addEventListener( 'click', showSuccessFeedback );
+				anchor.addEventListener( 'click', ( event ) => showSuccessFeedback( event ) );
 				betaMessageElement.appendChild( anchor );
 				row.appendChild( betaMessageElement );
 			}
diff --git a/resources/skins.vector.clientPreferences/clientPreferences.less b/resources/skins.vector.clientPreferences/clientPreferences.less
index 14c9101a6..0c626f354 100644
--- a/resources/skins.vector.clientPreferences/clientPreferences.less
+++ b/resources/skins.vector.clientPreferences/clientPreferences.less
@@ -15,3 +15,19 @@
 		.cdx-mixin-css-icon( @cdx-icon-heart, @color-success, @size-icon-small );
 	}
 }
+
+// Only display feedback notice in dark mode.
+// https://phabricator.wikimedia.org/T367871#10003064
+#skin-theme-beta-notice {
+	display: none;
+}
+
+@media screen and ( prefers-color-scheme: dark ) {
+	html.skin-theme-clientpref-os #skin-theme-beta-notice {
+		display: block;
+	}
+}
+
+html.skin-theme-clientpref-night #skin-theme-beta-notice {
+	display: block;
+}