From 5e77f46d2955749057e423001643a67daff54cc3 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Mon, 7 Sep 2020 13:17:08 +0200
Subject: [PATCH] Polish menu item icon locations. (#25106)

* Polish media replace menu.

* Polish transforms menu.
---
 .../components/block-switcher/block-transformations-menu.js | 2 +-
 .../src/components/media-replace-flow/style.scss            | 6 +++++-
 packages/components/src/menu-item/style.scss                | 6 ++++++
 packages/icons/src/library/media.js                         | 4 ++--
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-switcher/block-transformations-menu.js b/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
index d01663a41bd2d1..fb70c053dac781 100644
--- a/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
+++ b/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
@@ -23,12 +23,12 @@ const BlockTransformationsMenu = ( {
 					<MenuItem
 						key={ name }
 						className={ getBlockMenuDefaultClassName( name ) }
-						icon={ <BlockIcon icon={ icon } showColors /> }
 						onClick={ ( event ) => {
 							event.preventDefault();
 							onSelect( name );
 						} }
 					>
+						<BlockIcon icon={ icon } showColors />
 						{ title }
 					</MenuItem>
 				);
diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
index 97ca140a75328c..7af0f7bfbd2fce 100644
--- a/packages/block-editor/src/components/media-replace-flow/style.scss
+++ b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -16,7 +16,11 @@
 }
 
 .block-editor-media-flow__url-input {
-	margin-top: $grid-unit-20;
+	border-top: $border-width solid $gray-900;
+	margin-top: $grid-unit-15;
+	margin-right: -$grid-unit-15;
+	margin-left: -$grid-unit-15;
+	padding: $grid-unit-15 $grid-unit-30 0;
 
 	.block-editor-media-replace-flow__image-url-label {
 		top: $grid-unit-20;
diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
index 29aa0570d28a3b..d490d77fd6a823 100644
--- a/packages/components/src/menu-item/style.scss
+++ b/packages/components/src/menu-item/style.scss
@@ -12,6 +12,12 @@
 	.components-menu-item__shortcut + .components-menu-items__item-icon {
 		margin-left: $grid-unit-10;
 	}
+
+	// If a block item is shown inline (such as transforms), space it correctly.
+	.block-editor-block-icon {
+		margin-left: -2px; // This optically balances the icon.
+		margin-right: $grid-unit-10;
+	}
 }
 
 .components-menu-item__info-wrapper {
diff --git a/packages/icons/src/library/media.js b/packages/icons/src/library/media.js
index b91d820cc8317e..23b1b1f7ecd527 100644
--- a/packages/icons/src/library/media.js
+++ b/packages/icons/src/library/media.js
@@ -4,8 +4,8 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const media = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
-		<Path d="M13 11V4c0-.55-.45-1-1-1h-1.67L9 1H5L3.67 3H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h10c.55 0 1-.45 1-1zM7 4.5c1.38 0 2.5 1.12 2.5 2.5S8.38 9.5 7 9.5 4.5 8.38 4.5 7 5.62 4.5 7 4.5zM14 6h5v10.5c0 1.38-1.12 2.5-2.5 2.5S14 17.88 14 16.5s1.12-2.5 2.5-2.5c.17 0 .34.02.5.05V9h-3V6zm-4 8.05V13h2v3.5c0 1.38-1.12 2.5-2.5 2.5S7 17.88 7 16.5 8.12 14 9.5 14c.17 0 .34.02.5.05z" />
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M18.7 3H5.3C4 3 3 4 3 5.3v13.4C3 20 4 21 5.3 21h13.4c1.3 0 2.3-1 2.3-2.3V5.3C21 4 20 3 18.7 3zm.8 15.7c0 .4-.4.8-.8.8H5.3c-.4 0-.8-.4-.8-.8V5.3c0-.4.4-.8.8-.8h13.4c.4 0 .8.4.8.8v13.4zM10 15l5-3-5-3v6z" />
 	</SVG>
 );