From ef44f7060d88249b47ed1acb33552c0b2c92ba52 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 23 Jun 2017 19:48:03 +0200
Subject: [PATCH 1/3] Add some missing focus style. Restyle the mode switcher
 select.

---
 editor/assets/stylesheets/_z-index.scss |  1 -
 editor/header/mode-switcher/index.js    |  1 +
 editor/header/mode-switcher/style.scss  | 32 ++++++++++++++-----------
 editor/header/saved-state/style.scss    |  1 -
 editor/sidebar/post-trash/index.js      |  2 +-
 editor/sidebar/post-trash/style.scss    | 18 ++++++--------
 6 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
index 39c610e1f57f63..24683bbbf42f01 100644
--- a/editor/assets/stylesheets/_z-index.scss
+++ b/editor/assets/stylesheets/_z-index.scss
@@ -3,7 +3,6 @@
 // value is designed to work with).
 
 $z-layers: (
-	'.editor-mode-switcher .dashicon': -1,
 	'.editor-block-switcher__arrow': 1,
 	'.editor-visual-editor__block:before': -1,
 	'.editor-visual-editor__block {core/image aligned left or right}': 10,
diff --git a/editor/header/mode-switcher/index.js b/editor/header/mode-switcher/index.js
index a5af46d452ab6b..579ae41fed261a 100644
--- a/editor/header/mode-switcher/index.js
+++ b/editor/header/mode-switcher/index.js
@@ -40,6 +40,7 @@ function ModeSwitcher( { mode, onSwitch } ) {
 	/* eslint-disable jsx-a11y/no-onchange */
 	return (
 		<div className="editor-mode-switcher">
+			<label className="screen-reader-text">{ __( 'Change editor mode' ) }</label>
 			<select
 				value={ mode }
 				onChange={ ( event ) => onSwitch( event.target.value ) }
diff --git a/editor/header/mode-switcher/style.scss b/editor/header/mode-switcher/style.scss
index 73ca347bcc97df..9894cea84f8291 100644
--- a/editor/header/mode-switcher/style.scss
+++ b/editor/header/mode-switcher/style.scss
@@ -14,35 +14,39 @@
 		background: transparent;
 		line-height: 1;
 		border: 0;
-		border-radius: 0;
-		-webkit-appearance: none;
-		outline: none;
+		border-radius: 4px;
+		appearance: none;
 		cursor: pointer;
 		box-shadow: none;
-		padding-right: 0;
+		padding: 10px 8px;
 		font-size: $default-font-size;
+		line-height: 16px;
 		height: auto;
 
+		/* IE10+ */
+		&::-ms-expand {
+			display: none;
+		}
+
 		@include break-small {
-			padding-right: 24px;
+			padding-right: 26px;
+		}
+
+		&:focus {
+			outline: none;
+			box-shadow: 0 0 0 1px $blue-medium-400, 0 0 2px 1px $blue-medium-400;
 		}
 	}
 
 	.dashicon {
 		position: relative;
-		z-index: z-index( '.editor-mode-switcher .dashicon' );
-		margin-left: -24px;
-		margin-top: -1px;
-
+		left: -26px;
+		margin-right: -20px;
+		pointer-events: none;
 		display: none;
 
 		@include break-small {
 			display: block;
 		}
 	}
-
-	&:hover,
-	select:hover {
-		color: $dark-gray-900;
-	}
 }
diff --git a/editor/header/saved-state/style.scss b/editor/header/saved-state/style.scss
index 4727e4cc631c8a..658eabe9dd62af 100644
--- a/editor/header/saved-state/style.scss
+++ b/editor/header/saved-state/style.scss
@@ -13,7 +13,6 @@
 		color: $blue-wordpress;
 
 		&:focus {
-			box-shadow: none;
 			outline: none;
 		}
 
diff --git a/editor/sidebar/post-trash/index.js b/editor/sidebar/post-trash/index.js
index 938c9ea35b3dfd..3581e66b14730f 100644
--- a/editor/sidebar/post-trash/index.js
+++ b/editor/sidebar/post-trash/index.js
@@ -24,7 +24,7 @@ function PostTrash( { postId, postType, ...props } ) {
 	const onClick = () => props.trashPost( postId, postType );
 
 	return (
-		<Button className="editor-post-trash" onClick={ onClick }>
+		<Button className="editor-post-trash button-link button-link-delete" onClick={ onClick }>
 			{ __( 'Move to trash' ) }
 			<Dashicon icon="trash" />
 		</Button>
diff --git a/editor/sidebar/post-trash/style.scss b/editor/sidebar/post-trash/style.scss
index 86a55e049395f7..7f514c90a903cc 100644
--- a/editor/sidebar/post-trash/style.scss
+++ b/editor/sidebar/post-trash/style.scss
@@ -1,14 +1,10 @@
 .editor-post-trash {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	cursor: pointer;
-	color: inherit;
-	flex-grow: 1;
-	color: $alert-red;
-	
+	margin-left: auto !important;
+	text-decoration: underline;
+
 	.dashicon {
-		margin-right: -10px;
-		margin-left: 10px;
+		display: inline-block;
+		vertical-align: middle;
+		margin: -3px -4px 0 10px;
 	}
-}
\ No newline at end of file
+}

From 5465e6f7a66bd206d05d05d4ff4836edaa0331b0 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 23 Jun 2017 19:52:04 +0200
Subject: [PATCH 2/3] Propery associate the mode switcher label.

---
 editor/header/mode-switcher/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/editor/header/mode-switcher/index.js b/editor/header/mode-switcher/index.js
index 579ae41fed261a..db850a2ffccddd 100644
--- a/editor/header/mode-switcher/index.js
+++ b/editor/header/mode-switcher/index.js
@@ -40,11 +40,12 @@ function ModeSwitcher( { mode, onSwitch } ) {
 	/* eslint-disable jsx-a11y/no-onchange */
 	return (
 		<div className="editor-mode-switcher">
-			<label className="screen-reader-text">{ __( 'Change editor mode' ) }</label>
+			<label htmlFor="editor-mode-switcher__input" className="screen-reader-text">{ __( 'Change editor mode' ) }</label>
 			<select
 				value={ mode }
 				onChange={ ( event ) => onSwitch( event.target.value ) }
 				className="editor-mode-switcher__input"
+				id="editor-mode-switcher__input"
 			>
 				{ MODES.map( ( { value, label } ) =>
 					<option key={ value } value={ value }>

From 468f9bc00899e31295cad295f15024f7b4064c53 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Sat, 22 Jul 2017 11:38:28 +0200
Subject: [PATCH 3/3] Improve undo redo icons horizontal alignment.

---
 editor/header/tools/style.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/editor/header/tools/style.scss b/editor/header/tools/style.scss
index 8c312599c1d238..86efd1bb2db969 100644
--- a/editor/header/tools/style.scss
+++ b/editor/header/tools/style.scss
@@ -19,6 +19,13 @@
 	@include break-medium() {
 		margin-right: 4px;
 	}
+
+	@include break-mobile {
+		&.dashicons-undo,
+		&.dashicons-redo {
+			margin-right: 0;
+		}
+	}
 }
 
 .editor-tools__tabs {