From b0e80965799e86b61cec6cba4cd8305c81100591 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Wed, 24 Jul 2024 14:37:33 +0530
Subject: [PATCH] css: Do not use "*" selector for color_animated_button
 styles.

Using "*" selector is inefficient as they require checking every
element because of the browser's bottom-up matching process.
---
 web/styles/app_components.css                | 3 ++-
 web/styles/dark_theme.css                    | 3 ++-
 web/templates/login_to_view_image_button.hbs | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 9e6e742364..c8a678fab3 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -719,7 +719,8 @@ div.overlay {
         transition: all 0.2s ease;
     }
 
-    * {
+    .zulip-icon,
+    .color-animated-button-text {
         padding: 6px 3px;
     }
 
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index ea05f7e2c2..38433fa6df 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -961,7 +961,8 @@
     .color_animated_button {
         background-color: hsl(211deg 29% 14%);
 
-        * {
+        .zulip-icon,
+        .color-animated-button-text {
             color: hsl(0deg 0% 100%);
         }
 
diff --git a/web/templates/login_to_view_image_button.hbs b/web/templates/login_to_view_image_button.hbs
index 7e92e06c8f..33ecef2ed9 100644
--- a/web/templates/login_to_view_image_button.hbs
+++ b/web/templates/login_to_view_image_button.hbs
@@ -1,6 +1,6 @@
 <div class="spectator_login_for_image_button">
     <a class="login_button color_animated_button" href="/login/">
         <i class='zulip-icon zulip-icon-log-in'></i>
-        <span>{{t "Log in to view image" }}</span>
+        <span class="color-animated-button-text">{{t "Log in to view image" }}</span>
     </a>
 </div>