From 1afc730da7ec6ff1b59a0f0e35989729ef154da3 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Thu, 16 Feb 2023 15:27:08 +0530
Subject: [PATCH] settings: Add settings_select class to select elements.

This commit adds settings_select class to select elements in
user and organization settings, such that we can add CSS
using this class and not using "select" as selector so that
we can easily add a select element in future with different
CSS if needed.
---
 static/styles/settings.css                    |  2 +-
 .../templates/settings/account_settings.hbs   |  2 +-
 .../settings/custom_user_profile_field.hbs    |  2 +-
 .../templates/settings/display_settings.hbs   |  8 ++--
 .../settings/notification_settings.hbs        |  6 +--
 .../organization_permissions_admin.hbs        | 38 +++++++++----------
 .../settings/organization_profile_admin.hbs   |  2 +-
 .../settings/organization_settings_admin.hbs  |  8 ++--
 .../organization_user_settings_defaults.hbs   |  2 +-
 .../templates/settings/profile_settings.hbs   |  2 +-
 10 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/static/styles/settings.css b/static/styles/settings.css
index ae3032b8d9..391fe56323 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -355,7 +355,7 @@ td .button {
         color: hsl(0, 0%, 20%);
     }
 
-    select {
+    .settings_select {
         height: 30px;
         width: 220px;
         padding: 4px 6px;
diff --git a/static/templates/settings/account_settings.hbs b/static/templates/settings/account_settings.hbs
index b7d4b26e94..e10842bf2c 100644
--- a/static/templates/settings/account_settings.hbs
+++ b/static/templates/settings/account_settings.hbs
@@ -82,7 +82,7 @@
                 <label for="email_address_visibility" class="dropdown-title">{{t "Who can access your email address" }}
                     {{> ../help_link_widget link="/help/configure-email-visibility" }}
                 </label>
-                <select name="email_address_visibility" class="email_address_visibility prop-element bootstrap-focus-style" data-setting-widget-type="number"
+                <select name="email_address_visibility" class="email_address_visibility prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number"
                   id="user_email_address_visibility">
                     {{> dropdown_options_widget option_values=email_address_visibility_values}}
                 </select>
diff --git a/static/templates/settings/custom_user_profile_field.hbs b/static/templates/settings/custom_user_profile_field.hbs
index 2ecf33532b..9e27dfecff 100644
--- a/static/templates/settings/custom_user_profile_field.hbs
+++ b/static/templates/settings/custom_user_profile_field.hbs
@@ -6,7 +6,7 @@
         {{#if is_long_text_field}}
         <textarea maxlength="500" class="custom_user_field_value settings_textarea">{{ field_value.value }}</textarea>
         {{else if is_select_field}}
-        <select class="custom_user_field_value bootstrap-focus-style">
+        <select class="custom_user_field_value settings_select bootstrap-focus-style">
             <option value=""></option>
             {{#each field_choices}}
                 <option value="{{ this.value }}" {{#if this.selected}}selected{{/if}}>{{ this.text }}</option>
diff --git a/static/templates/settings/display_settings.hbs b/static/templates/settings/display_settings.hbs
index 7f8b234eca..3bfd67aa63 100644
--- a/static/templates/settings/display_settings.hbs
+++ b/static/templates/settings/display_settings.hbs
@@ -19,7 +19,7 @@
 
         <div class="input-group">
             <label for="twenty_four_hour_time" class="dropdown-title">{{ settings_label.twenty_four_hour_time }}</label>
-            <select name="twenty_four_hour_time" class="setting_twenty_four_hour_time prop-element bootstrap-focus-style" id="{{prefix}}twenty_four_hour_time" data-setting-widget-type="string">
+            <select name="twenty_four_hour_time" class="setting_twenty_four_hour_time prop-element settings_select bootstrap-focus-style" id="{{prefix}}twenty_four_hour_time" data-setting-widget-type="string">
                 {{#each twenty_four_hour_time_values}}
                     <option value='{{ this.value }}'>{{ this.description }}</option>
                 {{/each}}
@@ -37,7 +37,7 @@
 
         <div class="input-group">
             <label for="color_scheme" class="dropdown-title">{{t "Color scheme" }}</label>
-            <select name="color_scheme" class="setting_color_scheme prop-element bootstrap-focus-style" id="{{prefix}}color_scheme" data-setting-widget-type="number">
+            <select name="color_scheme" class="setting_color_scheme prop-element settings_select bootstrap-focus-style" id="{{prefix}}color_scheme" data-setting-widget-type="number">
                 {{> dropdown_options_widget option_values=color_scheme_values}}
             </select>
         </div>
@@ -118,7 +118,7 @@
             <label for="default_view" class="dropdown-title">{{t "Default view" }}
                 {{> ../help_link_widget link="/help/configure-default-view" }}
             </label>
-            <select name="default_view" class="setting_default_view prop-element bootstrap-focus-style" id="{{prefix}}default_view" data-setting-widget-type="string">
+            <select name="default_view" class="setting_default_view prop-element settings_select bootstrap-focus-style" id="{{prefix}}default_view" data-setting-widget-type="string">
                 {{> dropdown_options_widget option_values=default_view_values}}
             </select>
         </div>
@@ -133,7 +133,7 @@
             <label for="demote_inactive_streams" class="dropdown-title">{{t "Demote inactive streams" }}
                 {{> ../help_link_widget link="/help/manage-inactive-streams" }}
             </label>
-            <select name="demote_inactive_streams" class="setting_demote_inactive_streams prop-element bootstrap-focus-style" id="{{prefix}}demote_inactive_streams"  data-setting-widget-type="number">
+            <select name="demote_inactive_streams" class="setting_demote_inactive_streams prop-element settings_select bootstrap-focus-style" id="{{prefix}}demote_inactive_streams"  data-setting-widget-type="number">
                 {{> dropdown_options_widget option_values=demote_inactive_streams_values}}
             </select>
         </div>
diff --git a/static/templates/settings/notification_settings.hbs b/static/templates/settings/notification_settings.hbs
index 4d28a2a400..7d9902c1e9 100644
--- a/static/templates/settings/notification_settings.hbs
+++ b/static/templates/settings/notification_settings.hbs
@@ -74,7 +74,7 @@
         </label>
 
         <div class="input-group {{#unless enable_sound_select}}control-label-disabled{{/unless}}">
-            <select name="notification_sound" class="setting_notification_sound prop-element bootstrap-focus-style" id="{{prefix}}notification_sound" data-setting-widget-type="string"
+            <select name="notification_sound" class="setting_notification_sound prop-element settings_select bootstrap-focus-style" id="{{prefix}}notification_sound" data-setting-widget-type="string"
               {{#unless enable_sound_select}}
               disabled
               {{/unless}}>
@@ -90,7 +90,7 @@
 
         <div class="input-group">
             <label for="desktop_icon_count_display" class="dropdown-title">{{ settings_label.desktop_icon_count_display }}</label>
-            <select name="desktop_icon_count_display" class="setting_desktop_icon_count_display prop-element bootstrap-focus-style" id="{{prefix}}desktop_icon_count_display" data-setting-widget-type="number">
+            <select name="desktop_icon_count_display" class="setting_desktop_icon_count_display prop-element settings_select bootstrap-focus-style" id="{{prefix}}desktop_icon_count_display" data-setting-widget-type="number">
                 {{> dropdown_options_widget option_values=desktop_icon_count_display_values}}
             </select>
         </div>
@@ -129,7 +129,7 @@
             <label for="email_notifications_batching_period">
                 {{t "Delay before sending message notification emails" }}
             </label>
-            <select name="email_notifications_batching_period_seconds" class="setting_email_notifications_batching_period_seconds prop-element bootstrap-focus-style" id="{{prefix}}email_notifications_batching_period_seconds" data-setting-widget-type="time-limit">
+            <select name="email_notifications_batching_period_seconds" class="setting_email_notifications_batching_period_seconds prop-element settings_select bootstrap-focus-style" id="{{prefix}}email_notifications_batching_period_seconds" data-setting-widget-type="time-limit">
                 {{#each email_notifications_batching_period_values}}
                     <option value="{{ this.value }}">{{ this.description }}</option>
                 {{/each}}
diff --git a/static/templates/settings/organization_permissions_admin.hbs b/static/templates/settings/organization_permissions_admin.hbs
index 9b0200bfa2..f3eeb6b501 100644
--- a/static/templates/settings/organization_permissions_admin.hbs
+++ b/static/templates/settings/organization_permissions_admin.hbs
@@ -18,14 +18,14 @@
                       label=admin_settings_label.realm_invite_required}}
                     <label for="realm_invite_to_realm_policy" class="dropdown-title">{{t "Who can invite users to this organization" }}
                     </label>
-                    <select name="realm_invite_to_realm_policy" id="id_realm_invite_to_realm_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
+                    <select name="realm_invite_to_realm_policy" id="id_realm_invite_to_realm_policy" class="prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=invite_to_realm_policy_values}}
                     </select>
                 </div>
 
                 <div class="input-group">
                     <label for="realm_org_join_restrictions" class="dropdown-title">{{t "Restrict email domains of new users?" }}</label>
-                    <select name="realm_org_join_restrictions" id="id_realm_org_join_restrictions" class="prop-element bootstrap-focus-style">
+                    <select name="realm_org_join_restrictions" id="id_realm_org_join_restrictions" class="prop-element settings_select bootstrap-focus-style">
                         <option value="no_restriction">{{t "No restrictions" }}</option>
                         <option value="no_disposable_email">{{t "Don’t allow disposable email addresses" }}</option>
                         <option value="only_selected_domain">{{t "Restrict to a list of domains" }}</option>
@@ -42,7 +42,7 @@
                         {{t "Waiting period before new members turn into full members" }}
                         {{> ../help_link_widget link="/help/restrict-permissions-of-new-members" }}
                     </label>
-                    <select name="realm_waiting_period_threshold" id="id_realm_waiting_period_threshold" class="prop-element bootstrap-focus-style" data-setting-widget-type="time-limit">
+                    <select name="realm_waiting_period_threshold" id="id_realm_waiting_period_threshold" class="prop-element settings_select bootstrap-focus-style" data-setting-widget-type="time-limit">
                         {{> dropdown_options_widget option_values=waiting_period_threshold_dropdown_values}}
                     </select>
                     {{!-- This setting is hidden unless `custom_period` --}}
@@ -91,7 +91,7 @@
             <div class="m-10 inline-block organization-permissions-parent">
                 <div class="input-group">
                     <label for="realm_create_public_stream_policy" class="dropdown-title">{{t "Who can create public streams" }}</label>
-                    <select name="realm_create_public_stream_policy" id="id_realm_create_public_stream_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
+                    <select name="realm_create_public_stream_policy" id="id_realm_create_public_stream_policy" class="prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_policy_values}}
                     </select>
                 </div>
@@ -105,19 +105,19 @@
                   help_link="/help/public-access-option"}}
                 <div class="input-group realm_create_web_public_stream_policy">
                     <label for="realm_create_web_public_stream_policy" class="dropdown-title">{{t "Who can create web-public streams" }}</label>
-                    <select name="realm_create_web_public_stream_policy" id="id_realm_create_web_public_stream_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
+                    <select name="realm_create_web_public_stream_policy" id="id_realm_create_web_public_stream_policy" class="prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=create_web_public_stream_policy_values}}
                     </select>
                 </div>
                 <div class="input-group">
                     <label for="realm_create_private_stream_policy" class="dropdown-title">{{t "Who can create private streams" }}</label>
-                    <select name="realm_create_private_stream_policy" id="id_realm_create_private_stream_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
+                    <select name="realm_create_private_stream_policy" id="id_realm_create_private_stream_policy" class="prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_policy_values}}
                     </select>
                 </div>
                 <div class="input-group">
                     <label for="realm_invite_to_stream_policy" class="dropdown-title">{{t "Who can add users to streams" }}</label>
-                    <select name="realm_invite_to_stream_policy" id="id_realm_invite_to_stream_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
+                    <select name="realm_invite_to_stream_policy" id="id_realm_invite_to_stream_policy" class="prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_policy_values}}
                     </select>
                 </div>
@@ -125,7 +125,7 @@
                     <label for="realm_wildcard_mention_policy" class="dropdown-title">{{t "Who can use @all/@everyone mentions in large streams" }}
                         {{> ../help_link_widget link="/help/restrict-wildcard-mentions" }}
                     </label>
-                    <select name="realm_wildcard_mention_policy" id="id_realm_wildcard_mention_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
+                    <select name="realm_wildcard_mention_policy" id="id_realm_wildcard_mention_policy" class="prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=wildcard_mention_policy_values}}
                     </select>
                 </div>
@@ -154,7 +154,7 @@
 
                 <div class="input-group time-limit-setting">
                     <label for="realm_message_content_edit_limit_seconds" class="dropdown-title">{{t "Time limit for editing messages" }}</label>
-                    <select name="realm_message_content_edit_limit_seconds" id="id_realm_message_content_edit_limit_seconds" class="prop-element bootstrap-focus-style" {{#unless realm_allow_message_editing}}disabled{{/unless}} data-setting-widget-type="time-limit">
+                    <select name="realm_message_content_edit_limit_seconds" id="id_realm_message_content_edit_limit_seconds" class="prop-element settings_select bootstrap-focus-style" {{#unless realm_allow_message_editing}}disabled{{/unless}} data-setting-widget-type="time-limit">
                         {{#each msg_edit_limit_dropdown_values}}
                             <option value="{{value}}">{{text}}</option>
                         {{/each}}
@@ -183,14 +183,14 @@
             </div>
             <div class="input-group">
                 <label for="realm_edit_topic_policy" class="dropdown-title">{{t "Who can move messages to another topic" }}</label>
-                <select name="realm_edit_topic_policy" id="id_realm_edit_topic_policy" class="prop-element move-message-policy-setting bootstrap-focus-style" data-setting-widget-type="number">
+                <select name="realm_edit_topic_policy" id="id_realm_edit_topic_policy" class="prop-element move-message-policy-setting settings_select bootstrap-focus-style" data-setting-widget-type="number">
                     {{> dropdown_options_widget option_values=edit_topic_policy_values}}
                 </select>
             </div>
 
             <div class="input-group time-limit-setting">
                 <label for="realm_move_messages_within_stream_limit_seconds" class="dropdown-title">{{t "Time limit for editing topics" }} <i>({{t "does not apply to moderators and administrators" }})</i></label>
-                <select name="realm_move_messages_within_stream_limit_seconds" id="id_realm_move_messages_within_stream_limit_seconds" class="prop-element" data-setting-widget-type="time-limit">
+                <select name="realm_move_messages_within_stream_limit_seconds" id="id_realm_move_messages_within_stream_limit_seconds" class="prop-element settings_select" data-setting-widget-type="time-limit">
                     {{#each msg_move_limit_dropdown_values}}
                         <option value="{{value}}">{{text}}</option>
                     {{/each}}
@@ -209,14 +209,14 @@
             <div class="input-group">
                 <label for="realm_move_messages_between_streams_policy">{{t "Who can move messages to another stream" }}
                 </label>
-                <select name="realm_move_messages_between_streams_policy" class="setting-widget prop-element bootstrap-focus-style move-message-policy-setting" id="id_realm_move_messages_between_streams_policy" data-setting-widget-type="number">
+                <select name="realm_move_messages_between_streams_policy" class="setting-widget prop-element bootstrap-focus-style move-message-policy-setting settings_select" id="id_realm_move_messages_between_streams_policy" data-setting-widget-type="number">
                     {{> dropdown_options_widget option_values=move_messages_between_streams_policy_values}}
                 </select>
             </div>
 
             <div class="input-group time-limit-setting">
                 <label for="realm_move_messages_between_streams_limit_seconds" class="dropdown-title">{{t "Time limit for moving messages between streams" }} <i>({{t "does not apply to moderators and administrators" }})</i></label>
-                <select name="realm_move_messages_between_streams_limit_seconds" id="id_realm_move_messages_between_streams_limit_seconds" class="prop-element bootstrap-focus-style" data-setting-widget-type="time-limit">
+                <select name="realm_move_messages_between_streams_limit_seconds" id="id_realm_move_messages_between_streams_limit_seconds" class="prop-element bootstrap-focus-style settings_select" data-setting-widget-type="time-limit">
                     {{#each msg_move_limit_dropdown_values}}
                         <option value="{{value}}">{{text}}</option>
                     {{/each}}
@@ -248,7 +248,7 @@
                     <label for="realm_delete_own_message_policy" class="dropdown-title">
                         {{t "Who can delete their own messages" }}
                     </label>
-                    <select name="realm_delete_own_message_policy" id="id_realm_delete_own_message_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
+                    <select name="realm_delete_own_message_policy" id="id_realm_delete_own_message_policy" class="prop-element bootstrap-focus-style settings_select" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_message_policy_values}}
                     </select>
                 </div>
@@ -257,7 +257,7 @@
                     <label for="realm_message_content_delete_limit_seconds" class="dropdown-title">
                         {{t "Time limit for deleting messages" }} <i>({{t "does not apply to administrators" }})</i>
                     </label>
-                    <select name="realm_message_content_delete_limit_seconds" id="id_realm_message_content_delete_limit_seconds" class="prop-element bootstrap-focus-style" data-setting-widget-type="time-limit">
+                    <select name="realm_message_content_delete_limit_seconds" id="id_realm_message_content_delete_limit_seconds" class="prop-element bootstrap-focus-style settings_select" data-setting-widget-type="time-limit">
                         {{#each msg_delete_limit_dropdown_values}}
                             <option value="{{value}}">{{text}}</option>
                         {{/each}}
@@ -284,21 +284,21 @@
             <div class="m-10 inline-block organization-permissions-parent">
                 <div class="input-group">
                     <label for="realm_bot_creation_policy">{{t "Who can add bots" }}</label>
-                    <select name="realm_bot_creation_policy" class="setting-widget prop-element bootstrap-focus-style" id="id_realm_bot_creation_policy" data-setting-widget-type="number">
+                    <select name="realm_bot_creation_policy" class="setting-widget prop-element settings_select bootstrap-focus-style" id="id_realm_bot_creation_policy" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=bot_creation_policy_values}}
                     </select>
                 </div>
 
                 <div class="input-group">
                     <label for="realm_user_group_edit_policy" class="dropdown-title">{{t "Who can create and manage user groups" }}</label>
-                    <select name="realm_user_group_edit_policy" id="id_realm_user_group_edit_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
+                    <select name="realm_user_group_edit_policy" id="id_realm_user_group_edit_policy" class="prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_policy_values}}
                     </select>
                 </div>
 
                 <div class="input-group">
                     <label for="realm_add_custom_emoji_policy" class="dropdown-title">{{t "Who can add custom emoji" }}</label>
-                    <select name="realm_add_custom_emoji_policy" class="setting-widget prop-element bootstrap-focus-style" id="id_realm_add_custom_emoji_policy" data-setting-widget-type="number">
+                    <select name="realm_add_custom_emoji_policy" class="setting-widget prop-element settings_select bootstrap-focus-style" id="id_realm_add_custom_emoji_policy" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_policy_values}}
                     </select>
                 </div>
@@ -307,7 +307,7 @@
                     <label for="realm_private_message_policy">{{t "Who can use private messages" }} ({{t "beta" }})
                         {{> ../help_link_widget link="/help/restrict-private-messages" }}
                     </label>
-                    <select name="realm_private_message_policy" class="setting-widget prop-element bootstrap-focus-style" id="id_realm_private_message_policy" data-setting-widget-type="number">
+                    <select name="realm_private_message_policy" class="setting-widget prop-element settings_select bootstrap-focus-style" id="id_realm_private_message_policy" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=private_message_policy_values}}
                     </select>
                 </div>
diff --git a/static/templates/settings/organization_profile_admin.hbs b/static/templates/settings/organization_profile_admin.hbs
index 6ed2dbb265..c42c646380 100644
--- a/static/templates/settings/organization_profile_admin.hbs
+++ b/static/templates/settings/organization_profile_admin.hbs
@@ -21,7 +21,7 @@
                     <label for="realm_org_type" class="dropdown-title">{{t "Organization type" }}
                         {{> ../help_link_widget link="/help/organization-type" }}
                     </label>
-                    <select name="realm_org_type" class="setting-widget prop-element bootstrap-focus-style" id="id_realm_org_type" data-setting-widget-type="number">
+                    <select name="realm_org_type" class="setting-widget prop-element settings_select bootstrap-focus-style" id="id_realm_org_type" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=realm_org_type_values}}
                     </select>
                 </div>
diff --git a/static/templates/settings/organization_settings_admin.hbs b/static/templates/settings/organization_settings_admin.hbs
index 3f4bd24dd7..0ea07e0dfe 100644
--- a/static/templates/settings/organization_settings_admin.hbs
+++ b/static/templates/settings/organization_settings_admin.hbs
@@ -23,7 +23,7 @@
                     <label for="realm_digest_weekday" class="dropdown-title">{{t "Day of the week to send digests" }}</label>
                     <select name="realm_digest_weekday"
                       id="id_realm_digest_weekday"
-                      class="setting-widget prop-element bootstrap-focus-style"
+                      class="setting-widget prop-element settings_select bootstrap-focus-style"
                       data-setting-widget-type="number">
                         <option value="0">{{t "Monday" }}</option>
                         <option value="1">{{t "Tuesday" }}</option>
@@ -74,7 +74,7 @@
                     <label for="id_realm_message_retention_days" class="dropdown-title">{{t "Message retention period" }}
                     </label>
                     <select name="realm_message_retention_days"
-                      id="id_realm_message_retention_days" class="prop-element bootstrap-focus-style"
+                      id="id_realm_message_retention_days" class="prop-element settings_select bootstrap-focus-style"
                       data-setting-widget-type="message-retention-setting"
                       {{#unless zulip_plan_is_not_limited}}disabled{{/unless}}>
                         <option value="unlimited">{{t 'Retain forever' }}</option>
@@ -105,7 +105,7 @@
                     <label for="realm_video_chat_provider" class="dropdown-title">
                         {{t 'Video call provider' }}
                     </label>
-                    <select name="realm_video_chat_provider" class ="setting-widget prop-element bootstrap-focus-style" id="id_realm_video_chat_provider" data-setting-widget-type="number">
+                    <select name="realm_video_chat_provider" class ="setting-widget prop-element settings_select bootstrap-focus-style" id="id_realm_video_chat_provider" data-setting-widget-type="number">
                         {{#each realm_available_video_chat_providers}}
                             <option value='{{this.id}}'>{{this.name}}</option>
                         {{/each}}
@@ -116,7 +116,7 @@
                         {{t 'GIPHY integration' }}
                         {{> ../help_link_widget link=giphy_help_link }}
                     </label>
-                    <select name="realm_giphy_rating" class ="setting-widget prop-element bootstrap-focus-style" id="id_realm_giphy_rating" data-setting-widget-type="number" {{#if giphy_api_key_empty}}disabled{{/if}}>
+                    <select name="realm_giphy_rating" class ="setting-widget prop-element settings_select bootstrap-focus-style" id="id_realm_giphy_rating" data-setting-widget-type="number" {{#if giphy_api_key_empty}}disabled{{/if}}>
                         {{#each giphy_rating_options}}
                             <option value='{{this.id}}'>{{this.name}}</option>
                         {{/each}}
diff --git a/static/templates/settings/organization_user_settings_defaults.hbs b/static/templates/settings/organization_user_settings_defaults.hbs
index db9e548c0c..aaf3888c4d 100644
--- a/static/templates/settings/organization_user_settings_defaults.hbs
+++ b/static/templates/settings/organization_user_settings_defaults.hbs
@@ -33,7 +33,7 @@
             <label for="email_address_visibility" class="dropdown-title">{{t "Who can access user's email address" }}
                 {{> ../help_link_widget link="/help/configure-email-visibility" }}
             </label>
-            <select name="email_address_visibility" class="email_address_visibility prop-element bootstrap-focus-style" data-setting-widget-type="number"
+            <select name="email_address_visibility" class="email_address_visibility prop-element settings_select bootstrap-focus-style" data-setting-widget-type="number"
               id="realm_email_address_visibility">
                 {{> dropdown_options_widget option_values=email_address_visibility_values}}
             </select>
diff --git a/static/templates/settings/profile_settings.hbs b/static/templates/settings/profile_settings.hbs
index 003ecf4411..42e35a2613 100644
--- a/static/templates/settings/profile_settings.hbs
+++ b/static/templates/settings/profile_settings.hbs
@@ -20,7 +20,7 @@
                         <label for="timezone" class="dropdown-title inline-block">{{t "Time zone" }}</label>
                         <div class="alert-notification timezone-setting-status"></div>
                         <div class="timezone-input">
-                            <select name="timezone" id="user_timezone" class="bootstrap-focus-style">
+                            <select name="timezone" id="user_timezone" class="bootstrap-focus-style settings_select">
                                 {{#unless settings_object.timezone}}
                                 <option></option>
                                 {{/unless}}