From 81bfc3c6f6738ea4d5660621b3b1acf5e7e4c03f Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 21 Jun 2021 16:27:09 +0200
Subject: [PATCH] Updated feature image button in editor

---
 .../components/gh-editor-feature-image.hbs    |  2 +-
 ghost/admin/app/styles/layouts/editor.css     | 21 +++++++++++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/gh-editor-feature-image.hbs b/ghost/admin/app/components/gh-editor-feature-image.hbs
index aed2800ec6..5ccb2e4adb 100644
--- a/ghost/admin/app/components/gh-editor-feature-image.hbs
+++ b/ghost/admin/app/components/gh-editor-feature-image.hbs
@@ -60,7 +60,7 @@
         {{else}}
             {{!-- no-image state --}}
             <div class="flex flex-row items-center {{if this.hideButton "invisible"}}">
-                <button type="button" class="gh-editor-feature-image-add-button" {{on "click" uploader.triggerFileDialog}}>+ Add feature image</button>
+                <button type="button" class="gh-editor-feature-image-add-button" {{on "click" uploader.triggerFileDialog}}>{{svg-jar "plus"}}<span>Add feature image</span></button>
                 {{#if this.isHovered}}
                     <button type="button" class="gh-editor-feature-image-unsplash" {{on "click" this.toggleUnsplashSelector}}>{{svg-jar "unsplash"}}</button>
                 {{/if}}
diff --git a/ghost/admin/app/styles/layouts/editor.css b/ghost/admin/app/styles/layouts/editor.css
index 749422a0c0..1c69532137 100644
--- a/ghost/admin/app/styles/layouts/editor.css
+++ b/ghost/admin/app/styles/layouts/editor.css
@@ -396,14 +396,31 @@
 }
 
 .gh-editor-feature-image-add-button {
+    display: flex;
+    align-items: center;
     color: var(--midgrey-d1);
     font-size: 1.4rem;
-    font-weight: 500;
+    font-weight: 400;
     letter-spacing: .2px;
 }
 
 .gh-editor-feature-image-add-button:hover {
-    color: var(--green-d1);
+    color: var(--darkgrey-l2);
+}
+
+.gh-editor-feature-image-add-button svg {
+    width: 12px;
+    height: auto;
+    margin-right: 6px;
+}
+
+.gh-editor-feature-image-add-button svg path {
+    stroke: var(--midgrey-d1);
+    stroke-width: 2;
+}
+
+.gh-editor-feature-image-add-button:hover svg path {
+    stroke: var(--darkgrey-l2);
 }
 
 .gh-editor-feature-image-unsplash {