modals: Add bottom margin to label elements.

This commit adds bottom margin to label elements of
different inputs by adding "modal-field-label" class
to the label elements. Some of them already have the
margin due to having dropdown-title class.

web/styles/modal.css

@@ -360,6 +360,10 @@
     }
 }
 
+.modal-field-label {
+    margin-bottom: var(--margin-bottom-field-description);
+}
+
 .dropdown-widget-button {
     width: 206px;
 }

web/templates/change_email_modal.hbs

@@ -1,4 +1,4 @@
 <form id="change_email_form" class="new-style">
-    <label for="email">{{t "New email" }}</label>
+    <label for="email" class="modal-field-label">{{t "New email" }}</label>
     <input type="text" name="email" class="modal_text_input" value="{{delivery_email}}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
 </form>

web/templates/demo_organization_add_email_modal.hbs

@@ -1,11 +1,11 @@
 <form id="demo_organization_add_email_form" class="new-style">
     <div class="tip">{{t "If you haven't updated your name, it's a good idea to do so before inviting other users to join you!" }}</div>
     <div class="input-group">
-        <label for="demo_organization_add_email">{{t "Email" }}</label>
+        <label for="demo_organization_add_email" class="modal-field-label">{{t "Email" }}</label>
         <input id="demo_organization_add_email" type="text" name="email" class="modal_text_input" value="{{delivery_email}}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
     </div>
     <div class="input-group">
-        <label for="demo_organization_update_full_name">{{t "Name" }}</label>
+        <label for="demo_organization_update_full_name" class="modal-field-label">{{t "Name" }}</label>
         <input id="demo_organization_update_full_name" name="full_name" type="text" class="modal_text_input" value="{{full_name}}" maxlength="60" />
     </div>
 </form>

web/templates/embedded_bot_config_item.hbs

@@ -1,5 +1,5 @@
 <div class="input-group" name="{{botname}}" id="{{botname}}_{{key}}">
-    <label for="{{botname}}_{{key}}_input">{{key}}</label>
+    <label for="{{botname}}_{{key}}_input" class="modal-field-label">{{key}}</label>
     <input type="text" name="{{key}}" id="{{botname}}_{{key}}_input" class="modal_text_input"
       maxlength=1000 placeholder="{{value}}" value="" />
 </div>

web/templates/invite_user_modal.hbs

@@ -14,14 +14,14 @@
     <div class="input-group">
         <div id="invite_users_option_tabs_container" class="new-style"></div>
         <div id="invitee_emails_container">
-            <label for="invitee_emails">{{t "Emails (one on each line or comma-separated)" }}</label>
+            <label for="invitee_emails" class="modal-field-label">{{t "Emails (one on each line or comma-separated)" }}</label>
             <div class="pill-container">
                 <div class="input" contenteditable="true"></div>
             </div>
         </div>
     </div>
     <div class="input-group">
