From 82b68e9bdba060faa772c078a1f06d9c296ad337 Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubham@zulip.com>
Date: Mon, 2 Sep 2024 20:19:43 +0000
Subject: [PATCH] css: Use classname for play_notification_sound icon styles.

Having the selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
Also does some refactoring to account for the fact that
.setting_notification_sound does not have any icons as children.
---
 web/styles/settings.css                          | 4 +++-
 web/templates/settings/notification_settings.hbs | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/styles/settings.css b/web/styles/settings.css
index 162f9cda45..c7e00ba2ba 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -134,8 +134,10 @@ h3,
 .setting_notification_sound,
 .play_notification_sound {
     margin-right: 4px;
+}
 
-    & i {
+.play_notification_sound {
+    .notification-sound-icon {
         font-size: 22px;
         /* Visually center with chevron in select */
         line-height: 26px;
diff --git a/web/templates/settings/notification_settings.hbs b/web/templates/settings/notification_settings.hbs
index c4bfefe222..1a0154189b 100644
--- a/web/templates/settings/notification_settings.hbs
+++ b/web/templates/settings/notification_settings.hbs
@@ -129,7 +129,7 @@
                 {{/each}}
             </select>
             <span class="play_notification_sound">
-                <i class="fa fa-play-circle" aria-label="{{t 'Play sound' }}"></i>
+                <i class="notification-sound-icon fa fa-play-circle" aria-label="{{t 'Play sound' }}"></i>
             </span>
         </div>