Refined design details

Author: peterzimon

ghost/admin/app/components/editor/email-size-warning.hbs

@@ -7,16 +7,14 @@
         <span {{did-update this.checkEmailSize @post.updatedAtUTC}} class="gh-editor-email-size-warning-container">
             <span class="gh-editor-email-size-warning gh-editor-email-size-warning--{{this.warningLevel}}" data-warning-active={{if this.warningLevel "true" "false"}}>
                 {{#if this.warningLevel}}
-                    <span class="{{concat "gh-editor-email-warning-icon-" this.warningLevel}}">
-                        {{svg-jar "email-warning"}}
-                    </span>
+                    {{svg-jar "email-warning"}}
                 {{/if}}
             </span>
             {{#if this.warningLevel}}
                 <div class="gh-editor-email-size-popup">
                     <div class="gh-editor-email-size-popup-title">Looks like this is a long post</div>
-                    <div class="gh-editor-email-size-popup-text">Email newsletters may get cut off in the inbox behind a "View entire message" link when they're over 100kB.</div>
-                    <div class="gh-editor-email-size-popup-used">You've used: <span class={{this.warningLevel}}>{{this.emailSizeKb}}kB</span></div>
+                    <div class="gh-editor-email-size-popup-text">Email newsletters may get clipped in the inbox behind a "View entire message" link when they're over 100kB.</div>
+                    <div class="gh-editor-email-size-popup-used">You've used: <span class="yellow">{{this.emailSizeKb}}kB</span></div>
                 </div>
             {{/if}}
         </span>

ghost/admin/app/components/editor/modals/preview/email.hbs

@@ -94,8 +94,7 @@
                         {{svg-jar "email-warning"}}
                         <div>
                             <div class="gh-email-preview-clip-title">Looks like this is a long post</div>
-                            <div class="gh-email-preview-clip-description">Email newsletters may get cut off in the inbox behind a “View entire message” link when they’re over 100kB. </div>
-                            <div class="gh-email-preview-clip-used">You’ve used: <span class="yellow-d1">{{emailSizeKb}}kB</span></div>
+                            <div class="gh-email-preview-clip-description">Email newsletters may get clipped in the inbox behind a “View entire message” link when they’re over 100kB. <span class="gh-email-preview-clip-used">You’ve used: <span class="yellow-d1">{{emailSizeKb}}kB</span></span></div>
                         </div>
                     </div>
                 {{/if}}

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

@@ -459,7 +459,7 @@
 }
 
 .gh-editor-email-size-warning svg path {
-    stroke: currentColor !important;
+    stroke: var(--yellow) !important;
 }
 
 .gh-editor-email-size-popup {

ghost/admin/app/styles/layouts/preview-email.css

@@ -302,7 +302,7 @@ p .gh-preview-email-address {
 }
 
 .gh-email-preview-clip-container svg path {
-    fill: var(--yellow-d1);
+    stroke: var(--yellow-d1);
 }
 
 .gh-email-preview-clip-title {