-        <label for="expires_in">{{t "Invitation expires after" }}</label>
+        <label for="expires_in" class="modal-field-label">{{t "Invitation expires after" }}</label>
         <select id="expires_in" class="invite-expires-in modal_select bootstrap-focus-style">
             {{#each expires_in_options}}
                 <option {{#if this.default }}selected{{/if}} name="expires_in" value="{{this.value}}">{{this.description}}</option>
@@ -29,7 +29,7 @@
         </select>
         <p id="expires_on"></p>
         <div id="custom-invite-expiration-time" class="dependent-settings-block">
-            <label for="expires_in">{{t "Custom time" }}</label>
+            <label for="expires_in" class="modal-field-label">{{t "Custom time" }}</label>
             <input type="text" autocomplete="off" name="custom-expiration-time" id="custom-expiration-time-input" class="custom-expiration-time inline-block" value="" maxlength="3"/>
             <select class="custom-expiration-time modal_select bootstrap-focus-style" id="custom-expiration-time-unit">
                 {{#each time_choices}}
@@ -40,7 +40,7 @@
         </div>
     </div>
     <div class="input-group">
-        <label for="invite_as">{{t "Users join as" }}
+        <label for="invite_as" class="modal-field-label">{{t "Users join as" }}
             {{> help_link_widget link="/help/roles-and-permissions" }}
         </label>
         <select id="invite_as" class="invite-as modal_select bootstrap-focus-style">

web/templates/settings/add_alert_word.hbs

@@ -1,4 +1,4 @@
 <form id="add-alert-word-form">
-    <label for="add-alert-word-name">{{t "Alert word" }}</label>
+    <label for="add-alert-word-name" class="modal-field-label">{{t "Alert word" }}</label>
     <input type="text" name="alert-word-name" id="add-alert-word-name" class="required modal_text_input" maxlength=100 placeholder="{{t 'Alert word' }}" value="" />
 </form>

web/templates/settings/add_emoji.hbs

@@ -11,7 +11,7 @@
     </div>
     <div id="emoji_file_input_error" class="text-error"></div>
     <div class="emoji_name_input">
-        <label for="emoji_name">{{t "Emoji name" }}</label>
+        <label for="emoji_name" class="modal-field-label">{{t "Emoji name" }}</label>
         <input type="text" name="name" id="emoji_name" class="modal_text_input" placeholder="{{t 'leafy green vegetable' }}" />
     </div>
 </form>

web/templates/settings/add_new_bot_form.hbs

@@ -1,7 +1,7 @@
 <form id="create_bot_form" class="new-style">
     <div class="new-bot-form">
         <div class="input-group">
-            <label for="bot_type">
+            <label for="bot_type" class="modal-field-label">
                 {{t "Bot type" }}
                 {{> ../help_link_widget link="/help/bots-overview#bot-type" }}
             </label>
@@ -14,7 +14,7 @@
             </select>
         </div>
         <div class="input-group" id="service_name_list">
-            <label for="select_service_name">{{t "Bot"}}</label>
+            <label for="select_service_name" class="modal-field-label">{{t "Bot"}}</label>
             <select name="service_name" id="select_service_name" class="modal_select bootstrap-focus-style">
                 {{#each realm_embedded_bots}}
                     <option value="{{this.name}}">{{this.name}}</option>
@@ -22,13 +22,13 @@
             </select>
         </div>
         <div class="input-group">
-            <label for="create_bot_name">{{t "Name" }}</label>
+            <label for="create_bot_name" class="modal-field-label">{{t "Name" }}</label>
             <input type="text" name="bot_name" id="create_bot_name" class="required modal_text_input"
               maxlength=100 placeholder="{{t 'Cookie Bot' }}" value="" />
             <div><label for="create_bot_name" generated="true" class="text-error"></label></div>
         </div>
         <div class="input-group">
-            <label for="bot_short_name">{{t "Bot email (a-z, 0-9, and dashes only)" }}</label>
+            <label for="bot_short_name" class="modal-field-label">{{t "Bot email (a-z, 0-9, and dashes only)" }}</label>
             <input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part modal_text_input"
               placeholder="{{t 'cookie' }}" value="" />
             -bot@{{ realm_bot_domain }}
@@ -38,13 +38,13 @@
         </div>
         <div id="payload_url_inputbox">
             <div class="input-group">
-                <label for="create_payload_url">{{t "Endpoint URL" }}</label>
+                <label for="create_payload_url" class="modal-field-label">{{t "Endpoint URL" }}</label>
                 <input type="text" name="payload_url" id="create_payload_url" class="modal_text_input"
                   maxlength=2083 placeholder="https://hostname.example.com" value="" />
                 <div><label for="create_payload_url" generated="true" class="text-error"></label></div>
             </div>
             <div class="input-group">
-                <label for="interface_type">{{t "Outgoing webhook message format" }}</label>
+                <label for="interface_type" class="modal-field-label">{{t "Outgoing webhook message format" }}</label>
                 <select name="interface_type" id="create_interface_type" class="modal_select bootstrap-focus-style">
                     <option value="1">Zulip</option>
                     <option value="2">{{t "Slack compatible" }}</option>
@@ -60,7 +60,7 @@
             {{/each}}
         </div>
         <div class="input-group">
-            <label for="bot_avatar_file_input">{{t "Avatar" }}</label>
+            <label for="bot_avatar_file_input" class="modal-field-label">{{t "Avatar" }}</label>
             <div id="bot_avatar_file"></div>
             <input type="file" name="bot_avatar_file_input" class="notvisible" id="bot_avatar_file_input" value="{{t 'Upload avatar' }}" />
             <div id="add_bot_preview_text">

web/templates/settings/add_new_custom_profile_field_form.hbs

@@ -1,7 +1,7 @@
 <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>
+            <label for="profile_field_type" class="modal-field-label">{{t "Type" }}</label>
             <select id="profile_field_type" name="field_type" class="modal_select bootstrap-focus-style">
                 {{#each custom_profile_field_types}}
                     <option value='{{this.id}}'>{{this.name}}</option>
@@ -9,7 +9,7 @@
             </select>
         </div>
         <div class="input-group" id="profile_field_external_accounts">
-            <label for="profile_field_external_accounts_type" >{{t "External account type" }}</label>
+            <label for="profile_field_external_accounts_type" class="modal-field-label">{{t "External account type" }}</label>
             <select id="profile_field_external_accounts_type" name="external_acc_field_type" class="modal_select bootstrap-focus-style">
                 {{#each realm_default_external_accounts}}
                     <option value='{{@key}}'>{{this.text}}</option>
@@ -18,22 +18,22 @@
             </select>
         </div>
         <div class="input-group">
-            <label for="profile_field_name" >{{t "Label" }}</label>
+            <label for="profile_field_name" class="modal-field-label">{{t "Label" }}</label>
             <input type="text" id="profile_field_name" class="modal_text_input" name="name" autocomplete="off" maxlength="40" />
         </div>
         <div class="input-group">
-            <label for="profile_field_hint" >{{t "Hint (up to 80 characters)" }}</label>
+            <label for="profile_field_hint" class="modal-field-label">{{t "Hint (up to 80 characters)" }}</label>
             <input type="text" id="profile_field_hint" class="modal_text_input" name="hint" autocomplete="off" maxlength="80" />
             <div class="alert" id="admin-profile-field-hint-status"></div>
         </div>
         <div class="input-group" id="profile_field_choices_row">
-            <label for="profile_field_choices" >{{t "Field choices" }}</label>
+            <label for="profile_field_choices" class="modal-field-label">{{t "Field choices" }}</label>
             <table class="profile_field_choices_table">
                 <tbody id="profile_field_choices" class="profile-field-choices"></tbody>
             </table>
         </div>
         <div class="input-group" id="custom_external_account_url_pattern">
-            <label for="custom_field_url_pattern" >{{t "URL pattern" }}</label>
+            <label for="custom_field_url_pattern" class="modal-field-label">{{t "URL pattern" }}</label>
             <input type="url" id="custom_field_url_pattern" class="modal_url_input" name="url_pattern" autocomplete="off" maxlength="1024" placeholder="https://example.com/path/%(username)s"/>
         </div>
         <div class="input-group">

web/templates/settings/admin_human_form.hbs

@@ -3,21 +3,21 @@
         <div class="alert" id="edit-user-form-error"></div>
         <input type="hidden" name="is_full_name" value="true" />
         <div class="input-group name_change_container">
-            <label for="edit_user_full_name">{{t "Name" }}</label>
+            <label for="edit_user_full_name" class="modal-field-label">{{t "Name" }}</label>
             <input type="text" autocomplete="off" name="full_name" id="edit_user_full_name" class="modal_text_input" value="{{ full_name }}" />
         </div>
         {{#if email}}
         <div class="input-group email_change_container">
-            <label for="email">{{t "Email" }}</label>
+            <label for="email" class="modal-field-label">{{t "Email" }}</label>
             <input type="text" autocomplete="off" name="email" class="modal_text_input" value="{{ email }}" readonly/>
         </div>
         {{/if}}
         <div class="input-group user_id_container">
-            <label for="user_id">{{t "User ID" }}</label>
+            <label for="user_id" class="modal-field-label">{{t "User ID" }}</label>
             <input type="text" autocomplete="off" name="user_id" class="modal_text_input" value="{{ user_id }}" readonly/>
         </div>
         <div class="input-group">
-            <label for="user-role-select">{{t 'User role' }}
+            <label for="user-role-select" class="modal-field-label">{{t 'User role' }}
                 {{> ../help_link_widget link="/help/roles-and-permissions" }}
             </label>
             <select name="user-role-select" class="bootstrap-focus-style modal_select" id="user-role-select" data-setting-widget-type="number" {{#if disable_role_dropdown}}disabled{{/if}}>

web/templates/settings/admin_linkifier_edit_form.hbs

@@ -1,12 +1,12 @@
 <div id="edit-linkifier-form">
     <form class="linkifier-edit-form">
         <div class="input-group name_change_container">
-            <label for="edit-linkifier-pattern" >{{t "Pattern" }}</label>
+            <label for="edit-linkifier-pattern" class="modal-field-label">{{t "Pattern" }}</label>
             <input type="text" autocomplete="off" id="edit-linkifier-pattern" class="modal_text_input" name="pattern" placeholder="#(?P<id>[0-9]+)" value="{{ pattern }}" />
             <div class="alert" id="edit-linkifier-pattern-status"></div>
         </div>
         <div class="input-group name_change_container">
-            <label for="edit-linkifier-url-template" >{{t "URL template" }}</label>
+            <label for="edit-linkifier-url-template" class="modal-field-label">{{t "URL template" }}</label>
             <input type="text" autocomplete="off" id="edit-linkifier-url-template" class="modal_text_input" name="url_template" placeholder="https://github.com/zulip/zulip/issues/{id}" value="{{ url_template }}" />
             <div class="alert" id="edit-linkifier-template-status"></div>
         </div>

web/templates/settings/api_key_modal.hbs

@@ -13,7 +13,7 @@
                     <div id="api_key_form">
                         <p>{{t "Please re-enter your password to confirm your identity." }}</p>
                         <div class="password-div">
-                            <label for="password">{{t "Your password" }}</label>
+                            <label for="password" class="modal-field-label">{{t "Your password" }}</label>
                             <input type="password" autocomplete="off" name="password" id="get_api_key_password" class=" modal_password_input" value="" />
                             <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
                         </div>

web/templates/settings/convert_demo_organization_form.hbs

@@ -23,7 +23,7 @@
             </select>
         </div>
         <div class="input-group">
-            <label for="string_id" class="inline-block">{{t "Organization URL" }}</label>
+            <label for="string_id" class="inline-block modal-field-label">{{t "Organization URL" }}</label>
             <div id="subdomain_input_container">
                 <input id="new_subdomain" type="text" class="modal_text_input" autocomplete="off" name="string_id" placeholder="{{t 'acme' }}"/>
                 <label for="string_id" class="domain_label">.{{ realm_domain }}</label>

web/templates/settings/edit_bot_form.hbs

@@ -2,20 +2,20 @@
     <form class="new-style edit_bot_form name-setting">
         <div class="alert" id="bot-edit-form-error"></div>
         <div class="input-group name_change_container">
-            <label for="edit_bot_full_name">{{t "Name" }}</label>
+            <label for="edit_bot_full_name" class="modal-field-label">{{t "Name" }}</label>
             <input type="text" autocomplete="off" name="full_name" id="edit_bot_full_name" class="modal_text_input" value="{{ full_name }}" />
         </div>
         <input type="hidden" name="is_full_name" value="true" />
         <div class="input-group email_change_container">
-            <label for="email">{{t "Email" }}</label>
+            <label for="email" class="modal-field-label">{{t "Email" }}</label>
             <input type="text" autocomplete="off" name="email" class="modal_text_input" value="{{ email }}" readonly/>
         </div>
         <div class="input-group user_id_container">
-            <label for="user_id">{{t "User ID" }}</label>
+            <label for="user_id" class="modal-field-label">{{t "User ID" }}</label>
             <input type="text" autocomplete="off" name="user_id" class="modal_text_input" value="{{ user_id }}" readonly/>
         </div>
         <div class="input-group">
-            <label for="bot-role-select">{{t 'Role' }}
+            <label for="bot-role-select" class="modal-field-label">{{t 'Role' }}
                 {{> ../help_link_widget link="/help/roles-and-permissions" }}
             </label>
             <select name="bot-role-select" id="bot-role-select" class="modal_select bootstrap-focus-style" data-setting-widget-type="number" {{#if disable_role_dropdown}}disabled{{/if}}>
@@ -29,7 +29,7 @@
         <div id="service_data">
         </div>
         <div class="input-group edit-avatar-section">
-            <label>{{t "Avatar" }}</label>
+            <label class="modal-field-label">{{t "Avatar" }}</label>
             {{!-- Shows the current avatar --}}
             <img src="{{bot_avatar_url}}" id="current_bot_avatar_image" />
             <input type="file" name="bot_avatar_file_input" class="notvisible edit_bot_avatar_file_input" value="{{t 'Upload profile picture' }}" />

web/templates/settings/edit_custom_profile_field_form.hbs

@@ -1,16 +1,16 @@
 {{#with profile_field_info}}
 <form class="name-setting profile-field-form new-style" id="edit-custom-profile-field-form-{{id}}" data-profile-field-id="{{id}}">
     <div class="input-group">
-        <label for="name">{{t "Label" }}</label>
+        <label for="name" class="modal-field-label">{{t "Label" }}</label>
         <input type="text" name="name" id="id-custom-profile-field-name" class="modal_text_input prop-element" value="{{ name }}" maxlength="40" data-setting-widget-type="string" />
     </div>
     <div class="input-group hint_change_container">
-        <label for="hint">{{t "Hint" }}</label>
+        <label for="hint" class="modal-field-label">{{t "Hint" }}</label>
         <input type="text" name="hint" id="id-custom-profile-field-hint" class="modal_text_input prop-element" value="{{ hint }}" maxlength="80" data-setting-widget-type="string" />
     </div>
     {{#if is_select_field }}
     <div class="input-group prop-element" id="id-custom-profile-field-field-data" data-setting-widget-type="field-data-setting">
-        <label for="profile_field_choices_edit">{{t "Field choices" }}</label>
+        <label for="profile_field_choices_edit" class="modal-field-label">{{t "Field choices" }}</label>
         <div class="profile-field-choices" name="profile_field_choices_edit">
             <div class="edit_profile_field_choices_container">
                 {{#each choices}}
@@ -22,7 +22,7 @@
     {{else if is_external_account_field}}
     <div class="prop-element" id="id-custom-profile-field-field-data" data-setting-widget-type="field-data-setting">
         <div class="input-group profile_field_external_accounts_edit" >
-            <label for="external_acc_field_type">{{t "External account type" }}</label>
+            <label for="external_acc_field_type" class="modal-field-label">{{t "External account type" }}</label>
             <select name="external_acc_field_type" class="modal_select" disabled>
                 {{#each ../realm_default_external_accounts}}
                     <option value='{{@key}}'>{{this.text}}</option>
@@ -31,7 +31,7 @@
             </select>
         </div>
         <div class="input-group custom_external_account_detail">
-            <label for="url_pattern">{{t "URL pattern" }}</label>
+            <label for="url_pattern" class="modal-field-label">{{t "URL pattern" }}</label>
             <input type="url" class="modal_url_input" name="url_pattern" autocomplete="off" maxlength="80" />
         </div>
     </div>

web/templates/settings/edit_embedded_bot_service.hbs

@@ -1,7 +1,7 @@
 <div id="config_edit_inputbox">
     {{#each service.config_data}}
         <div class="input-group">
-            <label for="embedded_bot_{{@key}}_edit">{{@key}}</label>
+            <label for="embedded_bot_{{@key}}_edit" class="modal-field-label">{{@key}}</label>
             <input type="text" name="{{@key}}" id="embedded_bot_{{@key}}_edit" class="modal_text_input"
               maxlength=1000 value="{{this}}" />
         </div>

web/templates/settings/generate_integration_url_modal.hbs

@@ -23,7 +23,7 @@
         </label>
     </div>
     <div class="input-group hide">
-        <label for="integration-url-topic-input">{{t "Topic"}}</label>
+        <label for="integration-url-topic-input" class="modal-label-field">{{t "Topic"}}</label>
         <input type="text" id="integration-url-topic-input" class="modal_text_input integration-url-parameter" maxlength="{{ max_topic_length }}" />
     </div>
     <div id="integration-events-parameter" class="input-group hide">

web/templates/stream_settings/change_stream_info_modal.hbs

@@ -1,11 +1,11 @@
 <div>
-    <label for="change_stream_name">
+    <label for="change_stream_name" class="modal-field-label">
         {{t 'Channel name' }}
     </label>
     <input type="text" id="change_stream_name" class="modal_text_input" name="stream_name" value="{{ stream_name }}" maxlength="{{ max_stream_name_length }}" />
 </div>
 <div>
-    <label for="change_stream_description">
+    <label for="change_stream_description" class="modal-field-label">
         {{t 'Description' }}
         {{> ../help_link_widget link="/help/change-the-stream-description" }}
     </label>

web/templates/user_group_settings/change_user_group_info_modal.hbs

@@ -1,11 +1,11 @@
 <div>
-    <label for="change_user_group_name">
+    <label for="change_user_group_name" class="modal-field-label">
         {{t 'User group name' }}
     </label>
     <input type="text" id="change_user_group_name" class="modal_text_input" name="user_group_name" value="{{ group_name }}" maxlength="{{max_user_group_name_length}}" />
 </div>
 <div>
-    <label for="change_user_group_description">
+    <label for="change_user_group_description" class="modal-field-label">
         {{t 'User group description' }}
     </label>
     <textarea id="change_user_group_description" class="settings_textarea" name="user_group_description">{{ group_description }}</textarea>