From 9abe33071427b6f1e749deec6dca53b857f52aaa Mon Sep 17 00:00:00 2001
From: djordje vlaisavljevic <dzvlais@gmail.com>
Date: Tue, 7 Dec 2021 15:39:36 +0100
Subject: [PATCH] Updated editor styles for product card

refs https://github.com/TryGhost/Team/issues/1245
---
 ghost/admin/app/styles/components/koenig.css  | 33 +++++++++++--------
 .../lib/koenig-editor/addon/options/cards.js  |  2 +-
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css
index b838efbfa9..01e9959d17 100644
--- a/ghost/admin/app/styles/components/koenig.css
+++ b/ghost/admin/app/styles/components/koenig.css
@@ -1745,6 +1745,10 @@ button.emoji-picker__category-button.active {
     padding: 20px;
 }
 
+.kg-product-card-image {
+    margin-bottom: 1.6rem;
+}
+
 .kg-product-card-trash-icon svg {
     width: 16px;
     height: 16px;
@@ -1764,32 +1768,33 @@ button.emoji-picker__category-button.active {
     width: 100%;
 }
 
-.kg-product-card-title {
+.kg-product-card-title, .kg-product-card-title h4 {
     text-decoration: none;
     color: #15171A;
     font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif;
-    font-weight: 700;
-    font-size: 1.9rem;
+    font-weight: 700 !important;
+    font-size: 1.9rem !important;
 }
 
 .kg-product-card-title ::after {
-    font-weight: 600 !important;
+    font-weight: 700 !important;
     font-size: 2rem !important;
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif;
     letter-spacing: .02rem;
-    line-height: 1.6em;
 }
 
 .kg-product-card-description, .kg-product-card-description p {
-    font-size: 16px !important;
+    font-size: 1.4rem !important;
+    line-height: 1.6em;
     font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif !important;
     color: #656E7A;
-    margin-top: 4px !important;
+    margin-top: 8px !important;
 }
 
 .kg-product-card-description ::after {
-    font-size: 2rem;
+    font-size: 1.4rem !important;
     line-height: 1.6em;
-    font-family: georgia, serif;
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif !important;
 }
 
 .kg-product-card-button {
@@ -1797,16 +1802,17 @@ button.emoji-picker__category-button.active {
     margin-top: 24px;
 }
 
-.kg-product-card-rating-star span {
+.kg-product-card-rating-star {
     display: flex;
     align-items: center;
     justify-content: center;
+    height: 2.4rem;
+    width: 2.4rem;
 }
 
 .kg-product-card-rating-star svg {
-    width: 1em;
-    height: 1em;
-    margin-right: 0.6em;
+    width: 16px;
+    height: 16px;
     fill: #fff;
 }
 
@@ -1817,6 +1823,7 @@ button.emoji-picker__category-button.active {
 .kg-product-card-rating-edit {
     background: none;
     display: flex;
+    align-items: center;
 }
 
 .kg-product-card-rating-preview {
diff --git a/ghost/admin/lib/koenig-editor/addon/options/cards.js b/ghost/admin/lib/koenig-editor/addon/options/cards.js
index 8711fc7e32..71ea04a866 100644
--- a/ghost/admin/lib/koenig-editor/addon/options/cards.js
+++ b/ghost/admin/lib/koenig-editor/addon/options/cards.js
@@ -233,7 +233,7 @@ export const CARD_MENU = [
         },
         {
             label: 'Product',
-            icon: 'koenig/kg-card-type-other',
+            icon: 'koenig/kg-card-type-product',
             desc: 'Add a product recommendation',
             matches: ['product'],
             type: 'card',