banners: Redesign stream info banner.

Fixes part of #34252.

web/src/stream_settings_ui.ts

@@ -4,11 +4,11 @@ import assert from "minimalistic-assert";
 import type * as tippy from "tippy.js";
 
 import render_stream_creation_confirmation_banner from "../templates/modal_banner/stream_creation_confirmation_banner.hbs";
-import render_stream_info_banner from "../templates/modal_banner/stream_info_banner.hbs";
 import render_browse_streams_list from "../templates/stream_settings/browse_streams_list.hbs";
 import render_browse_streams_list_item from "../templates/stream_settings/browse_streams_list_item.hbs";
 import render_stream_settings_overlay from "../templates/stream_settings/stream_settings_overlay.hbs";
 
+import type {Banner} from "./banners.ts";
 import * as blueslip from "./blueslip.ts";
 import * as browser_history from "./browser_history.ts";
 import * as components from "./components.ts";
@@ -30,6 +30,7 @@ import {postprocess_content} from "./postprocess_content.ts";
 import * as resize from "./resize.ts";
 import * as scroll_util from "./scroll_util.ts";
 import * as search_util from "./search_util.ts";
+import * as settings_banner from "./settings_banner.ts";
 import * as settings_config from "./settings_config.ts";
 import * as settings_data from "./settings_data.ts";
 import {type GroupSettingValue, current_user, realm} from "./state_data.ts";
@@ -51,6 +52,21 @@ import type {StreamSubscription} from "./sub_store.ts";
 import * as util from "./util.ts";
 import * as views_util from "./views_util.ts";
 
+const STREAM_INFO_BANNER: Banner = {
+    intent: "info",
+    label: $t({
+        defaultMessage: "Channels organize conversations based on who needs to see them.",
+    }),
+    buttons: [
+        {
+            label: $t({defaultMessage: "Learn more"}),
+            custom_classes: "banner-external-link",
+            attention: "quiet",
+        },
+    ],
+    close_button: false,
+};
+
 export function is_sub_already_present(sub: StreamSubscription): boolean {
     return stream_ui_updates.row_for_stream_id(sub.stream_id).length > 0;
 }
@@ -902,16 +918,10 @@ function setup_page(callback: () => void): void {
             throttled_redraw_left_panel();
         });
 
-        const context = {
-            banner_type: compose_banner.INFO,
-            classname: "stream_info",
-            hide_close_button: true,
-            button_text: $t({defaultMessage: "Learn more"}),
-            button_link: "/help/introduction-to-channels",
-        };
-
-        $("#channels_overlay_container .nothing-selected .stream-info-banner").html(
-            render_stream_info_banner(context),
+        settings_banner.set_up_banner(
+            $(".stream-info-banner"),
+            STREAM_INFO_BANNER,
+            "/help/introduction-to-channels",
         );
 
         // When hitting Enter in the stream creation box, we open the

web/templates/modal_banner/stream_info_banner.hbs

@@ -1,5 +0,0 @@
-{{#> modal_banner . }}
-    <p class="banner_message">
-        {{#tr}}Channels organize conversations based on who needs to see them.{{/tr}}
-    </p>
-{{/modal_banner}}

web/templates/stream_settings/stream_settings_overlay.hbs

@@ -73,7 +73,7 @@
                 </div>
                 <div class="right">
                     <div class="nothing-selected">
-                        <div class="stream-info-banner"></div>
+                        <div class="stream-info-banner banner-wrapper"></div>
                         <div class="create-stream-button-container">
                             <button type="button" class="create_stream_button animated-purple-button" {{#unless can_create_streams}}disabled{{/unless}}>{{t 'Create channel' }}</button>
                             {{#unless can_create_streams}}