banners: Redesign mobile push notifications banner.

Fixes part of #34252.

web/src/settings_notifications.ts

@@ -15,6 +15,7 @@ import * as dropdown_widget from "./dropdown_widget.ts";
 import {$t, $t_html} from "./i18n.ts";
 import * as message_notifications from "./message_notifications.ts";
 import {page_params} from "./page_params.ts";
+import * as settings_banner from "./settings_banner.ts";
 import * as settings_components from "./settings_components.ts";
 import * as settings_config from "./settings_config.ts";
 import type {SettingsPanel} from "./settings_preferences.ts";
@@ -56,6 +57,22 @@ const DESKTOP_NOTIFICATIONS_BANNER: banners.Banner = {
     custom_classes: "desktop-setting-notifications",
 };
 
+const MOBILE_PUSH_NOTIFICATION_BANNER: banners.Banner = {
+    intent: "warning",
+    label: $t({
+        defaultMessage: "Mobile push notifications are not enabled on this server.",
+    }),
+    buttons: [
+        {
+            label: $t({defaultMessage: "Learn more"}),
+            custom_classes: "banner-external-link",
+            attention: "quiet",
+        },
+    ],
+    custom_classes: "mobile-push-notifications-banner",
+    close_button: false,
+};
+
 function rerender_ui(): void {
     const $unmatched_streams_table = $("#stream-specific-notify-table");
     if ($unmatched_streams_table.length === 0) {
@@ -392,6 +409,11 @@ export function set_up(settings_panel: SettingsPanel): void {
     });
 
     set_enable_digest_emails_visibility($container, for_realm_settings);
+    settings_banner.set_up_banner(
+        $(".mobile-push-notifications-banner-container"),
+        MOBILE_PUSH_NOTIFICATION_BANNER,
+        "/help/mobile-notifications#enabling-push-notifications-for-self-hosted-servers",
+    );
 
     if (for_realm_settings) {
         // For the realm-level defaults page, we use the common

web/styles/app_components.css

@@ -555,6 +555,7 @@ input.settings_text_input {
 }
 
 .organization-upgrade-banner,
+.mobile-push-notifications-banner,
 .admin-permissions-banner,
 .desktop-setting-notifications {
     margin-bottom: 10px;

web/templates/settings/notification_settings.hbs

@@ -186,11 +186,7 @@
             {{> settings_save_discard_widget section_name="mobile-message-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
         {{#unless realm_push_notifications_enabled}}
-        <div class="tip">
-            {{#tr}}
-                Mobile push notifications are not enabled on this server. <z-link>Learn more</z-link>
-                {{#*inline "z-link"}}<a href="/help/mobile-notifications#enabling-push-notifications-for-self-hosted-servers" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
-            {{/tr}}
+        <div class="mobile-push-notifications-banner-container banner-wrapper">
         </div>
         {{/unless}}