From 02724b8e5826e0359cdef7b4e1efc90f49830df3 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Thu, 31 Oct 2019 15:08:05 -0300
Subject: [PATCH 1/4] colors-selector: replace `Aa` text by SVG icon

---
 .../navigation-menu/block-colors-selector.js  | 26 +++++++++++++++++--
 .../src/navigation-menu/editor.scss           | 12 +++++----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/navigation-menu/block-colors-selector.js b/packages/block-library/src/navigation-menu/block-colors-selector.js
index 0c1c98b691ef4..8ff79f5ceba0d 100644
--- a/packages/block-library/src/navigation-menu/block-colors-selector.js
+++ b/packages/block-library/src/navigation-menu/block-colors-selector.js
@@ -11,6 +11,28 @@ import { IconButton, Dropdown, Toolbar } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 import { ColorPaletteControl, ContrastChecker } from '@wordpress/block-editor';
+import { SVG } from '@wordpress/components';
+
+
+const ColorSelectorSVGIcon = () => (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 20 20"
+	>
+		<text
+			transform="translate(-63 -14)"
+			fillRule="evenodd"
+			fontFamily="SFUIText-Bold, SF UI Text"
+			fontSize="12"
+			fontWeight="bold"
+			letterSpacing="-.5"
+			alignmentBaseline="middle"
+		>
+			<tspan x="63.453" y="23">Aa</tspan>
+		</text>
+	</SVG>
+);
+
 
 /**
  * Color Selector Icon component.
@@ -20,10 +42,10 @@ import { ColorPaletteControl, ContrastChecker } from '@wordpress/block-editor';
 const ColorSelectorIcon = ( { style } ) =>
 	<div className="block-library-colors-selector__icon-container">
 		<div
-			className="block-library-colors-selector__state-selection wp-block-navigation-menu-item"
+			className="block-library-colors-selector__state-selection"
 			style={ style }
 		>
-			Aa
+			<ColorSelectorSVGIcon />
 		</div>
 	</div>;
 
diff --git a/packages/block-library/src/navigation-menu/editor.scss b/packages/block-library/src/navigation-menu/editor.scss
index cc663e7787a99..90fd69582b942 100644
--- a/packages/block-library/src/navigation-menu/editor.scss
+++ b/packages/block-library/src/navigation-menu/editor.scss
@@ -113,11 +113,6 @@ $colors-selector-size: 22px;
 
 	// colors-selector - selection status.
 	.block-library-colors-selector__state-selection {
-		font-size: 11px;
-		font-style: normal;
-		font-family: inherit;
-		font-weight: 600;
-
 		border-radius: $colors-selector-size / 2;
 		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 
@@ -127,6 +122,13 @@ $colors-selector-size: 22px;
 		min-height: $colors-selector-size;
 		line-height: ($colors-selector-size - 2);
 
+		// Adjust `Aa` icon position.
+		> svg {
+			position: relative;
+			top: 4px;
+			left: 2px;
+		}
+
 		background-color: var(--background-color-menu-link);
 		color: var(--color-menu-link);
 	}

From b9e85a97c4052cf0e16222e14988d3058d536525 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Thu, 31 Oct 2019 15:14:18 -0300
Subject: [PATCH 2/4] fix eslint erros

---
 .../src/navigation-menu/block-colors-selector.js             | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/block-library/src/navigation-menu/block-colors-selector.js b/packages/block-library/src/navigation-menu/block-colors-selector.js
index 8ff79f5ceba0d..a2730f5bec4a4 100644
--- a/packages/block-library/src/navigation-menu/block-colors-selector.js
+++ b/packages/block-library/src/navigation-menu/block-colors-selector.js
@@ -7,12 +7,10 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { IconButton, Dropdown, Toolbar } from '@wordpress/components';
+import { IconButton, Dropdown, Toolbar, SVG } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 import { ColorPaletteControl, ContrastChecker } from '@wordpress/block-editor';
-import { SVG } from '@wordpress/components';
-
 
 const ColorSelectorSVGIcon = () => (
 	<SVG
@@ -33,7 +31,6 @@ const ColorSelectorSVGIcon = () => (
 	</SVG>
 );
 
-
 /**
  * Color Selector Icon component.
  *

From 915c754e836e8bd893c47fd30ad130d2e781c377 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Thu, 31 Oct 2019 16:02:02 -0300
Subject: [PATCH 3/4] colors-selector: change SVG icon

---
 .../navigation-menu/block-colors-selector.js  | 19 +++----------------
 .../src/navigation-menu/editor.scss           |  7 -------
 2 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/packages/block-library/src/navigation-menu/block-colors-selector.js b/packages/block-library/src/navigation-menu/block-colors-selector.js
index a2730f5bec4a4..e33b7a44cc142 100644
--- a/packages/block-library/src/navigation-menu/block-colors-selector.js
+++ b/packages/block-library/src/navigation-menu/block-colors-selector.js
@@ -7,27 +7,14 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { IconButton, Dropdown, Toolbar, SVG } from '@wordpress/components';
+import { IconButton, Dropdown, Toolbar, SVG, Path } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 import { ColorPaletteControl, ContrastChecker } from '@wordpress/block-editor';
 
 const ColorSelectorSVGIcon = () => (
-	<SVG
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 20 20"
-	>
-		<text
-			transform="translate(-63 -14)"
-			fillRule="evenodd"
-			fontFamily="SFUIText-Bold, SF UI Text"
-			fontSize="12"
-			fontWeight="bold"
-			letterSpacing="-.5"
-			alignmentBaseline="middle"
-		>
-			<tspan x="63.453" y="23">Aa</tspan>
-		</text>
+	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
+		<Path d="M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z" />
 	</SVG>
 );
 
diff --git a/packages/block-library/src/navigation-menu/editor.scss b/packages/block-library/src/navigation-menu/editor.scss
index 90fd69582b942..b2a0630a097c2 100644
--- a/packages/block-library/src/navigation-menu/editor.scss
+++ b/packages/block-library/src/navigation-menu/editor.scss
@@ -122,13 +122,6 @@ $colors-selector-size: 22px;
 		min-height: $colors-selector-size;
 		line-height: ($colors-selector-size - 2);
 
-		// Adjust `Aa` icon position.
-		> svg {
-			position: relative;
-			top: 4px;
-			left: 2px;
-		}
-
 		background-color: var(--background-color-menu-link);
 		color: var(--color-menu-link);
 	}

From 2baa5bcec08f99895c17da9dfc5c8ee46224989e Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Thu, 31 Oct 2019 19:01:18 -0300
Subject: [PATCH 4/4] colors-selector: reduce icon size

---
 packages/block-library/src/navigation-menu/editor.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/navigation-menu/editor.scss b/packages/block-library/src/navigation-menu/editor.scss
index b2a0630a097c2..a8f8b85d34c0a 100644
--- a/packages/block-library/src/navigation-menu/editor.scss
+++ b/packages/block-library/src/navigation-menu/editor.scss
@@ -121,6 +121,7 @@ $colors-selector-size: 22px;
 		height: $colors-selector-size;
 		min-height: $colors-selector-size;
 		line-height: ($colors-selector-size - 2);
+		padding: 2px;
 
 		background-color: var(--background-color-menu-link);
 		color: var(--color-menu-link);