FIX: Small tweaks to "no messages" education (#12588)

* Remove "Message" button in quick access menu no messages education
* Reword education prompt
* Remove background colour

app/assets/javascripts/discourse/app/widgets/quick-access-messages.js

@@ -27,37 +27,20 @@ function toItem(message) {
 
 createWidget("no-quick-access-messages", {
   html() {
-    let privacyLink =
-      this.siteSettings.privacy_policy_url || getURL("/privacy");
-
-    let rawHtml = [
-      `<div class="empty-state-body">
-      <p>
-      ${I18n.t("user.no_messages_body", {
-        privacyLink,
-      }).htmlSafe()}</p>`,
-    ];
-
-    if (this.currentUser.can_send_private_messages) {
-      rawHtml.push(
-        `<p>
-          <a class="btn btn-primary btn-icon-text" href="${getURL(
-            ""
-          )}/new-message">
-            ${iconHTML("envelope")}${I18n.t(
-          "user.new_private_message"
-        ).htmlSafe()}
-          </a>
-        </p>`
-      );
-    }
-    rawHtml.push("</div>");
-
     return h("div.empty-state", [
       h("span.empty-state-title", I18n.t("user.no_messages_title")),
+      h(
+        "div.empty-state-body",
         new RawHtml({
-        html: rawHtml.join(""),
-      }),
+          html:
+            "<p>" +
+            I18n.t("user.no_messages_body", {
+              aboutUrl: getURL("/about"),
+              icon: iconHTML("envelope"),
+            }).htmlSafe() +
+            "</p>",
+        })
+      ),
     ]);
   },
 });

app/assets/stylesheets/common/base/empty-state.scss

@@ -1,15 +1,15 @@
 .empty-state {
-  background: var(--tertiary-low);
   color: var(--primary);
   margin: 0;
-  padding: 1em 1.5em;
+  padding: 0.5em 1em;
   display: flex;
   flex-direction: column;
 
   .empty-state-title {
     font-weight: 700;
-    padding: 0 0 0.5em 0;
+    padding: 0;
     margin: 0;
+    font-size: $font-up-1;
   }
 
   .empty-state-body {

config/locales/client.en.yml

@@ -1026,8 +1026,8 @@ en:
       dismiss_notifications_tooltip: "Mark all unread notifications as read"
       no_messages_title: "You don’t have any messages"
       no_messages_body: >
-        Need to have a direct personal conversation with someone, outside the normal conversational flow?<br><br>
-        Message them by selecting their avatar and then look for the MESSAGE button.
+        Need to have a direct personal conversation with someone, outside the normal conversational flow? Message them by selecting their avatar and using the %{icon} message button.<br><br>
+        If you need help, you can <a href='%{aboutUrl}'>message a staff member</a>.
       first_notification: "Your first notification! Select it to begin."
       dynamic_favicon: "Show counts on browser icon"
       skip_new_user_tips: