From 804230c9345594cc121a943bf2030d35926691bd Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Sat, 16 Mar 2019 13:01:23 +0100
Subject: [PATCH 1/2] Refactor the Settings button CSS.

---
 .../src/components/header/style.scss          | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 6676d35676b7d2..9cbda14824125c 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -68,26 +68,16 @@
 	// Header toggle buttons.
 	&.is-toggled {
 		color: $white;
-	}
-
-	// Put the gray background on a separate layer, so as to match the size of the publish button (34px).
-	&.is-toggled::before {
-		content: "";
-		border-radius: $radius-round-rectangle;
-		position: absolute;
-		z-index: -1;
 		background: $dark-gray-500;
-		top: 1px;
-		right: 1px;
-		bottom: 1px;
-		left: 1px;
+		box-shadow: inset 0 0 0 $border-width $white;
 	}
 
+	// The !important in this ruleset need to override the pile of :not() selectors used in the icon-button.
 	&.is-toggled:hover,
 	&.is-toggled:focus {
-		box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white;
-		color: $white;
-		background: $dark-gray-500;
+		box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white !important;
+		color: $white !important;
+		background: $dark-gray-500 !important;
 	}
 
 	// Make editor header bar buttons bigger to match IconButtons.

From 99200e42eb04dbef09cd032aa1a3f8ab476d2b34 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 21 Mar 2019 09:41:43 +0100
Subject: [PATCH 2/2] Remove box-shadow use padding and margin.

---
 packages/edit-post/src/components/header/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 9cbda14824125c..2cebe45d53f7c0 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -69,7 +69,8 @@
 	&.is-toggled {
 		color: $white;
 		background: $dark-gray-500;
-		box-shadow: inset 0 0 0 $border-width $white;
+		margin: 1px;
+		padding: 7px;
 	}
 
 	// The !important in this ruleset need to override the pile of :not() selectors used in the icon-button.