Update post email preview design (#1767)

Made post email preview design consistent with the new email settings design preview.

* changed background

* added fake container windows and faux sender/recipient content

* updated mobile and dark mode

ghost/admin/app/components/modal-post-email-preview.hbs

@@ -1,4 +1,4 @@
-<header class="modal-header gh-pe-header {{if (eq this.type "desktop") "gh-pe-header-border"}}" data-test-modal="preview-email" style="display:flex">
+<header class="modal-header gh-pe-header gh-pe-header-border" data-test-modal="preview-email" style="display:flex">
     <h2 class="f6 fw6">{{this.subject}}</h2>
     <div class="gh-contentfilter gh-btn-group gh-pe-btn-group" style="display:flex;flex-grow:1;justify-content:center">
         <button class="gh-btn {{if (eq this.type "desktop") "gh-btn-group-selected"}}" {{action "changeType" "desktop"}}><span>Desktop</span></button>
@@ -12,9 +12,15 @@
 </header>
 
 {{#if (eq this.type "mobile")}}
-    <div class="modal-body modal-preview-email-content gh-pe-mobile-container" style="display: flex;justify-content: center;">
+    <div class="modal-body modal-preview-email-content gh-pe-mobile-container">
         <div class="gh-pe-mobile-bezel">
             <div class="gh-pe-mobile-screen">
+                <div class="gh-pe-emailclient-sender">
+                    <p>
+                        <span class="strong">{{this.config.blogTitle}}</span> &lt;{{this.settings.membersFromAddress}}&gt;
+                    </p>
+                    <p><span class="dark">To:</span> Jamie Larson &lt;jamie@example.com&gt;</p>
+                </div>
                 <iframe class="bn gh-pe-iframe" {{did-insert this.renderEmailPreview}} sandbox="allow-same-origin"></iframe>
             </div>
         </div>
@@ -23,6 +29,14 @@
 
 {{#if (eq this.type "desktop")}}
     <div class="modal-body modal-preview-email-content gh-pe-desktop-container">
-        <iframe class="bn miw-100 gh-pe-iframe" style="height:100%;" {{did-insert this.renderEmailPreview}} sandbox="allow-same-origin"></iframe>
+        <div class="gh-pe-emailclient-mockup">
+            <div class="gh-pe-emailclient-sender">
+                <p>
+                    <span class="strong">{{this.config.blogTitle}}</span> &lt;{{this.settings.membersFromAddress}}&gt;
+                </p>
+                <p><span class="dark">To:</span> Jamie Larson &lt;jamie@example.com&gt;</p>
+            </div>
+            <iframe class="gh-pe-iframe" {{did-insert this.renderEmailPreview}} sandbox="allow-same-origin"></iframe>
+        </div>
     </div>
 {{/if}}

ghost/admin/app/components/modal-post-email-preview.js

@@ -17,6 +17,8 @@ html {
 export default ModalComponent.extend({
     ghostPaths: service(),
     ajax: service(),
+    settings: service(),
+    config: service(),
 
     type: 'desktop',
     html: '',

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

@@ -552,6 +552,12 @@ input:focus,
     background: none !important;
 }
 
-.modal-fullsettings-preview-container {
+.modal-fullsettings-preview-container,
+.fullscreen-modal-email-preview .gh-pe-mobile-container,
+.fullscreen-modal-email-preview .gh-pe-desktop-container {
     background: #1D252B;
 }
+
+.gh-pe-mobile-bezel {
+    background: #2b373e;
+}

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

@@ -78,29 +78,97 @@
     border-bottom-left-radius: 0;
 }
 
-.fullscreen-modal-email-preview .gh-pe-mobile-container {
+.fullscreen-modal-email-preview .gh-pe-desktop-container {
+    height: calc(100vh - 135px);
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 20px 0;
+    background: var(--whitegrey-l1);
+    padding: 30px 30px 45px;
 }
 
-.fullscreen-modal-email-preview .gh-pe-desktop-container {
+.gh-pe-desktop-container .gh-pe-emailclient-mockup {
-    height: calc(100vh - 130px);
+    flex-grow: 1;
+    overflow: hidden;
+    max-width: 640px;
+    width: 100%;
+    padding: 0;
+    background: var(--white);
+    box-shadow: 
+        0 0 0 1px rgba(0,0,0,0.02),
+        0 2.8px 2.2px rgba(0, 0, 0, 0.02),
+        0 6.7px 5.3px rgba(0, 0, 0, 0.028),
+        0 12.5px 10px rgba(0, 0, 0, 0.035),
+        0 22.3px 17.9px rgba(0, 0, 0, 0.042),
+        0 41.8px 33.4px rgba(0, 0, 0, 0.05),
+        0 100px 80px rgba(0, 0, 0, 0.07);
+    ;
+    border-radius: 12px;
+}
+
+.gh-pe-desktop-container iframe {
+    border: none;
+    width: 100%;
+    height: calc(100% - 67px);
+}
+
+.gh-pe-emailclient-sender {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    height: 72px;
+    border-bottom: 1px solid var(--whitegrey);
+    margin: 0;
+    padding: 0 20px;
+}
+
+.gh-pe-emailclient-sender p {
+    padding: 0;
+    margin: 0;
+    color: var(--midlightgrey);
+    line-height: 1.8em;
+}
+
+.gh-pe-emailclient-sender span {
+    color: var(--darkgrey);
+}
+
+.gh-pe-emailclient-sender span.strong {
+    font-weight: 600;
+}
+
+.fullscreen-modal-email-preview .gh-pe-mobile-container {
+    height: calc(100vh - 140px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--whitegrey-l1);
+    padding: 30px 30px 45px;
 }
 
 .gh-pe-mobile-bezel {
     width: 320px;
     height: 657px;
-    border: 1px solid var(--midgrey-l2);
     border-radius: 40px;
     display: flex;
+    background: var(--whitegrey-l2);
+    box-shadow: 
+        0 0 0 1px rgba(0,0,0,0.02),
+        0 2.8px 2.2px rgba(0, 0, 0, 0.02),
+        0 6.7px 5.3px rgba(0, 0, 0, 0.028),
+        0 12.5px 10px rgba(0, 0, 0, 0.035),
+        0 22.3px 17.9px rgba(0, 0, 0, 0.042),
+        0 41.8px 33.4px rgba(0, 0, 0, 0.05),
+        0 100px 80px rgba(0, 0, 0, 0.07);
+    ;
 }
 
 .gh-pe-mobile-screen {
     width: 100%;
-    margin: 12px;
+    margin: 14px;
-    border: 1px solid var(--midgrey-l2);
+    border: 1px solid var(--whitegrey-l1);
+    background: var(--white);
     border-radius: 28px;
     flex-grow: 1;
     overflow: hidden;
@@ -111,14 +179,24 @@
     transform: scale(0.8);
     transform-origin: 0 0;
     overflow-x: hidden;
-    width: 365px;
+    width: 361px;
-    height: 786px;
+    height: 706px;
 }
 
 .gh-pe-mobile-container .gh-pe-iframe .left-col {
     display: none;
 }
 
+.gh-pe-mobile-container .gh-pe-emailclient-sender {
+    height: 66px;
+    padding: 6px 12px 0;
+}
+
+.gh-pe-mobile-container .gh-pe-emailclient-sender p {
+    font-size: 1.1rem;
+    line-height: 1.6em;
+}
+
 @media (max-width: 850px) {
     .gh-pe-header {
         flex-direction: column;