Styled new row layout of the cardmenu

No issue

- Adjusted menu width and height
- Improved spacing cards
- Changed font styling
- Added snippet icons

ghost/admin/app/styles/spirit/_koenig.css

@@ -856,8 +856,9 @@
 
 /* Chrome has a bug with its scrollbars on this element which has been reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=697381 */
 .koenig-cardmenu {
-    width: 272px;
+    width: 312px;
-    max-height: 580px;
+    max-height: 440px;
+    padding-top: 0;
     background-clip: padding-box;
     z-index: 9999999; /* have to compete with codemirror */
     left: -16px;
@@ -895,7 +896,6 @@
     box-sizing: border-box;
     border: 1px solid var(--whitegrey);
     background: var(--white);
-    border-radius: 5px;
 }
 
 .koenig-editor__editor .kg-bookmark-container {

ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs

@@ -1,13 +1,13 @@
 {{#each @itemSections as |section sectionIndex|}}
     {{#if section.items}}
         {{#if (or (not section.developerExperiment) (enable-developer-experiments))}}
-            <div class="flex flex-column justify-center h5 {{unless (eq sectionIndex 0) "mt4"}} mb3 nl4 nr4 pl4 pr4 bg-whitegrey midlightgrey ttu f-supersmall fw4 tracked-3" style="min-width: calc(100% + 3.2rem);">
+            <div class="flex flex-column justify-center {{unless (eq sectionIndex 0) "mt3"}} mb2 pl4 pr4 pt3 midlightgrey ttu f-supersmall fw5 tracked-3" style="min-width: calc(100% - 3.2rem); {{unless (eq sectionIndex 0) "border-top: 1px solid #e5eff5;"}}">
                 {{section.title}}
             </div>
             {{#each section.items as |item|}}
                 {{#if (or (not item.developerExperiment) (enable-developer-experiments))}}
                     <div class="{{if (eq item @selectedItem) "kg-cardmenu-card-selected"}} {{kg-style "cardmenu-card"}}" {{on "click" (fn @itemClicked item)}} data-kg="cardmenu-card" role="menuitem">
-                        <div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w6 h6"}}</div>
+                        <div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w7 h7"}}</div>
                         <div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
                     </div>
                 {{/if}}

ghost/admin/lib/koenig-editor/addon/components/koenig-plus-menu.js

@@ -50,7 +50,7 @@ export default Component.extend({
             snippets.forEach((snippet) => {
                 snippetsSection.items.push({
                     label: snippet.name,
-                    icon: 'koenig/kg-card-type-bookmark',
+                    icon: 'koenig/kg-card-type-snippet-text',
                     type: 'snippet',
                     matches: [snippet.name.toLowerCase()]
                 });

ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js

@@ -69,7 +69,7 @@ export default class KoenigSlashMenuComponent extends Component {
             snippets.forEach((snippet) => {
                 snippetsSection.items.push({
                     label: snippet.name,
-                    icon: 'koenig/kg-card-type-bookmark',
+                    icon: 'koenig/kg-card-type-snippet-text',
                     type: 'snippet',
                     matches: [snippet.name.toLowerCase()]
                 });

ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js

@@ -9,11 +9,11 @@ export function kgStyle([style], options) {
     switch (style) {
     // Card menu
     case 'cardmenu':
-        cssClass = 'koenig-cardmenu absolute top-0 flex flex-column mt0 mr0 mb3 ml0 pa4 overflow-y-auto bg-white br3 shadow-3 ttn f7 normal';
+        cssClass = 'koenig-cardmenu absolute top-0 flex flex-column mt0 mr0 mb3 ml0 pb4 overflow-y-auto bg-white br3 shadow-3 ttn f7 normal';
         break;
 
     case 'cardmenu-card':
-        cssClass = 'flex items-center h19 br3 midgrey ba b--transparent hover-darkgrey kg-cardmenu-card-hover pt1 anim-fast';
+        cssClass = 'flex items-center middarkgrey ba b--transparent hover-darkgrey kg-cardmenu-card-hover pl4 pr4 pt2 pb2 anim-fast';
         break;
 
     case 'cardmenu-icon':
@@ -21,7 +21,7 @@ export function kgStyle([style], options) {
         break;
 
     case 'cardmenu-label':
-        cssClass = 'f-supersmall tracked-1 fw3 ma0 ml2';
+        cssClass = 'f-7 tracked-1 fw4 ma0 ml4';
         break;
 
     // Container cards

ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-block-hover.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#FFF"/>
+    <path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
+    <rect x="5.25" y="4.5" width="13.5" height="7.5" rx="1" fill="#3EB0EF"/>
+</svg>

ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-block.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
+    <path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
+    <rect x="5.25" y="4.5" width="13.5" height="7.5" rx="1" fill="#3EB0EF"/>
+</svg>

ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-combination-hover.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#FFF"/>
+    <rect x="5.25" y="4.5" width="13.5" height="4.5" rx="1" fill="#3EB0EF"/>
+    <path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
+    <rect x="5.25" y="11.25" width="8.25" height="1.5" rx=".75" fill="#738A94"/>
+</svg>

ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-combination.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
+    <rect x="5.25" y="4.5" width="13.5" height="4.5" rx="1" fill="#3EB0EF"/>
+    <path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
+    <rect x="5.25" y="11.25" width="8.25" height="1.5" rx=".75" fill="#738A94"/>
+</svg>

ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-text-hover.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#FFF"/>
+<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
+<rect x="5.25" y="4.5" width="10.5" height="1.5" rx=".75" fill="#738A94"/>
+<rect x="5.25" y="8.25" width="13.5" height="1.5" rx=".75" fill="#738A94"/>
+<rect x="5.25" y="12" width="7.5" height="1.5" rx=".75" fill="#738A94"/>
+</svg>

ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-text.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
+<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
+<rect x="5.25" y="4.5" width="10.5" height="1.5" rx=".75" fill="#738A94"/>
+<rect x="5.25" y="8.25" width="13.5" height="1.5" rx=".75" fill="#738A94"/>
+<rect x="5.25" y="12" width="7.5" height="1.5" rx=".75" fill="#738A94"/>
+</svg>