From 2a2496f818b1adc967350a45bf4b5d345f7c12e6 Mon Sep 17 00:00:00 2001
From: Jon Robson <jdlrobson@gmail.com>
Date: Thu, 22 Sep 2022 12:31:11 -0700
Subject: [PATCH] Visual enhancements next: Fix alignments of icons

* Add 8px margins between mw-list-item in header
* Fixes vertical alignment on watchstar
* Fixes alignment of Echo icons

There should be no visual regressions (on master with defaults)
with this change.

Bug: T319070
Change-Id: I410c051da2129d6de10bc762e1b484cf30b6dab3
---
 resources/skins.vector.styles/components/MenuTabs.less    | 6 +++---
 .../skins.vector.styles/components/StickyHeader.less      | 4 ++++
 resources/skins.vector.styles/components/UserLinks.less   | 8 ++++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/resources/skins.vector.styles/components/MenuTabs.less b/resources/skins.vector.styles/components/MenuTabs.less
index 0cad6b6d..4c66db42 100644
--- a/resources/skins.vector.styles/components/MenuTabs.less
+++ b/resources/skins.vector.styles/components/MenuTabs.less
@@ -93,9 +93,9 @@
 		.mw-list-item {
 			.mw-ui-icon {
 				// Align small icons with the bottom of the tabs.
-				// Height of tab is 41px, and small icon is 36px,
-				// With 1px border, 41 - 36 + 1;
-				margin: 4px 0 0 0;
+				// Height of tab is 38px, and small icon is 32px,
+				// With 2px border, 38 - 32 + 2
+				margin: 8px 0 0 0;
 			}
 		}
 	}
diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less
index d8e52183..8817b2a7 100644
--- a/resources/skins.vector.styles/components/StickyHeader.less
+++ b/resources/skins.vector.styles/components/StickyHeader.less
@@ -42,6 +42,10 @@
 	&-context-bar {
 		display: flex;
 		align-items: center;
+
+		.vector-feature-visual-enhancement-next-enabled & {
+			column-gap: 8px;
+		}
 	}
 
 	&-start {
diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less
index 94c83791..2492d5d3 100644
--- a/resources/skins.vector.styles/components/UserLinks.less
+++ b/resources/skins.vector.styles/components/UserLinks.less
@@ -66,12 +66,16 @@
 /**
  * Horizontal links menu - logged in and logged out.
  */
-// TODO: Remove vector-user-menu-more after I371bb11903d8cdd8f0da89266fcf549050c0da8c has been in prod for a week
-.vector-user-menu-more,
 .vector-user-menu-overflow {
+	margin-right: 8px;
+
 	.vector-menu-content-list {
 		display: flex;
 		align-items: center;
+
+		.vector-feature-visual-enhancement-next-enabled & {
+			column-gap: 8px;
+		}
 	}
 
 	// Add margin to links that don't have the .mw-ui-button or related icon classes.