From c2333a68bda3dada747efe31441b91eb1c57b646 Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Wed, 19 Jun 2019 18:09:28 +0200
Subject: [PATCH] Masterbar: style Recovery mode button (#12485)

The button was added in #12467.
This commit styles it so:
- It looks similar to the core Recovery mode button when seeing the default Masterbar.
- It uses the Calypso colors when the Masterbar is loaded by a user using Calypsoify
---
 modules/calypsoify/_colors.scss |  1 +
 modules/calypsoify/style.scss   |  4 ++++
 modules/masterbar/overrides.css | 10 ++++++++++
 3 files changed, 15 insertions(+)

diff --git a/modules/calypsoify/_colors.scss b/modules/calypsoify/_colors.scss
index 8635e55dd18a7..8b6329e7807a5 100644
--- a/modules/calypsoify/_colors.scss
+++ b/modules/calypsoify/_colors.scss
@@ -50,6 +50,7 @@ $gray-darken-30: $muriel-gray-600;
 
 // Alerts
 $alert-yellow:           $muriel-hot-yellow-400;
+$alert-orange:           $muriel-hot-orange-500;
 $alert-red:              $muriel-hot-red-400;
 $alert-green:            $muriel-hot-green-400;
 $alert-purple:           $muriel-hot-purple-400;
diff --git a/modules/calypsoify/style.scss b/modules/calypsoify/style.scss
index 3484e57b08cb8..8eccf7d34ff42 100644
--- a/modules/calypsoify/style.scss
+++ b/modules/calypsoify/style.scss
@@ -542,6 +542,10 @@ body,
 		font-size: 24px;
 		line-height: 1.45;
 	}
+
+	li#wp-admin-bar-recovery-mode {
+		background-color: $alert-orange !important;
+	}
 }
 
 /* WP Admin UI Mods */
diff --git a/modules/masterbar/overrides.css b/modules/masterbar/overrides.css
index aadbe9abfc1a4..d6a09be0decd4 100644
--- a/modules/masterbar/overrides.css
+++ b/modules/masterbar/overrides.css
@@ -75,6 +75,12 @@
 	font-size: 28px;
 }
 
+.jetpack-masterbar #wpadminbar #wp-admin-bar-recovery-mode {
+	background-color: #ca4a1f;
+	color: #fff;
+	margin-right: 1em;
+}
+
 @media screen and (max-width: 480px) {
 	.jetpack-masterbar.post-new-php.block-editor-page #wp-toolbar ul li {
 		flex: 1;
@@ -119,4 +125,8 @@
 	.jetpack-masterbar.post-new-php.block-editor-page #wpadminbar li#wp-admin-bar-newdash {
 		order: 3;
 	}
+
+	.jetpack-masterbar #wpadminbar #wp-admin-bar-recovery-mode {
+		display: none;
+	}
 }