UX: Styling changes to global banner (#16191)

app/assets/javascripts/discourse/app/components/discourse-banner.js

@@ -1,15 +1,18 @@
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
+import { action } from "@ember/object";
 
 export default Component.extend({
   hide: false,
 
   @discourseComputed("banner.html")
   content(bannerHtml) {
-    const $div = $("<div>");
+    const newDiv = document.createElement("div");
-    $div.append(bannerHtml);
+    newDiv.innerHTML = bannerHtml;
-    $div.find("[id^='heading--']").removeAttr("id");
+    newDiv.querySelectorAll("[id^='heading--']").forEach((el) => {
-    return $div.html();
+      el.removeAttribute("id");
+    });
+    return newDiv.innerHTML;
   },
 
   @discourseComputed("user.dismissed_banner_key", "banner.key", "hide")
@@ -27,7 +30,7 @@ export default Component.extend({
     return !hide && bannerKey && dismissedBannerKey !== bannerKey;
   },
 
-  actions: {
+  @action
   dismiss() {
     if (this.user) {
       this.user.dismissBanner(this.get("banner.key"));
@@ -39,5 +42,4 @@ export default Component.extend({
       });
     }
   },
-  },
 });

app/assets/javascripts/discourse/app/templates/components/discourse-banner.hbs

@@ -1,12 +1,20 @@
 {{#if visible}}
   <div class="row">
     <div id="banner" class={{overlay}}>
+      <div class="floated-buttons">
+        {{#if currentUser.staff}}
+          <a href={{banner.url}} class="btn btn-flat edit-banner">
+            {{d-icon "pencil-alt"}}
+            {{#unless site.mobileView}}
+              {{html-safe (i18n "banner.edit")}}
+            {{/unless}}
+          </a>
+        {{/if}}
+
         {{d-button icon="times" action=(action "dismiss") class="btn btn-flat close" title="banner.close"}}
+      </div>
       <div id="banner-content">
         {{html-safe content}}
-        {{#if currentUser.staff}}
-          <p><a href={{banner.url}}>{{html-safe (i18n "banner.edit")}}</a></p>
-        {{/if}}
       </div>
     </div>
   </div>

app/assets/stylesheets/common/components/banner.scss

@@ -3,29 +3,37 @@
 // --------------------------------------------------
 
 #banner {
-  padding: 0.5em 1em;
+  padding: 1em;
   background: var(--tertiary-low);
   color: var(--primary);
   z-index: z("base") + 1;
   margin-bottom: 1em;
-  max-height: 250px;
+  max-height: 20vh;
   overflow: auto;
 
-  &.overlay {
+  .floated-buttons {
-    position: fixed;
-  }
-
-  .close {
-    color: var(--primary-low-mid);
-    padding-left: 5px;
     float: right;
+    display: flex;
+
+    > .btn {
+      padding-top: 0em;
+      padding-bottom: 0em;
+      color: var(--primary-high);
       .d-icon {
         color: var(--primary-medium);
       }
+
+      &:hover {
+        color: var(--primary);
+        .d-icon {
+          color: var(--primary-high);
+        }
+      }
     }
 
-  .meta {
+    .desktop-view & .btn.close {
-    display: none;
+      margin-left: 0.25em;
+    }
   }
 }
 
@@ -33,4 +41,12 @@
   hr {
     border-color: var(--primary-medium);
   }
+
+  > p:first-child {
+    margin-top: 0;
+  }
+
+  > p:last-of-type {
+    margin-bottom: 0;
+  }
 }

app/assets/stylesheets/mobile/components/_index.scss

@@ -1,4 +1,3 @@
-@import "banner";
 @import "topic-footer-mobile-dropdown";
 @import "user-card";
 @import "user-stream-item";

app/assets/stylesheets/mobile/components/banner.scss

@@ -1,8 +0,0 @@
-// --------------------------------------------------
-// Banner
-// --------------------------------------------------
-
-#banner {
-  max-height: 180px;
-  height: 20vh;
-}

config/locales/client.en.yml

@@ -411,8 +411,8 @@ en:
     switch_from_anon: "Exit Anonymous Mode"
 
     banner:
-      close: "Dismiss this banner."
+      close: "Dismiss this banner"
-      edit: "Edit this banner >>"
+      edit: "Edit"
 
     pwa:
       install_banner: "Do you want to <a href>install %{title} on this device?</a>"