From d6f7e55f5eee1b1fd31842d6f32e5ac853398e1b Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 15 Dec 2021 17:45:04 +0100
Subject: [PATCH] Updated file card Koenig styles

---
 app/styles/components/koenig.css              | 36 +++++++++++++------
 .../addon/components/koenig-card-file.hbs     |  2 +-
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/app/styles/components/koenig.css b/app/styles/components/koenig.css
index c020e17a7..0114c8488 100644
--- a/app/styles/components/koenig.css
+++ b/app/styles/components/koenig.css
@@ -2279,8 +2279,8 @@ button.emoji-picker__category-button.active {
 .kg-upload-title,
 .kg-upload-caption {
     width: 100%;
-    margin: 8px 4px 0;
-    padding: 8px 12px;
+    margin: 4px 4px 0;
+    padding: 4px 12px;
     border: none;
     font-size: 1.8rem;
     font-weight: 700;
@@ -2297,7 +2297,7 @@ button.emoji-picker__category-button.active {
 }
 
 .kg-upload-caption {
-    font-size: 1.4rem;
+    font-size: 1.6rem;
     font-weight: 500;
     color: var(--midgrey);
     margin-top: 4px;
@@ -2305,7 +2305,7 @@ button.emoji-picker__category-button.active {
 
 .kg-upload-metadata {
     line-height: 1em;
-    margin: 0 16px 14px;
+    margin: 0 16px 4px;
     font-size: 1.4rem;
     font-weight: 500;
 }
@@ -2438,29 +2438,35 @@ button.emoji-picker__category-button.active {
 .kg-file-data-container {
     position: relative;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     flex-direction: column;
     width: 100%;
+    align-items: stretch;
+    margin: 6px 0;
 }
 
 .kg-file-data-container .kg-upload-title {
-    padding-top: 4px;
-    padding-bottom: 0px;
     height: 30px;
-    margin-bottom: 2px;
+    padding-top: 0;
+    padding-bottom: 0px;
+    margin-bottom: 0;
+    margin-top: 0;
 }
 
 .kg-file-data-container .kg-upload-caption {
-    padding-top: 0;
-    height: 26px;
-    margin-top: 0px;
     font-weight: 400;
+    height: 26px;
+    padding-top: 0;
 }
 
 .kg-file-data-container .kg-file-card-caption {
     margin-top: 0;
 }
 
+.kg-file-data-container .kg-upload-title + .kg-upload-caption {
+    margin-top: -2px;
+}
+
 .kg-file-card .kg-media-container {
     order: 2;
 }
@@ -2479,6 +2485,10 @@ button.emoji-picker__category-button.active {
     margin-bottom: 0;
 }
 
+.kg-file-card .kg-upload-container.medium .kg-file-data-container {
+    padding: 8px 0;
+}
+
 .kg-file-card .kg-upload-container.medium .kg-upload-title {
     margin-top: -4px;
     padding-top: 0;
@@ -2502,6 +2512,10 @@ button.emoji-picker__category-button.active {
     height: 20px;
 }
 
+.kg-file-card .kg-upload-container.small .kg-file-data-container {
+    justify-content: center;
+}
+
 /* Video card
 /* --------------------------------------------------------------- */
 
diff --git a/lib/koenig-editor/addon/components/koenig-card-file.hbs b/lib/koenig-editor/addon/components/koenig-card-file.hbs
index 98976e218..e12e2ee1c 100644
--- a/lib/koenig-editor/addon/components/koenig-card-file.hbs
+++ b/lib/koenig-editor/addon/components/koenig-card-file.hbs
@@ -42,7 +42,7 @@
                     <GhTextInput
                         @value={{@payload.fileCaption}}
                         @input={{action "setFileCaption" value="target.value"}}
-                        @placeholder="File caption"
+                        @placeholder="Add optional file description"
                         @class="kg-upload-caption  {{if (and (not @isEditing) (not @payload.fileCaption)) "hide"}}"
                         @maxlength="100"
                     />