Refined browser preview

ghost/admin/app/styles/components/modals.css

@@ -206,3 +206,22 @@
         margin-right: 10px;
     }
 }
+
+
+/* Email preview modal
+/* ---------------------------------------------------------- */
+.fullscreen-modal-email-preview {
+    margin: 30px;
+    max-width: 100%;
+}
+
+.fullscreen-modal-email-preview .modal-content {
+    padding-bottom: 0;
+    overflow: hidden;
+    height: 100%;
+}
+
+.fullscreen-modal-email-preview .modal-body {
+    height: 100%;
+    margin: 0 -32px;
+}

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

@@ -13,26 +13,47 @@
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    background: var(--midgrey);
-    background: linear-gradient(135deg, color-mod(var(--midgrey) h(-10) s(+5%) l(-10%)) 0%, #738a94 100%);
-    padding: 18px 32px 12px;
-}
-
-.gh-pe-header .background-img {
-    position: absolute;
-    top: -30px;
-    left: 0;
+    background: var(--white);
+    padding: 18px 32px;
 }
 
 .gh-pe-header h2 {
-    font-size: 1.3rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    color: #FFF;
-    margin: 0 8px 4px;
+    position: absolute;
+    top: 23px;
+    left: 24px;
 }
 
-.gh-pe-content {
-    margin: 0px -32px;
-    max-height: calc(100vh - 170px);
+.gh-pe-header-border {
+    border-bottom: 1px solid var(--whitegrey-l1);
+}
+
+.modal-content .gh-pe-close {
+    stroke: var(--midgrey);
+    opacity: 0.6;
+    transition: all 0.2s ease-in-out;
+    top: 23px;
+}
+
+.gh-pe-close:hover {
+    opacity: 1.0;
+}
+
+.gh-pe-btn-group button {
+    width: 100px;
+}
+
+.gh-pe-btn-group button span {
+    border: 1px solid var(--whitegrey);
+}
+
+.gh-pe-btn-group button:first-of-type span {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.gh-pe-btn-group button:last-of-type span {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 }

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

@@ -1,17 +1,16 @@
-<header class="modal-header gh-pe-header" data-test-modal="preview-email" style="display:flex">
-    <img style="width:20px" src="assets/img/mailchimp.svg" />
-    <h2>Email Preview</h2>
-        <div class="gh-contentfilter gh-btn-group" style="display:flex;flex-grow:1;justify-content:center">
-            <button class="gh-btn {{if (eq type "desktop") "gh-btn-group-selected"}}" {{action "changeType" "desktop"}}><span>Desktop</span></button>
-            <button class="gh-btn {{if (eq type "mobile") "gh-btn-group-selected"}}" {{action "changeType" "mobile"}}><span>Mobile</span></button>
-        </div>
+<header class="modal-header gh-pe-header {{if (eq type "desktop") "gh-pe-header-border"}}" data-test-modal="preview-email" style="display:flex">
+    <h2 class="f5 fw6">Email preview</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 type "desktop") "gh-btn-group-selected"}}" {{action "changeType" "desktop"}}><span>Desktop</span></button>
+        <button class="gh-btn {{if (eq type "mobile") "gh-btn-group-selected"}}" {{action "changeType" "mobile"}}><span>Mobile</span></button>
+    </div>
 </header>
 
-<button class="close gh-wn-close" href="" title="Close" {{on "click" this.closeModal}}>
+<button class="close gh-pe-close" href="" title="Close" {{on "click" this.closeModal}}>
     {{svg-jar "close"}}
 </button>
 {{#if (eq type "mobile")}}
-    <div class="modal-body gh-pe-content modal-preview-email-content" style="display: flex;justify-content: center;padding-top: 12px;">
+    <div class="modal-body modal-preview-email-content" style="display: flex;justify-content: center;padding-top: 12px;">
         <div style="width: 350px;border: 1px solid black;border-radius: 16px;display: flex;"> 
             <div style="margin: 12px;border: 1px solid black;border-radius: 16px;flex-grow:1"> 
                 <iframe class="bn" style="height:100%;width:320px;overflow-x:hidden;padding:6px" {{did-insert this.renderEmailPreview}}></iframe>
@@ -20,7 +19,7 @@
     </div>
 {{/if}}
 {{#if (eq type "desktop")}}
-    <div class="modal-body gh-pe-content modal-preview-email-content">
+    <div class="modal-body modal-preview-email-content">
         <iframe class="bn miw-100" style="height:100%;" {{did-insert this.renderEmailPreview}}></iframe>
     </div>
 {{/if}}

ghost/admin/app/templates/editor.hbs

@@ -122,7 +122,7 @@
         {{gh-fullscreen-modal "post-email-preview"
             model=post
             close=(action "toggleEmailPreviewModal")
-            modifier="full-overlay"}}
+            modifier="full-overlay email-preview"}}
     {{/if}}
 
     {{#liquid-wormhole}}