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>");
-    $div.append(bannerHtml);
-    $div.find("[id^='heading--']").removeAttr("id");
-    return $div.html();
+    const newDiv = document.createElement("div");
+    newDiv.innerHTML = bannerHtml;
+    newDiv.querySelectorAll("[id^='heading--']").forEach((el) => {
+      el.removeAttribute("id");
+    });
+    return newDiv.innerHTML;
   },
 
   @discourseComputed("user.dismissed_banner_key", "banner.key", "hide")
@@ -27,17 +30,16 @@ export default Component.extend({
     return !hide && bannerKey && dismissedBannerKey !== bannerKey;
   },
 
-  actions: {
-    dismiss() {
-      if (this.user) {
-        this.user.dismissBanner(this.get("banner.key"));
-      } else {
-        this.set("hide", true);
-        this.keyValueStore.set({
-          key: "dismissed_banner_key",
-          value: this.get("banner.key"),
-        });
-      }
-    },
+  @action
+  dismiss() {
+    if (this.user) {
+      this.user.dismissBanner(this.get("banner.key"));
+    } else {
+      this.set("hide", true);
+      this.keyValueStore.set({
+        key: "dismissed_banner_key",
+        value: this.get("banner.key"),
+      });
+    }
   },
 });

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

@@ -1,12 +1,20 @@
 {{#if visible}}
   <div class="row">
     <div id="banner" class={{overlay}}>
-      {{d-button icon="times" action=(action "dismiss") class="btn btn-flat close" title="banner.close"}}
+      <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 {
-    position: fixed;
-  }
-
-  .close {
-    color: var(--primary-low-mid);
-    padding-left: 5px;
+  .floated-buttons {
     float: right;
-    .d-icon {
-      color: var(--primary-medium);
-    }
-  }
+    display: flex;
 
-  .meta {
-    display: none;
+    > .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);
+        }
+      }
+    }
+
+    .desktop-view & .btn.close {
+      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."
-      edit: "Edit this banner >>"
+      close: "Dismiss this banner"
+      edit: "Edit"
 
     pwa:
       install_banner: "Do you want to <a href>install %{title} on this device?</a>"