From fe8fc989128fe1cd713c69966aa634d024b59ac0 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Fri, 6 Oct 2023 16:07:46 -0500
Subject: [PATCH] compose_banners: Structure innner <p> elements with
 .banner_message class.

This also styles those inner .banner_message elements to lose
margin inherited from Bootstrap. (This is now also applied to
the upload-message banner.)

It's better to achieve that with a class selector; using a `p`
element selector would mean that such a style would be evaluated
for all `<p>` elements in the DOM. Which is of course a whole lot,
thanks to Markdown alone.

Fixes: #26922
---
 web/styles/compose.css                             | 14 +++++++++++---
 .../compose_banner/not_subscribed_warning.hbs      | 12 +++++++-----
 .../compose_banner/private_stream_warning.hbs      |  4 +++-
 .../compose_banner/stream_does_not_exist_error.hbs |  2 +-
 .../compose_banner/unmute_topic_banner.hbs         |  2 +-
 web/templates/compose_banner/wildcard_warning.hbs  |  2 +-
 6 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/web/styles/compose.css b/web/styles/compose.css
index cdb5589a7a..af879d80d7 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -294,9 +294,10 @@
         flex-wrap: wrap;
     }
 
-    & .banner_content,
-    & > p {
-        margin: 0; /* override bootstrap */
+    & .banner_content {
+        /* Override Bootstrap when .banner_content is
+           a paragraph element. */
+        margin: 0;
         /* 5px right padding + 10px left-margin of the neighbouring button will match the left padding */
         padding: 8px 5px 8px 15px;
         /* The banner text uses a flex-basis of 150px,
@@ -304,6 +305,13 @@
            text lines are still comfortably readable.
            Still, it can grow and shrink as needed. */
         flex: 1 1 150px;
+
+        & .banner_message {
+            /* Override Bootstrap when .banner_content
+               contains an inner .banner_message
+               paragraph. */
+            margin: 0;
+        }
     }
 
     .main-view-banner-action-button,
diff --git a/web/templates/compose_banner/not_subscribed_warning.hbs b/web/templates/compose_banner/not_subscribed_warning.hbs
index 6da358f7a7..a809195bd1 100644
--- a/web/templates/compose_banner/not_subscribed_warning.hbs
+++ b/web/templates/compose_banner/not_subscribed_warning.hbs
@@ -1,7 +1,9 @@
 {{#> compose_banner }}
-    {{#if can_subscribe_other_users}}
-        <p>{{#tr}}<strong>{name}</strong> is not subscribed to this stream. They will not be notified unless you subscribe them.{{/tr}}</p>
-    {{else}}
-        <p>{{#tr}}<strong>{name}</strong> is not subscribed to this stream. They will not be notified if you mention them.{{/tr}}</p>
-    {{/if}}
+    <p class="banner_message">
+        {{#if can_subscribe_other_users}}
+            {{#tr}}<strong>{name}</strong> is not subscribed to this stream. They will not be notified unless you subscribe them.{{/tr}}
+        {{else}}
+            {{#tr}}<strong>{name}</strong> is not subscribed to this stream. They will not be notified if you mention them.{{/tr}}
+        {{/if}}
+    </p>
 {{/compose_banner}}
diff --git a/web/templates/compose_banner/private_stream_warning.hbs b/web/templates/compose_banner/private_stream_warning.hbs
index dbc662fc28..e64678393b 100644
--- a/web/templates/compose_banner/private_stream_warning.hbs
+++ b/web/templates/compose_banner/private_stream_warning.hbs
@@ -1,3 +1,5 @@
 {{#> compose_banner }}
-    <p>{{#tr}}Warning: <strong>#{stream_name}</strong> is a private stream.{{/tr}}</p>
+    <p class="banner_message">
+        {{#tr}}Warning: <strong>#{stream_name}</strong> is a private stream.{{/tr}}
+    </p>
 {{/compose_banner}}
diff --git a/web/templates/compose_banner/stream_does_not_exist_error.hbs b/web/templates/compose_banner/stream_does_not_exist_error.hbs
index 25e1e80830..beda3cd6af 100644
--- a/web/templates/compose_banner/stream_does_not_exist_error.hbs
+++ b/web/templates/compose_banner/stream_does_not_exist_error.hbs
@@ -1,5 +1,5 @@
 {{#> compose_banner }}
-    <p>
+    <p class="banner_message">
         {{#tr}}
         The stream <b>#{stream_name}</b> does not exist. Manage your subscriptions
         <z-link>on your Streams page</z-link>.
diff --git a/web/templates/compose_banner/unmute_topic_banner.hbs b/web/templates/compose_banner/unmute_topic_banner.hbs
index 6794b9ba4e..77ef7a1e91 100644
--- a/web/templates/compose_banner/unmute_topic_banner.hbs
+++ b/web/templates/compose_banner/unmute_topic_banner.hbs
@@ -1,5 +1,5 @@
 {{#> compose_banner }}
-    <p>
+    <p class="banner_message">
         {{#if (eq muted_narrow "stream")}}
             {{#tr}}Your message was sent to a stream you have muted.{{/tr}}
         {{else if (eq muted_narrow "topic")}}
diff --git a/web/templates/compose_banner/wildcard_warning.hbs b/web/templates/compose_banner/wildcard_warning.hbs
index 1bd0985d63..7f4eb1eefb 100644
--- a/web/templates/compose_banner/wildcard_warning.hbs
+++ b/web/templates/compose_banner/wildcard_warning.hbs
@@ -1,5 +1,5 @@
 {{#> compose_banner }}
-    <p>
+    <p class="banner_message">
         {{#tr}}
         Are you sure you want to send @-mention notifications to the <strong>{subscriber_count}</strong> users subscribed to #{stream_name}? If not, please edit your message to remove the <strong>@{wildcard_mention}</strong> mention.
         {{/tr}}