From 91cb16c94c424d3155bb1c2849d4eb98002c12a1 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Fri, 19 Jan 2018 09:47:32 +0100
Subject: [PATCH 1/2] Try new icons for movers

These icons are smaller and less obtrusive, which makes them less heavy to look at.

This PR also employs a workaround to achieve the effect that `:focusring` would, were it implemented (see https://www.youtube.com/watch?v=ilj2P5-5CjI). This is applied only to the mover icons.

GIF: https://cldup.com/5lyhf0iSTp.gif
---
 editor/components/block-mover/index.js   |  4 ++--
 editor/components/block-mover/style.scss | 21 ++++++++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/editor/components/block-mover/index.js b/editor/components/block-mover/index.js
index 9c2d8964f41e70..3110a34ef0e73b 100644
--- a/editor/components/block-mover/index.js
+++ b/editor/components/block-mover/index.js
@@ -34,7 +34,7 @@ export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, block
 			<IconButton
 				className="editor-block-mover__control"
 				onClick={ isFirst ? null : onMoveUp }
-				icon="arrow-up-alt2"
+				icon={ <svg tabIndex="-1" width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M12.293 12.207L9 8.914l-3.293 3.293-1.414-1.414L9 6.086l4.707 4.707z" /></svg> }
 				tooltip={ __( 'Move Up' ) }
 				label={ getBlockMoverLabel(
 					uids.length,
@@ -49,7 +49,7 @@ export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, block
 			<IconButton
 				className="editor-block-mover__control"
 				onClick={ isLast ? null : onMoveDown }
-				icon="arrow-down-alt2"
+				icon={ <svg tabIndex="-1" width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M12.293 6.086L9 9.379 5.707 6.086 4.293 7.5 9 12.207 13.707 7.5z" /></svg> }
 				tooltip={ __( 'Move Down' ) }
 				label={ getBlockMoverLabel(
 					uids.length,
diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss
index 964b96d7bc6c00..e7c001ae04a9ef 100644
--- a/editor/components/block-mover/style.scss
+++ b/editor/components/block-mover/style.scss
@@ -20,15 +20,30 @@
 		margin-bottom: 4px;
 	}
 
-	&:not(:disabled):hover {
+	// unstyle inherited icon button styles
+	&:not(:disabled):hover,
+	&:not(:disabled):active,
+	&:not(:disabled):focus {
+		box-shadow: none;
+		color: inherit;
+	}
+
+	// apply styles to SVG directly
+	svg {
+		display: block;
+		position: relative; // Fixing the Safari bug for `<button>`s overflow
+		border-radius: 50%;
+	}
+
+	&:not(:disabled):hover svg {
 		@include button-style__hover;
 	}
 
-	&:not(:disabled):active {
+	&:not(:disabled):active svg {
 		@include button-style__active;
 	}
 
-	&:not(:disabled):focus {
+	&:not(:disabled):focus svg {
 		@include button-style__focus-active;
 	}
 }

From 73612cbab2eff5f08339a369f3860cb4e89114fb Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 23 Jan 2018 10:28:59 +0100
Subject: [PATCH 2/2] Adjust test to not look for the icon

The icon is now an SVG passed on
---
 editor/components/block-mover/test/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/editor/components/block-mover/test/index.js b/editor/components/block-mover/test/index.js
index f6f785b24b7e14..e3aded6ce6e535 100644
--- a/editor/components/block-mover/test/index.js
+++ b/editor/components/block-mover/test/index.js
@@ -32,14 +32,12 @@ describe( 'BlockMover', () => {
 			expect( moveUp.props() ).toMatchObject( {
 				className: 'editor-block-mover__control',
 				onClick: undefined,
-				icon: 'arrow-up-alt2',
 				label: 'Move 2 blocks from position 1 up by one place',
 				'aria-disabled': undefined,
 			} );
 			expect( moveDown.props() ).toMatchObject( {
 				className: 'editor-block-mover__control',
 				onClick: undefined,
-				icon: 'arrow-down-alt2',
 				label: 'Move 2 blocks from position 1 down by one place',
 				'aria-disabled': undefined,
 			} );