From 6df5708c7fa47cfc2462e606a4c43ee8ee2fe8a6 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 13 Dec 2021 19:08:55 +0100
Subject: [PATCH] Refined audio and bookmark cards in editor

Refs https://github.com/TryGhost/Team/issues/1230
---
 ghost/admin/app/styles/components/koenig.css  | 25 ++++++++++++++++---
 .../addon/components/koenig-card-audio.hbs    | 19 +++++++-------
 .../addon/components/koenig-card-bookmark.hbs |  2 +-
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css
index c59fa0825d..3a3f0a927d 100644
--- a/ghost/admin/app/styles/components/koenig.css
+++ b/ghost/admin/app/styles/components/koenig.css
@@ -1169,9 +1169,9 @@
 .kg-bookmark-card {
     width: 100%;
     box-sizing: border-box;
-    border: 1px solid var(--whitegrey);
+    border: 1px solid rgba(124, 139, 154, 0.25);
     background: var(--white);
-    border-radius: 4px;
+    border-radius: var(--border-radius);
 }
 
 .kg-bookmark-container {
@@ -1228,8 +1228,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
+    border-radius: 0 2px 2px 0;
 }
 
 .kg-bookmark-metadata {
@@ -2069,6 +2068,24 @@ button.emoji-picker__category-button.active {
     opacity: .6;
 }
 
+.kg-upload-button .kg-audio-upload-icon {
+    width: 24px;
+    height: 24px;
+    transition: var(--animation-speed-fast) ease-out;
+    transform: scale(1.0);
+}
+
+.kg-upload-button .kg-audio-upload-icon path {
+    stroke: var(--white);
+    stroke-width: 1.5;
+}
+
+.kg-upload-button:hover .kg-audio-upload-icon {
+    width: 24px;
+    height: 24px;
+    transform: scale(1.06);
+}
+
 .kg-upload-button img {
     width: 100%;
     height: 100%;
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs
index 33b7eb5af3..8f74d5c507 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs
@@ -79,16 +79,15 @@
                                 </div>
                             </div>
                         {{else}}
-                            <button class="kg-upload-button">
-                                {{svg-jar "audio-file" class="kg-audio-icon"}}
-                                <div class="image-overlay">
-                                    <div class="flex flex-row-reverse">
-                                        <button class="bg-white-90 br3 pe-auto" {{on "click" this.triggerThumbnailFileDialog}}>
-                                            {{svg-jar "upload" class="koenig-audio-upload-icon"}}
-                                        </button>
-                                    </div>
-                                </div>
-                            </button>
+                            {{#if @isEditing}}
+                                <button class="kg-upload-button pointer" {{on "click" this.triggerThumbnailFileDialog}}>
+                                    {{svg-jar "upload" class="kg-audio-upload-icon"}}
+                                </button>
+                            {{else}}
+                                <button class="kg-upload-button">
+                                    {{svg-jar "audio-file" class="kg-audio-icon"}}
+                                </button>
+                            {{/if}}
                         {{/if}}
                     {{/if}}
                     <div style="display:none">
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-bookmark.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-bookmark.hbs
index d35d3cca6e..9c9702f04f 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-bookmark.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-bookmark.hbs
@@ -17,7 +17,7 @@
     as |card|
 >
     {{#if this.payload.metadata}}
-        <div class="kg-card-hover">
+        <div class="ba b--transparent relative kg-card kg-card-hover">
             <div class="koenig-embed-{{this.payload.type}} flex justify-center relative" data-kg-embed>
                 {{!-- <iframe class="bn miw-100" scrolling="no"></iframe> --}}
                 <figure class="kg-card kg-bookmark-card also-new-tag">