Added feature image indicator

ghost/admin/app/components/gh-editor-feature-image.hbs

@@ -1,5 +1,5 @@
 <div
-    class="gh-editor-feature-image"
+    class="gh-editor-feature-image-container"
     {{on "mouseover" (fn (mut this.isHovered) true)}}
     {{on "mouseleave" (fn (mut this.isHovered) false)}}
 >
@@ -21,7 +21,10 @@
             {{/each}}
         {{else if @image}}
             {{!-- image is present --}}
-            <div>
+            <div class="gh-editor-feature-image">
+                <span class="gh-editor-feature-image-indicator" data-tooltip="A feature image is publicly visible to anyone">
+                    {{svg-jar "feature-image"}}
+                </span>
                 <img src={{@image}}>
                 <button type="button" class="image-delete" title="Delete image" {{on "click" @clearImage}}>
                     {{svg-jar "trash"}}
@@ -31,8 +34,8 @@
                 {{#if this.isEditingAlt}}
                     <input
                         type="text"
-                        placeholder={{@altPlaceholder}}
-                        class="gh-editor-feature-image-alttext form-text bg-transparent"
+                        placeholder="Add alt text to the feature image"
+                        class="gh-editor-feature-image-alttext"
                         name="alt"
                         value={{@alt}}
                         {{autofocus}}
@@ -42,7 +45,7 @@
                     <KoenigBasicHtmlInput
                         @html={{@caption}}
                         @placeholder={{if this.captionInputFocused "" "Add a caption to the feature image"}}
-                        @class="w-100 bn form-text bg-transparent tracked-2"
+                        @class="gh-editor-feature-image-caption"
                         @name="caption"
                         @onChange={{@updateCaption}}
                         @onFocus={{fn (mut this.captionInputFocused) true}}

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

@@ -380,7 +380,7 @@
     margin: 0 auto;
 }
 
-.gh-editor-feature-image {
+.gh-editor-feature-image-container {
     position: relative;
     display: block;
     width: 100%;
@@ -391,7 +391,13 @@
     padding-bottom: 3.6rem;
 }
 
-.gh-editor-feature-image .gh-progress-container-progress {
+.gh-editor-feature-image {
+    margin-left: -1.2rem;
+    padding-left: 1.2rem;
+    border-left: 1px solid var(--whitegrey);
+}
+
+.gh-editor-feature-image-container .gh-progress-container-progress {
     width: 100%;
 }
 
@@ -438,15 +444,47 @@
     fill: var(--black);
 }
 
-.gh-editor-feature-image-alttext {
+.gh-editor-feature-image-indicator {
+    position: absolute;
+    top: 0;
+    height: 2.4rem;
+    margin-top: .4rem;
+    margin-left: -6rem;
+}
+
+.gh-editor-feature-image-indicator svg {
+    height: 2.4rem;
+}
+
+.gh-editor-feature-image-indicator svg path {
+    stroke: var(--midgrey-l2);
+}
+
+.gh-editor-feature-image-alttext,
+.gh-editor-feature-image-caption {
     width: 100%;
-    margin: 0 0 1.7em;
-    padding: 0;
+    margin: 0 0 1.7em -1.2rem;
+    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; 
+    background-color: transparent !important;
+    transition: border-color .15s linear;
+    -webkit-appearance: none;
+}
+
+.gh-editor-feature-image-alttext::placeholder,
+.gh-editor-feature-image-caption p::placeholder {
+    color: var(--midlightgrey);
+    opacity: 1 !important;
+}
+
+.gh-editor-feature-image-caption p {
+    margin: 0;
 }
 
 .gh-editor-title {

ghost/admin/public/assets/icons/feature-image.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21.01 2.253h-18a1.5 1.5 0 00-1.5 1.5v16.5a1.5 1.5 0 001.5 1.5h18a1.5 1.5 0 001.5-1.5v-16.5a1.5 1.5 0 00-1.5-1.5zM1.51 5.753h21" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 18.5L8.5 14l2.5 2 3.8-4.5 4.2 7H5zM10.25 12a1.25 1.25 0 100-2.5 1.25 1.25 0 000 2.5z" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>