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.
This commit is contained in:
Shubham Padia 2024-09-02 20:19:43 +00:00 committed by Tim Abbott
parent 6ec1b89502
commit 82b68e9bdb
2 changed files with 4 additions and 2 deletions

View File

@ -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;

View File

@ -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>