Updated 6.0 update CTA (#24563)

ref
5de4255

- This is a refinement of the commit above. It adds a link to the 6.0
landing page and updates the copy

Author: peterzimon

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

@@ -345,14 +345,59 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 12px;
+    padding: 14px;
     background: var(--black);
     color: #fff;
     font-size: 1.45rem;
     z-index: 30;
 }
 
 .gh-update-banner a {
-    font-weight: 700;
+    font-weight: 500;
     color: var(--green-l2);
 }
+
+.gh-update-banner.gh-60 a.whatsnew {
+    position: relative;
+    color: #fff;
+    text-decoration: underline;
+}
+
+.gh-update-banner.gh-60 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    font-weight: 500;
+}
+
+.gh-update-banner.gh-60 .button {
+    margin-left: 8px;
+    height: 32px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 12px;
+    border-radius: 5px;
+    font-size: 14px;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.gh-update-banner.gh-60 {
+    background: linear-gradient(45deg, #122220 0%, #172E2C 100%);
+}
+
+.gh-update-banner.gh-60 .button {
+    background: linear-gradient(45deg, #317B9B 0%, #319B99 100%);
+    color: #fff;
+}
+
+.gh-update-banner.gh-60 .button:hover {
+    opacity: 0.9;
+}
+
+.gh-update-banner.gh-60 .gh-alert-content {
+    font-size: 1.45rem;
+}

ghost/admin/app/templates/application.hbs

@@ -9,12 +9,14 @@
     {{/if}}
 
     {{#if (and this.session.user.isAdmin this.showUpdateBanner)}}
-    <aside class="gh-update-banner">
+        <aside class="gh-update-banner gh-60">
         {{#if this.session.user.isOwnerOnly}}
             <div class="gh-alert-content">
-                A new major version of Ghost is available!&nbsp;
+                A new major version of Ghost is available! <a href="https://ghost.org/6" target="_blank" rel="noopener noreferrer" class="whatsnew">See what's new</a>
             </div>
-            <a href="#" {{on "click" this.openUpdateTab}}>Update to Ghost 6.0 &rarr;</a>
+            <button class="button" type="button" {{on "click" this.openUpdateTab}}>
+                Update to Ghost 6.0 &rarr;
+            </button>
         {{else}}
             <div class="gh-alert-content">
                 Your Ghost install is ready for a major update!