Added bookmark back to published posts in Beta editor (#18289)

No ref
- By popular request, a bookmark of the published post is now shown
after publishing
- The 'Published' status in the editor now links to the published post

ghost/admin/app/components/editor/modals/publish-flow/complete.hbs

@@ -79,11 +79,9 @@
             {{/if}}
         </div>
     {{else}}
-        {{#unless post.lexical}}
-            <a href={{post.url}} class="gh-post-bookmark-wrapper" target="_blank" rel="noopener noreferrer" data-test-complete-bookmark>
-                <GhPostBookmark @post={{post}} />
-            </a>
-        {{/unless}}
+        <a href={{post.url}} class="gh-post-bookmark-wrapper" target="_blank" rel="noopener noreferrer" data-test-complete-bookmark>
+            <GhPostBookmark @post={{post}} />
+        </a>
 
         {{#if post.isScheduled}}
             <p class="gh-publish-confirmation">

ghost/admin/app/components/gh-editor-post-status.hbs

@@ -26,9 +26,12 @@
             </time>
         {{/if}}
     {{else if (or @post.isPublished @post.pastScheduledTime)}}
-        <span class="{{if (eq @post.email.status "failed") "newsletter-failed" ""}}">
-            Published
-        </span>
+        <a href={{@post.url}} class="view-post {{if (eq @post.email.status "failed") "newsletter-failed" ""}}" target="_blank" rel="noopener noreferrer">
+            Published 
+            {{#unless @post.email}}
+                {{svg-jar "arrow-top-right" title="View post"}}
+            {{/unless}}
+        </a>
         {{#if (or (eq @post.email.status "submitting") (eq @post.email.status "submitting"))}}
             and sending to {{gh-pluralize @post.email.emailCount "member"}}
         {{else if (eq @post.email.status "submitted")}}

ghost/admin/app/components/gh-post-settings-menu.hbs

@@ -17,11 +17,11 @@
                             {{#unless this.post.isNew}}
                                 {{#if (or this.post.isPublished this.post.isSent)}}
                                 <a class="post-view-link" target="_blank" href="{{this.post.url}}" rel="noopener noreferrer">
-                                    View {{this.post.displayName}} {{svg-jar "external"}}
+                                    View {{this.post.displayName}} {{svg-jar "arrow-top-right"}}
                                 </a>
                                 {{else if this.post.isScheduled}}
                                 <a class="post-view-link" target="_blank" href="{{this.post.previewUrl}}" rel="noopener noreferrer">
-                                    Preview {{svg-jar "external"}}
+                                    Preview {{svg-jar "arrow-top-right"}}
                                 </a>
                                 {{/if}}
                             {{/unless}}

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

@@ -104,7 +104,7 @@
 }
 
 .post-view-link:hover {
-    color: var(--darkgrey);
+    color: var(--midgrey-d2);
 }
 
 .post-view-link svg {
@@ -112,12 +112,11 @@
     width: 12px;
     height: 12px;
     vertical-align: middle;
-    margin-bottom: 2px;
-    fill: var(--midgrey);
+    transition: all .15s ease;
 }
 
 .post-view-link:hover svg {
-    fill: var(--darkgrey);
+    transform: translateY(-1px);
 }
 
 
@@ -742,6 +741,29 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
     margin-left: 1rem;
 }
 
+.gh-editor-post-status .view-post {
+    display: inline-flex;
+    align-items: center;
+    color: var(--midgrey-l2);
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.gh-editor-post-status .view-post:hover {
+    color: var(--midgrey-d1);
+}
+
+.gh-editor-post-status .view-post svg {
+    width: 1.2rem;
+    height: 1.2rem;
+    margin: 1px 0 0 .6rem;
+    transition: all .15s ease;
+}
+
+.gh-editor-post-status .view-post:hover svg {
+    transform: translateY(-1px);
+}
+
 @media (max-width: 720px) {
     .gh-editor-post-status .newsletter-failed {
         display: none;