From 48b9ca31fc9644888fb9ad451d696fca5c81ba24 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 11 Mar 2021 11:56:44 +0100
Subject: [PATCH 1/5] General modal polish.

---
 packages/base-styles/_variables.scss                      | 2 +-
 .../block-library/src/navigation/use-block-navigator.js   | 4 ++--
 packages/components/src/modal/header.js                   | 8 ++++++--
 packages/components/src/modal/style.scss                  | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 74d8042cae306..dda9168fc25f6 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -63,7 +63,7 @@ $spinner-size: 18px;
  */
 
 $shadow-popover: 0 2px 6px rgba($black, 0.05);
-$shadow-modal: 0 3px 30px rgba($black, 0.2);
+$shadow-modal: 0 10px 10px rgba($black, 0.25);
 
 
 /**
diff --git a/packages/block-library/src/navigation/use-block-navigator.js b/packages/block-library/src/navigation/use-block-navigator.js
index 688fb304af378..479a54c24e216 100644
--- a/packages/block-library/src/navigation/use-block-navigator.js
+++ b/packages/block-library/src/navigation/use-block-navigator.js
@@ -17,7 +17,7 @@ export default function useBlockNavigator( clientId, __experimentalFeatures ) {
 	const navigatorToolbarButton = (
 		<ToolbarButton
 			className="components-toolbar__control"
-			label={ __( 'Open block navigator' ) }
+			label={ __( 'Open block navigation' ) }
 			onClick={ () => setIsNavigationListOpen( true ) }
 			icon={ listView }
 		/>
@@ -25,7 +25,7 @@ export default function useBlockNavigator( clientId, __experimentalFeatures ) {
 
 	const navigatorModal = isNavigationListOpen && (
 		<Modal
-			title={ __( 'Block Navigator' ) }
+			title={ __( 'Navigation' ) }
 			closeLabel={ __( 'Close' ) }
 			onRequestClose={ () => {
 				setIsNavigationListOpen( false );
diff --git a/packages/components/src/modal/header.js b/packages/components/src/modal/header.js
index 4f437656c262a..7fcc145b05484 100644
--- a/packages/components/src/modal/header.js
+++ b/packages/components/src/modal/header.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { close } from '@wordpress/icons';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -40,7 +40,11 @@ const ModalHeader = ( {
 				) }
 			</div>
 			{ isDismissible && (
-				<Button onClick={ onClose } icon={ close } label={ label } />
+				<Button
+					onClick={ onClose }
+					icon={ closeSmall }
+					label={ label }
+				/>
 			) }
 		</div>
 	);
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 450cb553cf48c..528dac8f312d0 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -23,9 +23,9 @@
 	left: 0;
 	box-sizing: border-box;
 	margin: 0;
-	border: $border-width solid $gray-300;
 	background: $white;
 	box-shadow: $shadow-modal;
+	border-radius: $radius-block-ui;
 	overflow: auto;
 
 	// Show a centered modal on bigger screens.

From efd37a6175ac26ba40c2efe6a7065c314348234f Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 11 Mar 2021 12:16:35 +0100
Subject: [PATCH 2/5] Vertically align tree view icons with heading in modal

---
 .../src/components/block-navigation/style.scss            | 6 ++++++
 packages/components/src/modal/style.scss                  | 6 +++---
 .../src/components/manage-blocks-modal/style.scss         | 8 ++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index 546dab181208e..47d82db5ecfaf 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -15,6 +15,12 @@
 	border-collapse: collapse;
 	padding: 0;
 	margin: 0;
+
+	// Move upwards when in modal.
+	.components-modal__content & {
+		margin: (-$grid-unit-15) (-$grid-unit-15 / 2) 0;
+		width: calc(100% + #{ $grid-unit-15 });
+	}
 }
 
 .block-editor-block-navigation-leaf {
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 528dac8f312d0..e25eeec49cdb5 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -61,7 +61,7 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid $gray-300;
-	padding: 0 $grid-unit-30;
+	padding: 0 $grid-unit-40;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -75,7 +75,7 @@
 	position: relative;
 	position: sticky;
 	top: 0;
-	margin: 0 -#{$grid-unit-30} $grid-unit-30;
+	margin: 0 -#{$grid-unit-40} $grid-unit-30;
 
 	// Rules inside this query are only run by Microsoft Edge.
 	// Edge has bugs around position: sticky;, so it needs a separate top rule.
@@ -123,7 +123,7 @@
 .components-modal__content {
 	box-sizing: border-box;
 	height: 100%;
-	padding: 0 $grid-unit-30 $grid-unit-30;
+	padding: 0 $grid-unit-40 $grid-unit-30;
 
 	// Rules inside this query are only run by Microsoft Edge.
 	// This is a companion top padding to the fixed rule in line 77.
diff --git a/packages/edit-post/src/components/manage-blocks-modal/style.scss b/packages/edit-post/src/components/manage-blocks-modal/style.scss
index 3f722714a5333..a63bbdf26c127 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/style.scss
+++ b/packages/edit-post/src/components/manage-blocks-modal/style.scss
@@ -121,9 +121,9 @@
 .edit-post-manage-blocks-modal__results {
 	height: 100%;
 	overflow: auto;
-	margin-left: -$grid-unit-30;
-	margin-right: -$grid-unit-30;
-	padding-left: $grid-unit-30;
-	padding-right: $grid-unit-30;
+	margin-left: -$grid-unit-40;
+	margin-right: -$grid-unit-40;
+	padding-left: $grid-unit-40;
+	padding-right: $grid-unit-40;
 	border-top: $border-width solid $gray-300;
 }

From e1eadf7fab19f17d9827450941e4ada933d5fce8 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 11 Mar 2021 12:21:27 +0100
Subject: [PATCH 3/5] Increase indentation.

---
 .../block-editor/src/components/block-navigation/style.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index 47d82db5ecfaf..cced501b9b6fd 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -237,5 +237,5 @@
 
 .block-editor-block-navigator-indentation {
 	flex-shrink: 0;
-	width: 18px;
+	width: $grid-unit-30;
 }

From 9197a74db59a6525630ff4ab4bd3b598dbb27664 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 11 Mar 2021 12:32:42 +0100
Subject: [PATCH 4/5] Compress the height of icons, without reducing the mover
 control hit area.

---
 .../src/components/block-navigation/style.scss     | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index cced501b9b6fd..5960b62a3bd3d 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -122,7 +122,11 @@
 		vertical-align: top;
 		@include reduce-motion("transition");
 
+		// Show on hover, visible, and show above to keep the hit area size.
+		&:hover,
 		&.is-visible {
+			position: relative;
+			z-index: 1;
 			opacity: 1;
 			@include edit-post__fade-in-animation;
 		}
@@ -146,29 +150,31 @@
 		align-items: center;
 	}
 
-	// Keep the tap target large but the focus target small
+	// Keep the tap target large but the focus target small.
 	.block-editor-block-mover-button {
 		position: relative;
 		width: $button-size;
 		height: $button-size-small;
 
-		// Position the icon
+		// Position the icon.
 		svg {
 			position: relative;
 			height: $button-size-small;
 		}
 
 		&.is-up-button {
+			margin-top: -$grid-unit-15 / 2;
 			align-items: flex-end;
 			svg {
-				bottom: -4px;
+				bottom: -$grid-unit-05;
 			}
 		}
 
 		&.is-down-button {
+			margin-bottom: -$grid-unit-15 / 2;
 			align-items: flex-start;
 			svg {
-				top: -4px;
+				top: -$grid-unit-05;
 			}
 		}
 

From 8a0a45470a881bfca693f4281f7cf5c7ba60b696 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Fri, 12 Mar 2021 09:17:51 +0100
Subject: [PATCH 5/5] Tweak indentation.

---
 .../block-editor/src/components/block-navigation/style.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index 5960b62a3bd3d..4b80523372791 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -243,5 +243,5 @@
 
 .block-editor-block-navigator-indentation {
 	flex-shrink: 0;
-	width: $grid-unit-30;
+	width: $grid-unit-30 + $grid-unit-05; // Indent a full icon size, plus 4px which optically aligns child icons to the text label above.
 }