From 4c9d9289ef5e9e297a4ef657074d6ae1b44ab585 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 8 Feb 2021 19:20:38 +0100
Subject: [PATCH] Updated footer design of post preview

No ref

- Changed copy-url button style in browser view
- Changed send-test-email input and button style in email view
- Moved error notification for invalid email
- Changed "Saved" notification style
---
 .../components/modal-post-preview/browser.hbs | 20 +++++-----
 .../components/modal-post-preview/email.hbs   | 15 +++----
 .../components/modal-post-preview/mobile.hbs  | 20 +++++-----
 .../app/styles/components/notifications.css   |  4 +-
 .../admin/app/styles/layouts/post-preview.css | 40 +++++++++++++------
 5 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/ghost/admin/app/components/modal-post-preview/browser.hbs b/ghost/admin/app/components/modal-post-preview/browser.hbs
index 988b8e02c7..d359d7b7a2 100644
--- a/ghost/admin/app/components/modal-post-preview/browser.hbs
+++ b/ghost/admin/app/components/modal-post-preview/browser.hbs
@@ -4,15 +4,17 @@
     </div>
 </div>
 <div class="gh-post-preview-browser-footer">
-    <span class="mr3 mt1 mb1 nowrap fw6 f8 darkgrey">Share preview privately</span>
-    <div class="gh-post-preview-url-container">
+    <span class="mr3 nowrap fw6 f8 darkgrey">Share preview privately</span>
+    <div class="gh-post-preview-url-container truncate">
         <span class="db truncate w-90">{{@post.previewUrl}}</span>
-        <button type="button" {{on "click" (perform this.copyPreviewUrl)}} class="gh-post-preview-copy">
-            {{#if this.copyPreviewUrl.isRunning}}
-                {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
-            {{else}}
-                <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
-            {{/if}}
-        </button>
     </div>
+    <button type="button" {{on "click" (perform this.copyPreviewUrl)}} class="gh-btn gh-btn-green gh-btn-icon gh-post-preview-copy-url-trigger">
+        <span>
+            {{#if this.copyPreviewUrl.isRunning}} 
+                Copied!
+            {{else}}
+                copy
+            {{/if}}
+        </span>
+    </button>
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/modal-post-preview/email.hbs b/ghost/admin/app/components/modal-post-preview/email.hbs
index 4e85d28e5c..a73b4615df 100644
--- a/ghost/admin/app/components/modal-post-preview/email.hbs
+++ b/ghost/admin/app/components/modal-post-preview/email.hbs
@@ -10,25 +10,26 @@
     </div>
 </div>
 <div class="gh-post-preview-email-footer">
-    <span class="mr3 flex-grow-1 nowrap fw6 f8 darkgrey">Send a preview newsletter</span>
-    {{#if this.sendPreviewEmailError}}
-        <div class="error mr3 nowrap"><span class="response" id="sendError">{{this.sendPreviewEmailError}}</span></div>
-    {{/if}}
-    <div class="mr3 truncate midlightgrey {{if this.sendPreviewEmailError "error"}}">
+    <span class="mr3 nowrap fw6 f8 darkgrey">Send a test newsletter</span>
+
+    <div class="gh-post-preview-email-input {{if this.sendPreviewEmailError "error"}}">
         <Input
             @value={{this.previewEmailAddress}}
-            class="gh-input"
+            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"
         @successText="Sent"
         @runningText="Sending..."
-        @class="gh-btn gh-btn-green gh-btn-icon"
+        @class="gh-btn gh-btn-green gh-btn-icon gh-post-preview-email-trigger"
     />
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/modal-post-preview/mobile.hbs b/ghost/admin/app/components/modal-post-preview/mobile.hbs
index 8258eb5d1b..7e7d083621 100644
--- a/ghost/admin/app/components/modal-post-preview/mobile.hbs
+++ b/ghost/admin/app/components/modal-post-preview/mobile.hbs
@@ -6,15 +6,17 @@
     </div>
 </div>
 <div class="gh-post-preview-browser-footer">
-    <span class="mr3 mt1 mb1 nowrap fw6 f8 darkgrey">Share preview privately</span>
-    <div class="gh-post-preview-url-container">
+    <span class="mr3 nowrap fw6 f8 darkgrey">Share preview privately</span>
+    <div class="gh-post-preview-url-container truncate">
         <span class="db truncate w-90">{{@post.previewUrl}}</span>
-        <button type="button" {{on "click" (perform this.copyPreviewUrl)}} class="gh-post-preview-copy">
-            {{#if this.copyPreviewUrl.isRunning}}
-                {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
-            {{else}}
-                <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
-            {{/if}}
-        </button>
     </div>
+    <button type="button" {{on "click" (perform this.copyPreviewUrl)}} class="gh-btn gh-btn-green gh-btn-icon gh-post-preview-copy-url-trigger">
+        <span>
+            {{#if this.copyPreviewUrl.isRunning}} 
+                Copied!
+            {{else}}
+                copy
+            {{/if}}
+        </span>
+    </button>
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/styles/components/notifications.css b/ghost/admin/app/styles/components/notifications.css
index 5df8b80af3..993ca477af 100644
--- a/ghost/admin/app/styles/components/notifications.css
+++ b/ghost/admin/app/styles/components/notifications.css
@@ -18,8 +18,8 @@
     margin-top: 8px;
     padding: 4px 8px;
     width: 286px;
-    background: color-mod(var(--blue) s(+10%));
-    border-radius: 22px;
+    background: var(--black);
+    border-radius: 6px;
     box-shadow:
         0 1.1px 2.3px rgba(0, 0, 0, 0.028),
         0 3.8px 7.8px rgba(0, 0, 0, 0.042),
diff --git a/ghost/admin/app/styles/layouts/post-preview.css b/ghost/admin/app/styles/layouts/post-preview.css
index 8c32809f24..0863dfdc6c 100644
--- a/ghost/admin/app/styles/layouts/post-preview.css
+++ b/ghost/admin/app/styles/layouts/post-preview.css
@@ -96,14 +96,15 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 1.4rem;
-    padding: 5px 4px 5px 8px;
+    width: 100%;
     height: 38px;
+    max-width: 520px;
+    padding: 5px 4px 5px 8px;
+    color: var(--midgrey);
+    font-size: 1.4rem;
+    border: 1px solid var(--whitegrey);
     background: var(--whitegrey-l2);
     border-radius: 4px;
-    border: 1px solid var(--whitegrey);
-    color: var(--midgrey);
-    width: 60rem;
 }
 
 .gh-post-preview-copy {
@@ -126,14 +127,7 @@
     justify-content: center;
     align-items: center;
     border-top: 1px solid var(--whitegrey);
-    padding: 2rem;
-}
-
-@media (max-width: 800px) {
-    .gh-post-preview-browser-footer {
-        flex-direction: column;
-        align-items: flex-start;
-    }
+    padding: 2.8rem 2rem;
 }
 
 
@@ -191,6 +185,26 @@
     height: calc(100% - 67px);
 }
 
+.gh-post-preview-email-input {
+    width: 100%;
+    max-width: 280px;
+}
+
+.gh-post-preview-email-input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.gh-post-preview-email-trigger,
+.gh-post-preview-copy-url-trigger {
+    height: 38px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.gh-post-preview-email-trigger span {
+    padding: 0 20px;
+}
 
 /* Social preview */
 .gh-post-preview-social-container {