UX: Users can postpone discobot's tutorial. (#13060)

app/assets/javascripts/discourse/app/widgets/header.js

@@ -101,7 +101,18 @@ createWidget("header-notifications", {
                 "span.ring-backdrop",
                 {},
                 h("h1.ring-first-notification", {}, [
-                  h("span", {}, I18n.t("user.first_notification")),
+                  h(
+                    "span",
+                    { className: "first-notification" },
+                    I18n.t("user.first_notification")
+                  ),
+                  h("span", { className: "read-later" }, [
+                    this.attach("link", {
+                      action: "readLater",
+                      className: "read-later-link",
+                      label: "user.skip_new_user_tips.read_later",
+                    }),
+                  ]),
                   h("span", {}, [
                     I18n.t("user.skip_new_user_tips.not_first_time"),
                     " ",
@@ -110,7 +121,6 @@ createWidget("header-notifications", {
                       className: "skip-new-user-tips",
                       label: "user.skip_new_user_tips.skip_link",
                       title: "user.skip_new_user_tips.description",
-                      omitSpan: true,
                     }),
                   ]),
                 ])
@@ -605,6 +615,10 @@ export default createWidget("header", {
     this.scheduleRerender();
   },
 
+  readLater() {
+    this.headerDismissFirstNotificationMask();
+  },
+
   skipNewUserTips() {
     this.headerDismissFirstNotificationMask();
     ajax(userPath(this.currentUser.username_lower), {

app/assets/stylesheets/common/base/discourse.scss

@@ -529,18 +529,21 @@ table {
   width: 230px;
   line-height: $line-height-medium;
 
-  > span:first-child {
+  .first-notification,
+  .read-later {
     display: inline-block;
     margin-bottom: 36px;
   }
 
-  .skip-new-user-tips {
+  .skip-new-user-tips,
+  .read-later-link {
     font-size: $font-down-1;
     text-decoration: underline;
   }
 
   &,
-  .skip-new-user-tips {
+  .skip-new-user-tips,
+  .read-later-link {
     color: #eee;
   }
 }

config/locales/client.en.yml

@@ -1041,6 +1041,7 @@ en:
         description: "Skip new user onboarding tips and badges"
         not_first_time: "Not your first time?"
         skip_link: "Skip these tips"
+        read_later: "I'll read it later."
       theme_default_on_all_devices: "Make this the default theme on all my devices"
       color_scheme_default_on_all_devices: "Set default color scheme(s) on all my devices"
       color_scheme: "Color Scheme"