Images uploads: fix UI for multiple images (#3958)

* Fix spacing of images button in editor v1

* Fix wording for multiple images in editor

* Update JS tests

app/assets/stylesheets/preact/article-form.scss

@@ -48,7 +48,7 @@
   border: 1px solid darken($light-medium-gray, 5%);
   border: var(--theme-container-border, 1px solid darken($light-medium-gray, 5%));
   box-shadow: $bold-shadow;
-  box-shadow: var(--theme-container-box-shadow, $bold-shadow);   
+  box-shadow: var(--theme-container-box-shadow, $bold-shadow);
   border-radius: 3px;
 
   @media screen and (min-width: 500px) {
@@ -182,18 +182,18 @@
     height: 26px;
     margin-bottom: 0px;
     margin-top: -3px;
-    margin-bottom: 1px;  
+    margin-bottom: 1px;
     @media screen and (min-width: 600px) {
       height: 34px;
       margin-top: 0px;
-      margin-bottom: 4px;  
+      margin-bottom: 4px;
     }
   }
 }
 
 .articleform__titleTooLong {
   position: relative;
-  &::before { 
+  &::before {
     content: "Title Too Long";
     top: 5px;
     left: 5px;
@@ -274,7 +274,7 @@
     background: var(--theme-container-background-hover, lighten($green, 27%));
     color: $black;
     color: var(--theme-color, $black);
-  
+
   }
 }
 .articleform__tagoptionrow--active {
@@ -317,8 +317,8 @@
     vertical-align: -4px;
     display: inline-block;
     filter: invert(100);
-    filter: var(--theme-social-icon-invert, invert(0));  
-
+    filter: var(--theme-social-icon-invert, invert(0));
+    margin-right: 0.3rem;
   }
   &.articleform__detailsButton--moreconfig {
     margin-left: 5px;
@@ -384,7 +384,7 @@
     @media screen and (min-width: 600px) {
       font-size: 18px;
       min-height: calc(95vh - 280px);
-    }  
+    }
   }
 }
 
@@ -497,7 +497,7 @@
     white-space: nowrap;
     @media screen and (min-width: 430px) {
       margin-top: 16px;
-      margin-bottom: 16px;  
+      margin-bottom: 16px;
     }
     &:hover {
       background: lighten($green, 24%);
@@ -558,14 +558,14 @@
     input {
       cursor: pointer;
     }
-    
+
     #image-markdown-copy-link-input {
       margin-left: 24px;
     }
     #image-markdown-copy-link-announcer {
       display: block;
       padding-top: 10px;
-      
+
       &[hidden] {
         display: none;
       }

app/javascript/article-form/__tests__/__snapshots__/articleForm.test.jsx.snap

@@ -49,7 +49,7 @@ exports[`<ArticleForm /> renders properly 1`] = `
           type="button"
         >
           <img
-            alt="Upload an image"
+            alt="Upload images"
             src=""
           />
         </button>

app/javascript/article-form/articleForm.jsx

@@ -410,7 +410,7 @@ export default class ArticleForm extends Component {
                 onClick={this.toggleImageManagement}
                 type="button"
               >
-                <img src={ImageUploadIcon} alt="Upload an image" />
+                <img src={ImageUploadIcon} alt="Upload images" />
               </button>
               <button
                 className="articleform__detailsButton articleform__detailsButton--moreconfig"

app/javascript/article-form/elements/imageManagement.jsx

@@ -129,7 +129,7 @@ export default class ImageManagement extends Component {
     if (insertionImageUrls.length > 0) {
       insertionImageArea = (
         <div>
-          <h3>Markdown Image:</h3>
+          <h3>Markdown Images:</h3>
           <clipboard-copy
             onClick={this.copyText}
             for="image-markdown-copy-link-input"
@@ -149,7 +149,7 @@ export default class ImageManagement extends Component {
               Copied to Clipboard
             </span>
           </clipboard-copy>
-          <h3>Direct URL:</h3>
+          <h3>Direct URLs:</h3>
           <textarea
             id="image-direct-copy-link-input"
             value={this.linksToDirectForm(insertionImageUrls)}
@@ -171,14 +171,15 @@ export default class ImageManagement extends Component {
     if (version === 'v1') {
       imageOptions = (
         <div>
-          <h2>Upload an Image</h2>
+          <h2>Upload Images</h2>
           {insertionImageArea}
           <div>
             <p>
               <em>
-                To add a cover image for the post, add
+                To add a cover image for the post, add &nbsp;
                 <code>cover_image: direct_url_to_image.jpg</code>
-                to the frontmatter
+&nbsp; to the
+                frontmatter
               </em>
             </p>
           </div>