UX: style fixes for admin digest email preview page (#7959)

UX: style fixes for admin digest email preview page (#7959)

  • code formatting: Nothing changed in this commit except code formatting

  • adds classes to digest refresh button

  • adds margins to digest refresh button

  • removes line break tags and uses CSS margins instead

diff --git a/app/assets/javascripts/admin/templates/email-preview-digest.hbs b/app/assets/javascripts/admin/templates/email-preview-digest.hbs
index 70fe22a..32df5b0 100644
--- a/app/assets/javascripts/admin/templates/email-preview-digest.hbs
+++ b/app/assets/javascripts/admin/templates/email-preview-digest.hbs
@@ -6,13 +6,15 @@
     {{date-picker-past value=lastSeen id="last-seen"}}
     <label>{{i18n 'admin.email.user'}}:</label>
     {{user-selector single="true" usernames=username canReceiveUpdates="true"}}
-    <button class='btn' {{action "refresh"}}>{{i18n 'admin.email.refresh'}}</button>
+    <button class='btn btn-primary digest-refresh-button' {{action "refresh"}}>{{i18n 'admin.email.refresh'}}</button>
     <div class="toggle">
       <label>{{i18n 'admin.email.format'}}</label>
       {{#if showHtml}}
-        <span>{{i18n 'admin.email.html'}}</span> | <a href {{action "toggleShowHtml"}}>{{i18n 'admin.email.text'}}</a>
+        <span>{{i18n 'admin.email.html'}}</span> | <a href
+         {{action "toggleShowHtml"}}>{{i18n 'admin.email.text'}}</a>
       {{else}}
-        <a href {{action "toggleShowHtml"}}>{{i18n 'admin.email.html'}}</a> | <span>{{i18n 'admin.email.text'}}</span>
+        <a href {{action "toggleShowHtml"}}>{{i18n 'admin.email.html'}}</a> |
+        <span>{{i18n 'admin.email.text'}}</span>
       {{/if}}
     </div>
   </div>
@@ -20,35 +22,33 @@
 
 {{#conditional-loading-spinner condition=loading}}
 
-<div class="email-preview-digest">
-  {{#if showSendEmailForm}}
-    <br/>
-    <div class="controls">
-      {{#if sendingEmail}}
-        {{i18n 'admin.email.sending_test'}}
-      {{else}}
-        <label>{{i18n 'admin.email.send_digest_label'}}</label>
-        {{text-field value=email placeholderKey="admin.email.test_email_address"}}
-        <button class='btn btn-default' {{action "sendEmail"}} disabled={{sendEmailDisabled}}>{{i18n 'admin.email.send_digest'}}</button>
-        {{#if sentEmail}}
-          <span class='result-message'>{{i18n 'admin.email.sent_test'}}</span>
+  <div class="email-preview-digest">
+    {{#if showSendEmailForm}}
+      <div class="controls">
+        {{#if sendingEmail}}
+          {{i18n 'admin.email.sending_test'}}
+        {{else}}
+          <label>{{i18n 'admin.email.send_digest_label'}}</label>
+          {{text-field value=email placeholderKey="admin.email.test_email_address"}}
+          <button class='btn btn-default' {{action "sendEmail"}} disabled={{sendEmailDisabled}}>{{i18n 'admin.email.send_digest'}}</button>
+          {{#if sentEmail}}
+            <span class='result-message'>{{i18n 'admin.email.sent_test'}}</span>
+          {{/if}}
         {{/if}}
-      {{/if}}
-    </div>
-    <br/>
-  {{/if}}
+      </div>
+    {{/if}}
 
-  <div class="preview-output">
-    {{#if showHtml}}
-      {{#if htmlEmpty}}
-        <p>{{i18n 'admin.email.no_result'}}</p>
+    <div class="preview-output">
+      {{#if showHtml}}
+        {{#if htmlEmpty}}
+          <p>{{i18n 'admin.email.no_result'}}</p>
+        {{else}}
+          <iframe srcdoc={{model.html_content}} />
+        {{/if}}
       {{else}}
-        <iframe srcdoc={{model.html_content}} />
+        <pre>{{{model.text_content}}}</pre>
       {{/if}}
-    {{else}}
-      <pre>{{{model.text_content}}}</pre>
-    {{/if}}
+    </div>
   </div>
-</div>
 
-{{/conditional-loading-spinner}}
+{{/conditional-loading-spinner}}
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss
index 732f3d4..c8903be 100644
--- a/app/assets/stylesheets/common/admin/emails.scss
+++ b/app/assets/stylesheets/common/admin/emails.scss
@@ -70,9 +70,18 @@
   padding: 0.25em 0;
 }
 
+.email-preview {
+  .digest-refresh-button {
+    margin: 0 0.5em;
+  }
+}
+
 .email-preview-digest {
   .controls {
-    margin-left: 20px;
+    margin: 1em 0.5em;
+    input[type="text"] {
+      margin-bottom: 0;
+    }
     label {
       display: inline;
     }

GitHub sha: 8531056a