From 56760971353603a9c8b185aae69b9129ad94b903 Mon Sep 17 00:00:00 2001
From: Jan Drewniak <jan.drewniak@gmail.com>
Date: Thu, 4 Aug 2022 09:14:11 -0400
Subject: [PATCH] Remove .mw-ui-button styles from user-links overflow menu

Removes the .mw-ui-button styles from the userpage link
and create account link in the user menu.

Overrides the userpage redlink style so that the link
remains blue even if the userpage doesn't exist.

Visual changes: userpage link and create account link
in header are no longer .mw-ui-buttton styles, but
look like standard blue links. The user links menu shifts
slightly because of this as well.

Bug: T312157
Change-Id: Id98e566952e5875527f38d1edbc8f6e058af4518
---
 includes/Hooks.php                                |  6 ++++--
 .../skins.vector.styles/components/UserLinks.less | 15 ++++++++++++++-
 tests/phpunit/integration/VectorHooksTest.php     | 13 -------------
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/includes/Hooks.php b/includes/Hooks.php
index e14ee3f9..ab898afb 100644
--- a/includes/Hooks.php
+++ b/includes/Hooks.php
@@ -287,7 +287,8 @@ class Hooks implements
 		if ( isset( $content_navigation['user-page']['userpage'] ) ) {
 			$content_navigation[$overflow]['userpage'] = array_merge(
 				$content_navigation['user-page']['userpage'], [
-				'button' => true,
+				// T312157: Style the userpage link as a blue link rather than a quiet button.
+				'button' => false,
 				'collapsible' => true,
 				// Remove icon
 				'icon' => '',
@@ -317,7 +318,8 @@ class Hooks implements
 			$content_navigation[$overflow]['createaccount'] = array_merge(
 				$content_navigation['user-menu']['createaccount'], [
 				'id' => 'pt-createaccount-2',
-				'button' => true,
+				// T312157: Style the userpage link as a blue link rather than a quiet button.
+				'button' => false,
 				'collapsible' => true,
 				// Remove icon
 				'icon' => '',
diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less
index c19c1e17..61137c22 100644
--- a/resources/skins.vector.styles/components/UserLinks.less
+++ b/resources/skins.vector.styles/components/UserLinks.less
@@ -1,8 +1,11 @@
 @import '../../common/variables.less';
 @import '../../common/mixins.less';
 @import 'mediawiki.mixins.less';
+@import 'mediawiki.ui/variables.less';
 
 @font-size-user-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
+// Applies to links in the overflow menu that do not have the .mw-ui-button class.
+@overflow-link-margin: 0 8px;
 
 /**
  * Container that holds both the horizontal menu and dropdown menus.
@@ -57,6 +60,11 @@
 		align-items: center;
 	}
 
+	// Add margin to links that don't have the .mw-ui-button or related icon classes.
+	a:not( .mw-ui-button ):not( .mw-echo-notifications-badge  ) {
+		margin: 0 8px;
+	}
+
 	.user-links-collapsible-item {
 		@media ( max-width: @min-width-tablet ) {
 			display: none;
@@ -108,10 +116,15 @@
 	border-top: @border-width-base @border-style-base @colorGray14;
 }
 
-//User-page link in personal (dropdown) menu.
+//User-page link in personal (overflow) menu.
 #pt-userpage-2 {
 	max-width: unit( 155 / @font-size-browser / @font-size-user-links, em );
 
+	a {
+		// T312157 Override redlink (.new) color for non-existant userpage
+		color: @color-primary;
+	}
+
 	span {
 		.text-overflow( @visible: false );
 	}
diff --git a/tests/phpunit/integration/VectorHooksTest.php b/tests/phpunit/integration/VectorHooksTest.php
index 0859fcb7..dde04c32 100644
--- a/tests/phpunit/integration/VectorHooksTest.php
+++ b/tests/phpunit/integration/VectorHooksTest.php
@@ -451,11 +451,6 @@ class VectorHooksTest extends MediaWikiIntegrationTestCase {
 		$this->assertFalse( isset( $contentNav['user-page']['login'] ),
 			'updateUserLinksDropdownItems is called when not legacy'
 		);
-		$this->assertContains( 'mw-ui-button',
-			$contentNav['vector-user-menu-overflow']['userpage']['link-class'],
-			'updateUserLinksOverflowItems is called when not legacy'
-		);
-
 		Hooks::onSkinTemplateNavigation( $vectorLegacySkin, $contentNavLegacy );
 		$this->assertFalse( isset( $contentNavLegacy['user-page'] ),
 			'user-page is unset for legacy vector'
@@ -564,14 +559,6 @@ class VectorHooksTest extends MediaWikiIntegrationTestCase {
 			$content['vector-user-menu-overflow']['userpage']['class'],
 			'User page link in user links overflow requires collapsible class'
 		);
-		$this->assertContains( 'mw-ui-button',
-			$content['vector-user-menu-overflow']['userpage']['link-class'],
-			'User page link in user links overflow requires button classes'
-		);
-		$this->assertContains( 'mw-ui-quiet',
-			$content['vector-user-menu-overflow']['userpage']['link-class'],
-			'User page link in user links overflow requires quiet button classes'
-		);
 		$this->assertNotContains( 'mw-ui-icon',
 			$content['vector-user-menu-overflow']['userpage']['class'],
 			'User page link in user links overflow does not have icon classes'