compose_banner: Update classnames to main-view-banner-action-button.

Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner_action_button
to main-view-banner-action-button.

web/e2e-tests/mention.test.ts

@@ -30,7 +30,7 @@ async function test_mention(page: Page): Promise<void> {
     await page.click("#compose-send-button");
 
     await page.waitForSelector("#compose_banners .wildcard_warning", {visible: true});
-    await page.click("#compose_banners .wildcard_warning .compose_banner_action_button");
+    await page.click("#compose_banners .wildcard_warning .main-view-banner-action-button");
     await page.waitForSelector(".wildcard_warning", {hidden: true});
 
     await common.check_messages_sent(page, "zhome", [["Verona > Test mention all", ["@all"]]]);

web/src/compose.js

@@ -470,7 +470,9 @@ export function initialize() {
 
     $("body").on(
         "click",
-        `.${CSS.escape(compose_banner.CLASSNAMES.wildcard_warning)} .compose_banner_action_button`,
+        `.${CSS.escape(
+            compose_banner.CLASSNAMES.wildcard_warning,
+        )} .main-view-banner-action-button`,
         (event) => {
             event.preventDefault();
             const {$banner_container, is_edit_input} = get_input_info(event);
@@ -497,7 +499,7 @@ export function initialize() {
     )}`;
     $("body").on(
         "click",
-        `${user_not_subscribed_selector} .compose_banner_action_button`,
+        `${user_not_subscribed_selector} .main-view-banner-action-button`,
         (event) => {
             event.preventDefault();
 
@@ -513,7 +515,7 @@ export function initialize() {
 
     $("body").on(
         "click",
-        `.${CSS.escape(compose_banner.CLASSNAMES.topic_resolved)} .compose_banner_action_button`,
+        `.${CSS.escape(compose_banner.CLASSNAMES.topic_resolved)} .main-view-banner-action-button`,
         (event) => {
             event.preventDefault();
 
@@ -532,7 +534,7 @@ export function initialize() {
         "click",
         `.${CSS.escape(
             compose_banner.CLASSNAMES.unmute_topic_notification,
-        )} .compose_banner_action_button`,
+        )} .main-view-banner-action-button`,
         (event) => {
             event.preventDefault();
 
@@ -554,7 +556,7 @@ export function initialize() {
         "click",
         `.${CSS.escape(
             compose_banner.CLASSNAMES.recipient_not_subscribed,
-        )} .compose_banner_action_button`,
+        )} .main-view-banner-action-button`,
         (event) => {
             event.preventDefault();
             const {$banner_container} = get_input_info(event);

web/styles/compose.css

@@ -292,7 +292,7 @@
         flex-grow: 1;
     }
 
-    .compose_banner_action_button {
+    .main-view-banner-action-button {
         border: none;
         border-radius: 4px;
         padding: 5px 10px;
@@ -333,7 +333,7 @@
             }
         }
 
-        .compose_banner_action_button {
+        .main-view-banner-action-button {
             background-color: hsl(147deg 57% 25% / 10%);
             color: inherit;
 
@@ -368,7 +368,7 @@
             }
         }
 
-        .compose_banner_action_button {
+        .main-view-banner-action-button {
             background-color: hsl(38deg 44% 27% / 10%);
             color: inherit;
 
@@ -399,7 +399,7 @@
             }
         }
 
-        .compose_banner_action_button {
+        .main-view-banner-action-button {
             background-color: hsl(3deg 57% 33% / 10%);
             color: inherit;
 

web/styles/dark_theme.css

@@ -239,7 +239,7 @@
                 }
             }
 
-            .compose_banner_action_button {
+            .main-view-banner-action-button {
                 background-color: hsl(147deg 51% 55% / 10%);
                 color: inherit;
 
@@ -271,7 +271,7 @@
                 }
             }
 
-            .compose_banner_action_button {
+            .main-view-banner-action-button {
                 background-color: hsl(50deg 45% 61% / 10%);
                 color: hsl(50deg 45% 61%);
 
@@ -302,7 +302,7 @@
                 }
             }
 
-            .compose_banner_action_button {
+            .main-view-banner-action-button {
                 background-color: hsl(3deg 73% 74% / 10%);
                 color: hsl(3deg 73% 74%);
 

web/templates/compose_banner/compose_banner.hbs

@@ -9,7 +9,7 @@
     <div class="banner_content">{{> @partial-block}}</div>
     {{/if}}
     {{#if button_text}}
-    <button class="compose_banner_action_button{{#if hide_close_button}} right_edge{{/if}}" {{#if scheduling_message}}data-validation-trigger="schedule"{{/if}}>{{button_text}}</button>
+    <button class="main-view-banner-action-button{{#if hide_close_button}} right_edge{{/if}}" {{#if scheduling_message}}data-validation-trigger="schedule"{{/if}}>{{button_text}}</button>
     {{/if}}
     {{#if hide_close_button}}
     {{!-- hide_close_button is null by default, and false if explicitly set as false. --}}

web/templates/compose_banner/success_message_scheduled_banner.hbs

@@ -4,6 +4,6 @@
     <p class="banner_content">{{t 'Your message has been scheduled for {deliver_at}.' }}
         <a href="#scheduled">{{t "View scheduled messages" }}</a>
     </p>
-    <button class="compose_banner_action_button undo_scheduled_message" >{{t "Undo"}}</button>
+    <button class="main-view-banner-action-button undo_scheduled_message" >{{t "Undo"}}</button>
     <a role="button" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
 </div>