From 2c5b301ac45a1d57e0598595f931350d4a6b67dc Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Fri, 6 Apr 2018 11:18:36 +0200
Subject: [PATCH] Polish side UI, make arrows bigger.

This is initial work to improve the side UI. It fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.
---
 editor/components/block-mover/arrows.js       |  8 +--
 editor/components/block-mover/style.scss      | 49 ++++++++-----------
 .../components/block-settings-menu/style.scss |  1 +
 3 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/editor/components/block-mover/arrows.js b/editor/components/block-mover/arrows.js
index 1d4dfbc9130038..43e5b28971ad00 100644
--- a/editor/components/block-mover/arrows.js
+++ b/editor/components/block-mover/arrows.js
@@ -1,11 +1,11 @@
 export const upArrow = (
-	<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" aria-hidden role="img" focusable="false">
-		<path d="M12.293 12.207L9 8.914l-3.293 3.293-1.414-1.414L9 6.086l4.707 4.707z" />
+	<svg tabIndex="-1" width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden role="img" focusable="false">
+		<polygon points="9,4.5 3.3,10.1 4.8,11.5 9,7.3 13.2,11.5 14.7,10.1 " />
 	</svg>
 );
 
 export const downArrow = (
-	<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" aria-hidden role="img" focusable="false">
-		<path d="M12.293 6.086L9 9.379 5.707 6.086 4.293 7.5 9 12.207 13.707 7.5z" />
+	<svg tabIndex="-1" width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden role="img" focusable="false">
+		<polygon points="9,13.5 14.7,7.9 13.2,6.5 9,10.7 4.8,6.5 3.3,7.9 " />
 	</svg>
 );
diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss
index 314ec7fa168cba..643c01e84c5a1f 100644
--- a/editor/components/block-mover/style.scss
+++ b/editor/components/block-mover/style.scss
@@ -1,6 +1,8 @@
 // Mover icon buttons
 .editor-block-mover__control {
-	display: block;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	border: none;
 	outline: none;
 	background: none;
@@ -9,6 +11,7 @@
 	padding: 0;
 	width: $block-side-ui-width;
 	height: $block-side-ui-width;	// the side UI can be no taller than 2 * $block-side-ui-width, which matches the height of a line of text
+	border-radius: $button-style__radius-roundrect;
 
 	&[aria-disabled="true"] {
 		cursor: default;
@@ -16,7 +19,13 @@
 		pointer-events: none;
 	}
 
-	// Try a background, only for nested situations @todo
+	svg {
+		width: $block-side-ui-width;
+		height: $block-side-ui-width;
+		padding: ( $block-side-ui-width - 18px ) / 2;	// this makes the SVG fill the whole available area, without scaling the artwork
+	}
+
+	// Apply a background in nested contexts, only on desktop
 	@include break-small() {
 		.editor-block-list__layout .editor-block-list__layout & {
 			background: $white;
@@ -33,35 +42,17 @@
 		}
 	}
 
-	// apply styles to SVG for movers on the desktop breakpoint
-	@include break-small {
-		// unstyle inherited icon button styles
-		&:not(:disabled):hover,
-		&:not(:disabled):active,
-		&:not(:disabled):focus {
-			box-shadow: none;
-			color: inherit;
-		}
-
-		svg {
-			display: block;
-			position: relative; // Fixing the Safari bug for `<button>`s overflow
-			border-radius: 50%;
-			margin: auto;
-
-		}
-
-		&:not(:disabled):hover svg {
-			box-shadow: inset 0 0 0 1px $light-gray-500;
-		}
+	// Hover, active and focus styles
+	&:not(:disabled):hover {
+		@include button-style__hover;
+	}
 
-		&:not(:disabled):active svg {
-			@include button-style__active;
-		}
+	&:not(:disabled):active {
+		@include button-style__active;
+	}
 
-		&:not(:disabled):focus svg {
-			@include button-style__focus-active;
-		}
+	&:not(:disabled):focus {
+		@include button-style__focus-active;
 	}
 }
 
diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss
index 278e485aaf8736..fcdde40e7f665d 100644
--- a/editor/components/block-settings-menu/style.scss
+++ b/editor/components/block-settings-menu/style.scss
@@ -4,6 +4,7 @@
 	padding: 0;
 	width: $block-side-ui-width;
 	height: $block-side-ui-width * 2;	// same height as a single line of text, our smallest block
+	border-radius: $button-style__radius-roundrect;
 
 	// Try a background, only for nested situations @todo
 	@include break-small() {