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

@@ -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>
 );

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,14 +11,21 @@
 	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;
 		color: $light-gray-300;
 		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;
 	}
 }
 

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() {