From 4db331ed21556faca0071e8d0f82667b16af8a1d Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Sun, 15 Oct 2023 10:23:06 +0000
Subject: [PATCH] empty_list_widget: Use class instead of id.

We were using id before to increase their specificity, but
since it is possible for multiple empty_list_widget_for_list/table
to be in DOM at the same time, we should use a class here. Used
`!important` here so that we can force our padding where these
classes are used.
---
 web/src/user_profile.js                       | 2 +-
 web/styles/app_components.css                 | 6 +++---
 web/styles/popovers.css                       | 2 +-
 web/styles/recent_view.css                    | 2 +-
 web/styles/right_sidebar.css                  | 2 +-
 web/templates/empty_list_widget_for_list.hbs  | 2 +-
 web/templates/empty_list_widget_for_table.hbs | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/src/user_profile.js b/web/src/user_profile.js
index 4b74973b17..e1612b59ff 100644
--- a/web/src/user_profile.js
+++ b/web/src/user_profile.js
@@ -214,7 +214,7 @@ function render_user_stream_list(streams, user) {
                 return item && item.name.toLocaleLowerCase().includes(value);
             },
             onupdate() {
-                if ($container.find("#empty-table-message").length) {
+                if ($container.find(".empty-table-message").length) {
                     $container.parent().addClass("empty-list");
                 }
             },
diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index a010ae2818..bc23b51f36 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -1172,12 +1172,12 @@ div.overlay {
     }
 }
 
-#empty-list-message,
-#empty-table-message {
+.empty-list-message,
+.empty-table-message {
     background-color: inherit;
     color: var(--color-text-default);
     font-size: 1.5em;
-    padding: 3em 1em;
+    padding: 3em 1em !important;
     text-align: center;
 }
 
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index f0c6b1a96c..6994bef9c4 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -663,7 +663,7 @@ ul {
     .empty-list {
         border: none;
 
-        #empty-table-message {
+        .empty-table-message {
             padding: 3em 1em;
         }
     }
diff --git a/web/styles/recent_view.css b/web/styles/recent_view.css
index e6c8629c5f..a58de9c7fd 100644
--- a/web/styles/recent_view.css
+++ b/web/styles/recent_view.css
@@ -53,7 +53,7 @@
             }
         }
 
-        #empty-table-message {
+        .empty-table-message {
             background-color: var(--color-background);
             padding: 3em 1em;
         }
diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index 7bf8d99055..69ac66e807 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -85,7 +85,7 @@ $user_status_emoji_width: 24px;
         display: block;
     }
 
-    #empty-list-message {
+    .empty-list-message {
         font-size: 1.2em;
 
         &:hover {
diff --git a/web/templates/empty_list_widget_for_list.hbs b/web/templates/empty_list_widget_for_list.hbs
index 191d781be2..47d5fc51d7 100644
--- a/web/templates/empty_list_widget_for_list.hbs
+++ b/web/templates/empty_list_widget_for_list.hbs
@@ -1 +1 @@
-<li id="empty-list-message">{{empty_list_message}}</li>
+<li class="empty-list-message">{{empty_list_message}}</li>
diff --git a/web/templates/empty_list_widget_for_table.hbs b/web/templates/empty_list_widget_for_table.hbs
index 63767c8b18..5cd6397e72 100644
--- a/web/templates/empty_list_widget_for_table.hbs
+++ b/web/templates/empty_list_widget_for_table.hbs
@@ -1,5 +1,5 @@
 <tr>
-    <td id="empty-table-message" colspan="{{column_count}}">
+    <td class="empty-table-message" colspan="{{column_count}}">
         {{empty_list_message}}
     </td>
 </tr>