From 802deb17618ea37af5b188e4ebe6ca51af2f41f5 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Tue, 10 Jan 2023 20:34:43 +0530
Subject: [PATCH] settings: Remove form-horizontal class from modal templates.

This commit removes form-horizontal class from various modal
templates. We add CSS for margin-bottom property for select
and input elements to keep the design same as before. Most
of the added CSS can be removed once we remove bootstrap
CSS completely for these elements.

We can safely remove this class since vertical-align property
is already present due to other bootstrap CSS. And
margin-bottom property for checkbox inputs are added by
bootstrap and for text inputs inside ".new-style" element it
is handled in app_components.css. For other inputs, this commit
adds CSS as mentioned above.

The display property for inputs other than checkbox and select
elements is set to inline-block by other bootstrap CSS.
For checkbox-type inputs browser sets display property to
inline-block but it is eventually computed to "block" as the
float property is set to left and so it is not required to
set display property for checkbox type inputs.
---
 static/styles/settings.css                    | 23 +++++++++++++++++++
 static/templates/settings/add_alert_word.hbs  |  2 +-
 .../templates/settings/add_new_bot_form.hbs   |  2 +-
 .../add_new_custom_profile_field_form.hbs     |  2 +-
 .../templates/settings/admin_human_form.hbs   |  2 +-
 .../settings/admin_linkifier_edit_form.hbs    |  2 +-
 static/templates/settings/edit_bot_form.hbs   |  2 +-
 .../edit_custom_profile_field_form.hbs        |  2 +-
 8 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/static/styles/settings.css b/static/styles/settings.css
index fb07b72509..9933fa75ee 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -868,12 +868,20 @@ input[type="checkbox"] {
     #bot-role-select:disabled {
         opacity: 1;
     }
+
+    select {
+        margin-bottom: 0;
+    }
 }
 
 #add-alert-word {
     form {
         margin-bottom: 4px;
     }
+
+    input {
+        margin-bottom: 0;
+    }
 }
 
 .admin-linkifier-form,
@@ -1851,6 +1859,17 @@ $option_title_width: 180px;
     #edit-linkifier-format-status {
         margin-top: 10px;
     }
+
+    input {
+        margin-bottom: 0;
+    }
+}
+
+#edit-user-form,
+#create-bot-form {
+    select {
+        margin-bottom: 0;
+    }
 }
 
 .settings_panel_list_header {
@@ -1874,4 +1893,8 @@ $option_title_width: 180px;
         cursor: default;
         opacity: 0.7;
     }
+
+    select {
+        margin-bottom: 0;
+    }
 }
diff --git a/static/templates/settings/add_alert_word.hbs b/static/templates/settings/add_alert_word.hbs
index 3e758bca69..65b382b1aa 100644
--- a/static/templates/settings/add_alert_word.hbs
+++ b/static/templates/settings/add_alert_word.hbs
@@ -1,4 +1,4 @@
-<form id="add-alert-word-form" class="form-horizontal">
+<form id="add-alert-word-form">
     <label for="add-alert-word-name">{{t "Alert word" }}</label>
     <input type="text" name="alert-word-name" id="add-alert-word-name" class="required" maxlength=100 placeholder="{{t 'Alert word' }}" value="" />
 </form>
diff --git a/static/templates/settings/add_new_bot_form.hbs b/static/templates/settings/add_new_bot_form.hbs
index eaa25c28f5..24d8c03006 100644
--- a/static/templates/settings/add_new_bot_form.hbs
+++ b/static/templates/settings/add_new_bot_form.hbs
@@ -1,4 +1,4 @@
-<form id="create_bot_form" class="form-horizontal new-style">
+<form id="create_bot_form" class="new-style">
     <div class="new-bot-form">
         <div class="input-group">
             <label for="bot_type">
diff --git a/static/templates/settings/add_new_custom_profile_field_form.hbs b/static/templates/settings/add_new_custom_profile_field_form.hbs
index a2c226d32c..67db10eadc 100644
--- a/static/templates/settings/add_new_custom_profile_field_form.hbs
+++ b/static/templates/settings/add_new_custom_profile_field_form.hbs
@@ -1,4 +1,4 @@
-<form class="form-horizontal admin-profile-field-form new-style" id="add-new-custom-profile-field-form">
+<form class="admin-profile-field-form new-style" id="add-new-custom-profile-field-form">
     <div class="new-profile-field-form wrapper">
         <div class="input-group">
             <label for="profile_field_type" >{{t "Type" }}</label>
diff --git a/static/templates/settings/admin_human_form.hbs b/static/templates/settings/admin_human_form.hbs
index adca894953..120811e2fa 100644
--- a/static/templates/settings/admin_human_form.hbs
+++ b/static/templates/settings/admin_human_form.hbs
@@ -1,5 +1,5 @@
 <div id="edit-user-form" data-user-id="{{user_id}}">
-    <form class="form-horizontal name-setting">
+    <form class="name-setting">
         <input type="hidden" name="is_full_name" value="true" />
         <div class="input-group name_change_container">
             <label for="edit_user_full_name">{{t "Full name" }}</label>
diff --git a/static/templates/settings/admin_linkifier_edit_form.hbs b/static/templates/settings/admin_linkifier_edit_form.hbs
index 16dcfad602..edb7e7b710 100644
--- a/static/templates/settings/admin_linkifier_edit_form.hbs
+++ b/static/templates/settings/admin_linkifier_edit_form.hbs
@@ -1,5 +1,5 @@
 <div id="edit-linkifier-form">
-    <form class="form-horizontal linkifier-edit-form">
+    <form class="linkifier-edit-form">
         <div class="input-group name_change_container">
             <label for="edit-linkifier-pattern" >{{t "Pattern" }}</label>
             <input type="text" autocomplete="off" id="edit-linkifier-pattern" name="pattern" placeholder="#(?P<id>[0-9]+)" value="{{ pattern }}" />
diff --git a/static/templates/settings/edit_bot_form.hbs b/static/templates/settings/edit_bot_form.hbs
index 178eb4191a..d0b4cc90b3 100644
--- a/static/templates/settings/edit_bot_form.hbs
+++ b/static/templates/settings/edit_bot_form.hbs
@@ -1,5 +1,5 @@
 <div id="bot-edit-form" data-user-id="{{user_id}}" data-email="{{email}}">
-    <form class="new-style edit_bot_form form-horizontal name-setting">
+    <form class="new-style edit_bot_form name-setting">
         <div class="input-group name_change_container">
             <label for="edit_bot_full_name">{{t "Full name" }}</label>
             <input type="text" autocomplete="off" name="full_name" id="edit_bot_full_name" value="{{ full_name }}" />
diff --git a/static/templates/settings/edit_custom_profile_field_form.hbs b/static/templates/settings/edit_custom_profile_field_form.hbs
index b4c4ca50d3..4e219bfb49 100644
--- a/static/templates/settings/edit_custom_profile_field_form.hbs
+++ b/static/templates/settings/edit_custom_profile_field_form.hbs
@@ -1,5 +1,5 @@
 {{#with profile_field_info}}
-<form class="form-horizontal name-setting profile-field-form new-style" id="edit-custom-profile-field-form-{{id}}">
+<form class="name-setting profile-field-form new-style" id="edit-custom-profile-field-form-{{id}}">
     <div class="input-group">
         <label for="name">{{t "Label" }}</label>
         <input type="text" name="name" value="{{ name }}" maxlength="40" />