From 4fb5005bd04f95d1542c7861b43886c93d262946 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Thu, 11 Mar 2021 21:09:24 -0500
Subject: [PATCH] feat: move ULS button back to personal menu

---
 includes/Partials/Header.php                  | 12 ++---
 .../UniversalLanguageSelector/ext.uls.pt.less | 51 ++++++++++++-------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/includes/Partials/Header.php b/includes/Partials/Header.php
index 31efcb2d..57f3fac6 100644
--- a/includes/Partials/Header.php
+++ b/includes/Partials/Header.php
@@ -53,16 +53,13 @@ final class Header extends Partial {
 		);
 		$user = $this->skin->getUser();
 
-		// Move the Echo badges and ULS out of default list
+		// Move the Echo badges out of default list
 		if ( isset( $personalTools['notifications-alert'] ) ) {
 			unset( $personalTools['notifications-alert'] );
 		}
 		if ( isset( $personalTools['notifications-notice'] ) ) {
 			unset( $personalTools['notifications-notice'] );
 		}
-		if ( isset( $personalTools['uls'] ) ) {
-			unset( $personalTools['uls'] );
-		}
 
 		if ( $user->isLoggedIn() ) {
 			$personalTools = $this->addUserInfoToMenu( $personalTools, $user );
@@ -79,7 +76,7 @@ final class Header extends Partial {
 	}
 
 	/**
-	 * Echo notification badges and ULS button
+	 * Echo notification badges button
 	 *
 	 * @return array
 	 */
@@ -88,7 +85,7 @@ final class Header extends Partial {
 			$this->skin->buildPersonalUrlsPublic()
 		);
 
-		// Create the Echo badges and ULS
+		// Create the Echo badges
 		$extraTools = [];
 		if ( isset( $personalTools['notifications-alert'] ) ) {
 			$extraTools['notifications-alert'] = $personalTools['notifications-alert'];
@@ -96,9 +93,6 @@ final class Header extends Partial {
 		if ( isset( $personalTools['notifications-notice'] ) ) {
 			$extraTools['notifications-notice'] = $personalTools['notifications-notice'];
 		}
-		if ( isset( $personalTools['uls'] ) ) {
-			$extraTools['uls'] = $personalTools['uls'];
-		}
 
 		$html = $this->skin->getMenuData( 'personal-extra', $extraTools );
 
diff --git a/skinStyles/extensions/UniversalLanguageSelector/ext.uls.pt.less b/skinStyles/extensions/UniversalLanguageSelector/ext.uls.pt.less
index 1d12de27..db93d4f5 100644
--- a/skinStyles/extensions/UniversalLanguageSelector/ext.uls.pt.less
+++ b/skinStyles/extensions/UniversalLanguageSelector/ext.uls.pt.less
@@ -4,29 +4,46 @@
 */
 
 @import '../../../resources/variables.less';
+@import '../../../resources/mixins.less';
 
-// Styles for ULS icon
-#pt-uls a.uls-trigger,
-#pt-uls a.uls-trigger:before {
-	display: block;
-	width: var( --width-button-base );
-	height: var( --height-header );
-	padding: 0 !important;
-	background-position: center;
-	background-size: @icon-box-size;
-	color: transparent; // Hide text
-	opacity: 0.6; // Replicate color of other icons
-	transition: @transition-opacity-quick;
+.skin-citizen {
+	// Styles for ULS icon
+	#pt-uls a.uls-trigger {
+		flex-direction: row-reverse;
+		padding-top: 10px !important; // override
 
-	&:hover,
-	&:focus,
-	&:active {
-		opacity: 0.8;
+		&:before {
+			.resource-loader-list-icon;
+			display: block;
+			padding: 0;
+			margin-left: @icon-padding;
+			background-size: contain;
+			opacity: var( --opacity-icon-base );
+			transition: @transition-opacity-quick;
+		}
+
+		&:hover {
+			&:before {
+				opacity: var( --opacity-icon-base--hover );
+			}
+		}
+
+		&:active {
+			&:before {
+				opacity: var( --opacity-icon-base--active );
+			}
+		}
+
+		&:after {
+			content: none !important;
+		}
 	}
 }
 
 .skin-citizen-dark {
 	#pt-uls a.uls-trigger {
-		filter: invert( 1 );
+		&:before {
+			filter: invert( 1 );
+		}
 	}
 }