Updated email CTA card

Refs https://github.com/TryGhost/Team/issues/928
- Added icons for top and bottom border
- Updated spacing for hr element when not in edit mode
- Got rid of hr element when in edit mode
- Got rid of left border for email, html and markdown cards and feature image

ghost/admin/app/styles/layouts/editor.css

@@ -446,12 +446,6 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
     height: 4px;
 }
 
-.gh-editor-feature-image {
-    margin-left: -1.2rem;
-    padding-left: 1.2rem;
-    border-left: 1px solid var(--whitegrey);
-}
-
 .gh-editor-feature-image .image-delete {
     opacity: 0;
 }
@@ -521,12 +515,10 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
 .gh-editor-feature-image-alttext,
 .gh-editor-feature-image-caption {
     width: 100%;
-    margin: 0 0 1.7em -1.2rem;
+    margin: 0 0 1.7em 0;
-    padding: 0 0 0 1.2rem;
     outline: none;
     border-width: 0;
     border-style: none;
-    border-left: 1px solid var(--whitegrey);
     font-size: 1.4rem;
     line-height: 1.65;
     letter-spacing: .04rem;
@@ -977,6 +969,19 @@ figure {
 
 /* Email-CTA card
 /* -------------------------------------------------------------------------- */
+
+.kg-email-card .border-top {
+    margin: -1.6rem 0 2.4rem;
+}
+
+.kg-email-card .border-bottom {
+    margin: 2.4rem 0 1rem;
+}
+
+.kg-email-card.no-border {
+    border-left: none;
+}
+
 .email-cta-button-text-input {
     margin-right: 1.2rem;
     padding: 4px;
@@ -1037,7 +1042,7 @@ figure {
 }
 
 .gh-email-cta-segment-indicator p {
-    padding: 6px 0 24px !important;
+    padding: 4px 0 24px !important;
     color: var(--midgrey);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size: 1.4rem;

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

@@ -4,10 +4,6 @@
 
 /* Action bar */
 
-.kg-card-left-border {
-    border-left-color: var(--lightgrey-d1);
-}
-
 .kg-action-bar {
     background: var(--whitegrey-l2);
     border: 1px solid var(--whitegrey-l2);

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

@@ -689,9 +689,6 @@
 /*
 /* Styles that extend Spirit classes.
 /* -------------------------------------------------------------------- */
-.kg-card-left-border {
-    border-left-color: var(--whitegrey);
-}
 
 .kg-card-hover:hover {
     box-shadow: 0 0 0 1px var(--green);

ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs

@@ -20,7 +20,6 @@
     as |card|
 >
     {{#if @isEditing}}
-        {{#if this.hasTopDivider}}<hr>{{/if}}
 
         <div class="kg-card-help kg-card-help-labs">
             <p>
@@ -91,7 +90,7 @@
             <p>{{capitalize this.selectedSegment.name}}</p>
         </div>
 
-        {{#if this.hasTopDivider}}<hr>{{/if}}
+        {{#if this.hasTopDivider}}<hr class="border-top">{{/if}}
 
         {{#if @payload.html}}
             <div class="relative">
@@ -103,7 +102,10 @@
         {{#if (and @payload.buttonText @payload.buttonUrl)}}
             <div class="{{if @payload.html "mt6"}} {{if (eq @payload.buttonAlignment "center") "tc"}}"><a class="gh-btn gh-btn-accent" href="javascript:void(0)" data-tooltip={{@payload.buttonUrl}}><span>{{@payload.buttonText}}</span></a></div>
         {{/if}}
+
+        {{#if this.hasBottomDivider}}<hr class="border-bottom">{{/if}}
+
     {{/if}}
 
-    {{#if this.hasBottomDivider}}<hr>{{/if}}
+
 </KoenigCard>

ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js

@@ -48,12 +48,12 @@ export default class KoenigCardEmailCtaComponent extends Component {
         return {
             items: [{
                 title: 'Top divider',
-                icon: 'koenig/kg-img-regular',
+                icon: 'koenig/kg-cta-bordertop',
                 iconClass: this.hasTopDivider ? 'fill-green-l2' : 'fill-white',
                 action: run.bind(this, this.toggleDivider, 'top')
             }, {
                 title: 'Bottom divider',
-                icon: 'koenig/kg-img-regular',
+                icon: 'koenig/kg-cta-borderbottom',
                 iconClass: this.hasBottomDivider ? 'fill-green-l2' : 'fill-white',
                 action: run.bind(this, this.toggleDivider, 'bottom')
             }, {

ghost/admin/lib/koenig-editor/addon/components/koenig-card.hbs

@@ -24,7 +24,7 @@
         <KgActionBar @class="absolute" @style={{this.toolbarStyle}} @isVisible={{this.shouldShowToolbar}} @instantClose={{this.koenigUi.inputHasFocus}}>
             {{#each this.toolbar.items as |item|}}
                 {{#if item.divider}}
-                    <li class="ma0 kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
+                    <li class="ma0 ml1 mr1 kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
                 {{else}}
                     <li class="ma0 lh-solid">
                         <button
@@ -41,7 +41,7 @@
 
             {{#if showSnippetIcon}}
                 {{#if this.toolbar.items}}
-                    <li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
+                    <li class="ma0 ml1 mr1 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
                 {{/if}}
                 <li class="ma0 lh-solid">
                     <button

ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.hbs

@@ -42,7 +42,7 @@
         </li>
     {{/unless}}
 
-    <li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
+    <li class="ma0 ml1 mr1 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
 
     {{#unless this.basicOnly}}
         <li class="ma0 lh-solid">
@@ -69,7 +69,7 @@
 
     {{#if @addSnippet}}
         {{#unless this.basicOnly}}
-            <li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
+            <li class="ma0 ml1 mr1 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
             <li class="ma0 lh-solid">
                 <button
                     type="button"

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

@@ -4,7 +4,7 @@ export function kgStyle([style], options) {
     let cssClass = '';
 
     let pFontStyle = 'f3 fw3 lh-copy tracked-1 serif';
-    let cardBorderStyle = 'pb2 pl3 nl3 pr3 nr3 ba b--white relative kg-card-left-border kg-card-hover';
+    let cardBorderStyle = 'pb2 pl3 nl3 pr3 nr3 ba b--white relative kg-card-hover';
 
     switch (style) {
     // Card menu

ghost/admin/lib/koenig-editor/public/icons/koenig/kg-cta-borderbottom.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 2h12c.265 0 .52.14.707.39.188.25.293.59.293.943v5.334c0 .353-.105.693-.293.943-.187.25-.442.39-.707.39H2c-.265 0-.52-.14-.707-.39A1.586 1.586 0 011 8.667V3.333c0-.353.105-.693.293-.943C1.48 2.14 1.735 2 2 2z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15 13a1 1 0 01-1 1H2a1 1 0 110-2h12a1 1 0 011 1z"/>
+</svg>

ghost/admin/lib/koenig-editor/public/icons/koenig/kg-cta-bordertop.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 6h12c.265 0 .52.14.707.39.188.25.293.59.293.943v5.334c0 .354-.105.693-.293.943-.187.25-.442.39-.707.39H2c-.265 0-.52-.14-.707-.39A1.586 1.586 0 011 12.667V7.333c0-.353.105-.693.293-.943C1.48 6.14 1.735 6 2 6z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15 3a1 1 0 01-1 1H2a1 1 0 010-2h12a1 1 0 011 1z"/>
+</svg>