Updated email and social post previews

Refs https://github.com/TryGhost/Team/issues/1621

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

@@ -8,32 +8,62 @@
         </div>
         <iframe class="gh-pe-iframe" {{did-insert this.renderEmailPreview}} sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>
     </div>
+    {{!-- <div class="flex">
+        <div class="gh-btn-group mr3">
+            <button type="button" class="gh-btn {{if (eq this.memberSegment "status:free") "gh-btn-group-selected"}}" {{on "click" (fn this.changeMemberSegment "status:free")}}><span>Free member</span></button>
+            <button type="button" class="gh-btn {{if (eq this.memberSegment "status:-free") "gh-btn-group-selected"}}" {{on "click" (fn this.changeMemberSegment "status:-free")}}><span>Paid member</span></button>
+        </div>
+
+        <div class="gh-post-preview-email-input {{if this.sendPreviewEmailError "error"}}">
+            <Input
+                @value={{this.previewEmailAddress}}
+                class="gh-input gh-post-preview-email-input"
+                placeholder="you@yoursite.com"
+                aria-invalid={{if this.sendPreviewEmailError "true"}}
+                aria-describedby={{if this.sendPreviewEmailError "sendError"}}
+                {{on-key "Enter" (perform this.sendPreviewEmailTask)}}
+            />
+            {{#if this.sendPreviewEmailError}}
+                <div class="error fixed nowrap f8 lh-heading"><span class="response" id="sendError">{{this.sendPreviewEmailError}}</span></div>
+            {{/if}}
+        </div>
+
+        <GhTaskButton
+            @task={{this.sendPreviewEmailTask}}
+            @buttonText="Send test email"
+            @successText="Sent"
+            @runningText="Sending..."
+            @class="gh-btn gh-btn-green gh-btn-icon gh-post-preview-email-trigger"
+        />
+    </div> --}}
 </div>
 <div class="gh-post-preview-email-footer">
-    <div class="gh-btn-group mr3">
-        <button type="button" class="gh-btn {{if (eq this.memberSegment "status:free") "gh-btn-group-selected"}}" {{on "click" (fn this.changeMemberSegment "status:free")}}><span>Free member</span></button>
-        <button type="button" class="gh-btn {{if (eq this.memberSegment "status:-free") "gh-btn-group-selected"}}" {{on "click" (fn this.changeMemberSegment "status:-free")}}><span>Paid member</span></button>
-    </div>
+    <div class="gh-post-preview-email-test">
+        <div class="gh-btn-group mr3">
+            <button type="button" class="gh-btn {{if (eq this.memberSegment "status:free") "gh-btn-group-selected"}}" {{on "click" (fn this.changeMemberSegment "status:free")}}><span>Free member</span></button>
+            <button type="button" class="gh-btn {{if (eq this.memberSegment "status:-free") "gh-btn-group-selected"}}" {{on "click" (fn this.changeMemberSegment "status:-free")}}><span>Paid member</span></button>
+        </div>
 
-    <div class="gh-post-preview-email-input {{if this.sendPreviewEmailError "error"}}">
-        <Input
-            @value={{this.previewEmailAddress}}
-            class="gh-input gh-post-preview-email-input"
-            placeholder="you@yoursite.com"
-            aria-invalid={{if this.sendPreviewEmailError "true"}}
-            aria-describedby={{if this.sendPreviewEmailError "sendError"}}
-            {{on-key "Enter" (perform this.sendPreviewEmailTask)}}
+        <div class="gh-post-preview-email-input {{if this.sendPreviewEmailError "error"}}">
+            <Input
+                @value={{this.previewEmailAddress}}
+                class="gh-input gh-post-preview-email-input"
+                placeholder="you@yoursite.com"
+                aria-invalid={{if this.sendPreviewEmailError "true"}}
+                aria-describedby={{if this.sendPreviewEmailError "sendError"}}
+                {{on-key "Enter" (perform this.sendPreviewEmailTask)}}
+            />
+            {{#if this.sendPreviewEmailError}}
+                <div class="error fixed nowrap f8 lh-heading"><span class="response" id="sendError">{{this.sendPreviewEmailError}}</span></div>
+            {{/if}}
+        </div>
+
+        <GhTaskButton
+            @task={{this.sendPreviewEmailTask}}
+            @buttonText="Send test email"
+            @successText="Sent"
+            @runningText="Sending..."
+            @class="gh-btn gh-btn-green gh-btn-icon gh-post-preview-email-trigger"
         />
-        {{#if this.sendPreviewEmailError}}
-            <div class="error fixed nowrap f8 lh-heading"><span class="response" id="sendError">{{this.sendPreviewEmailError}}</span></div>
-        {{/if}}
     </div>
-
-    <GhTaskButton
-        @task={{this.sendPreviewEmailTask}}
-        @buttonText="Send test email"
-        @successText="Sent"
-        @runningText="Sending..."
-        @class="gh-btn gh-btn-green gh-btn-icon gh-post-preview-email-trigger"
-    />
 </div>

ghost/admin/app/components/editor-labs/modals/preview/social.hbs

@@ -1,6 +1,6 @@
 
 <div class="gh-post-preview-social-container">
-    <p class="mb4">This is how your content will look when shared, you can click on any elements you’d like to edit.</p>
+    <p class="mb8 fw5">This is how your content will look when shared, you can click on any elements you’d like to edit.</p>
     <div class="flex flex-column">
         <div class="flex gh-social-container-responsive">
             <div class="gh-social-og-container">

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

@@ -175,11 +175,11 @@
 /* Email preview */
 .gh-post-preview-email-container {
     position: relative;
-    height: calc(100vh - 135px);
+    height: calc(100vh - 94px);
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: var(--whitegrey-l1);
+    background: var(--white);
     padding: 30px 30px 40px;
     overflow: auto;
 }
@@ -211,9 +211,13 @@
     width: 100%;
 }
 
+.gh-post-preview-email-test {
+    display: flex;
+    width: 740px;
+}
+
 .gh-post-preview-email-input {
     width: 100%;
-    max-width: 280px;
 }
 
 .gh-post-preview-email-input {
@@ -239,13 +243,10 @@
     justify-content: center;
     flex-wrap: wrap;
     width: 100%;
-    height: 100%;
-    overflow-y: scroll;
-    padding: 3.2rem;
-    overflow-y: scroll;
-    background: var(--whitegrey-l1);
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
+    height: calc(100vh - 94px);
+    padding: 1rem 3.2rem 3rem;
+    background: var(--white);
+    overflow-y: auto;
 }
 
 .gh-post-preview-social-container:after {
@@ -276,9 +277,9 @@
 .gh-social-og-container {
     width: 476px;
     margin-bottom: 2.4rem;
-    border: 1px solid #e5e5e5;
+    border: 1px solid var(--whitegrey-d1);
     background: #fff;
-    border-radius: 3px;
+    border-radius: var(--border-radius);
 }
 
 @media (min-width: 1120px) {
@@ -440,8 +441,9 @@
 .gh-social-twitter-container {
     width: 591px;
     margin-bottom: 2.4rem;
-    border: 1px solid #ebeef0;
+    border: 1px solid var(--whitegrey-d1);
     background: #fff;
+    border-radius: var(--border-radius);
 }
 
 @media (min-width: 1120px) {
@@ -595,9 +597,10 @@
     width: 100%;
     max-width: 1091px;
     padding: 20px 30px;
-    border: 1px solid var(--whitegrey);
+    border: 1px solid var(--whitegrey-d1);
     font-family: Arial, sans-serif;
     background: #fff;
+    border-radius: var(--border-radius);
 }
 
 .gh-seo-preview-container svg {

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

@@ -123,10 +123,11 @@
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
-    height: 72px;
+    height: 88px;
     border-bottom: 1px solid var(--whitegrey);
     margin: 0;
     padding: 0 20px;
+    background: var(--whitegrey-l2);
 }
 
 .gh-pe-emailclient-sender p {