From 9b1b52ec8a49465f2da5aed6cdc4616f86d1160e Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubham@zulip.com>
Date: Tue, 7 Oct 2025 06:07:18 +0000
Subject: [PATCH] settings: Rename grey-box to settings-highlight-box.

Having the class named after a color limited to things we can do with
the class + does not signify what the class is for in terms of it's use.

Name decided at
https://chat.zulip.org/#narrow/channel/101-design/topic/grey-box.20dark.20theme.20color.2E/near/2272404
---
 web/styles/app_components.css                        | 2 +-
 web/styles/settings.css                              | 2 +-
 web/templates/settings/linkifier_settings_admin.hbs  | 2 +-
 web/templates/settings/playground_settings_admin.hbs | 2 +-
 web/templates/settings/preferences_emoji.hbs         | 2 +-
 web/templates/settings/preferences_information.hbs   | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index e19db5ace2..81b0e52b43 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -428,7 +428,7 @@ input.settings_text_input {
     }
 }
 
-.grey-box {
+.settings-highlight-box {
     margin: 0;
     padding: 5px 10px;
     background-color: var(--color-background-modal-bar);
diff --git a/web/styles/settings.css b/web/styles/settings.css
index 252eca80e1..6eb333020f 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -907,7 +907,7 @@ input[type="checkbox"] {
     }
 }
 
-.grey-box .wrapper {
+.settings-highlight-box .wrapper {
     margin: 10px 0;
 }
 
diff --git a/web/templates/settings/linkifier_settings_admin.hbs b/web/templates/settings/linkifier_settings_admin.hbs
index 1e9d09ebd0..66cab181dd 100644
--- a/web/templates/settings/linkifier_settings_admin.hbs
+++ b/web/templates/settings/linkifier_settings_admin.hbs
@@ -29,7 +29,7 @@
 
     {{#if is_admin}}
     <form class="admin-linkifier-form">
-        <div class="add-new-linkifier-box grey-box">
+        <div class="add-new-linkifier-box settings-highlight-box">
             <div class="new-linkifier-form wrapper">
                 <div class="settings-section-title new-linkifier-section-title">
                     {{t "Add a new linkifier" }}
diff --git a/web/templates/settings/playground_settings_admin.hbs b/web/templates/settings/playground_settings_admin.hbs
index b0b9d4f528..0955a9dd8c 100644
--- a/web/templates/settings/playground_settings_admin.hbs
+++ b/web/templates/settings/playground_settings_admin.hbs
@@ -35,7 +35,7 @@
 
         {{#if is_admin}}
         <form class="admin-playground-form">
-            <div class="add-new-playground-box grey-box">
+            <div class="add-new-playground-box settings-highlight-box">
                 <div class="new-playground-form wrapper">
                     <div class="settings-section-title">
                         {{t "Add a new code playground" }}
diff --git a/web/templates/settings/preferences_emoji.hbs b/web/templates/settings/preferences_emoji.hbs
index c70e42bdb6..c099efb609 100644
--- a/web/templates/settings/preferences_emoji.hbs
+++ b/web/templates/settings/preferences_emoji.hbs
@@ -6,7 +6,7 @@
 
     <div class="input-group">
         <label class="settings-field-label">{{t "Emoji theme" }}</label>
-        <div class="emojiset_choices grey-box prop-element" id="{{prefix}}emojiset" data-setting-widget-type="radio-group" data-setting-choice-type="string">
+        <div class="emojiset_choices settings-highlight-box prop-element" id="{{prefix}}emojiset" data-setting-widget-type="radio-group" data-setting-choice-type="string">
             {{#each settings_object.emojiset_choices}}
                 <label class="preferences-radio-choice-label">
                     <span class="radio-choice-controls">
diff --git a/web/templates/settings/preferences_information.hbs b/web/templates/settings/preferences_information.hbs
index 9a54d30347..a077b09c39 100644
--- a/web/templates/settings/preferences_information.hbs
+++ b/web/templates/settings/preferences_information.hbs
@@ -6,7 +6,7 @@
 
     <div class="input-group">
         <label class="settings-field-label">{{t "User list style" }}</label>
-        <div class="user_list_style_values grey-box prop-element" id="{{prefix}}user_list_style" data-setting-widget-type="radio-group" data-setting-choice-type="number">
+        <div class="user_list_style_values settings-highlight-box prop-element" id="{{prefix}}user_list_style" data-setting-widget-type="radio-group" data-setting-choice-type="number">
             {{#each user_list_style_values}}
                 <label class="preferences-radio-choice-label">
                     <span class="radio-choice-controls">