modals: Add modal_text_input class to text inputs.

This commit adds modal_text_input class to text inputs
in modals to set width of them as set by bootstrap.
This class is used to set the width of inputs to 206px,
as we will be removing the boostrap rule which sets width
of the input in further commits.

web/styles/modal.css

@@ -347,3 +347,7 @@
         background-color: hsl(0deg 0% 90%);
     }
 }
+
+.modal_text_input {
+    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>
-    <input type="text" name="email" value="{{delivery_email}}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
+    <input type="text" name="email" class="modal_text_input" value="{{delivery_email}}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
 </form>

web/templates/dialog_change_password.hbs

@@ -1,7 +1,7 @@
 <form id="change_password_container">
     <div class="field password-div">
         <label for="old_password" class="title">{{t "Old password" }}</label>
-        <input type="password" autocomplete="off" name="old_password" id="old_password" class="w-200 inline-block" value="" />
+        <input type="password" autocomplete="off" name="old_password" id="old_password" class="w-200 inline-block modal_text_input" value="" />
         <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
         <div class="settings-forgot-password">
             <a href="/accounts/password/reset/" class="sea-green" target="_blank" rel="noopener noreferrer">{{t "Forgot it?" }}</a>
@@ -9,7 +9,7 @@
     </div>
     <div class="field password-div">
         <label for="new_password" class="title">{{t "New password" }}</label>
-        <input type="password" autocomplete="new-password" name="new_password" id="new_password" class="w-200 inline-block" value=""
+        <input type="password" autocomplete="new-password" name="new_password" id="new_password" class="w-200 inline-block modal_text_input" value=""
           data-min-length="{{password_min_length}}" data-min-guesses="{{password_min_guesses}}" />
         <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
         <div class="progress inline-block" id="pw_strength">

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>
-    <input type="text" name="{{key}}" id="{{botname}}_{{key}}_input"
+    <input type="text" name="{{key}}" id="{{botname}}_{{key}}_input" class="modal_text_input"
       maxlength=1000 placeholder="{{value}}" value="" />
 </div>

web/templates/move_topic_to_stream.hbs

@@ -11,7 +11,7 @@
               list_placeholder=(t 'Filter streams')}}
         </div>
         <i class="fa fa-angle-right" aria-hidden="true"></i>
-        <input name="new_topic_name" type="text" class="inline_topic_edit" autocomplete="off" value="{{topic_name}}" {{#if disable_topic_input}}disabled{{/if}} />
+        <input name="new_topic_name" type="text" class="inline_topic_edit modal_text_input" autocomplete="off" value="{{topic_name}}" {{#if disable_topic_input}}disabled{{/if}} />
         <input name="old_topic_name" type="hidden" class="inline_topic_edit" value="{{topic_name}}" />
         <input name="current_stream_id" type="hidden" value="{{current_stream_id}}" />
         {{#if from_message_actions_popover}}

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>
-    <input type="text" name="alert-word-name" id="add-alert-word-name" class="required" maxlength=100 placeholder="{{t 'Alert word' }}" value="" />
+    <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

@@ -12,6 +12,6 @@
     <div id="emoji_file_input_error" class="text-error"></div>
     <div class="emoji_name_input">
         <label for="emoji_name">{{t "Emoji name" }}</label>
-        <input type="text" name="name" id="emoji_name" placeholder="{{t 'leafy green vegetable' }}" />
+        <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

@@ -23,13 +23,13 @@
         </div>
         <div class="input-group">
             <label for="create_bot_name">{{t "Full name" }}</label>
-            <input type="text" name="bot_name" id="create_bot_name" class="required"
+            <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>
-            <input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part"
+            <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 }}
             <div>

web/templates/settings/add_new_custom_profile_field_form.hbs

@@ -19,11 +19,11 @@
         </div>
         <div class="input-group">
             <label for="profile_field_name" >{{t "Label" }}</label>
-            <input type="text" id="profile_field_name" name="name" autocomplete="off" maxlength="40" />
+            <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>
-            <input type="text" id="profile_field_hint" name="hint" autocomplete="off" maxlength="80" />
+            <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">

web/templates/settings/add_user_group_modal.hbs

@@ -1,7 +1,7 @@
 <form id="add-user-group-form">
     <div>
         <label for="user_group_name">{{t "Name" }}</label>
-        <input type="text" name="name" id="user_group_name" maxlength="100" placeholder="{{t 'marketing' }}" />
+        <input type="text" name="name" id="user_group_name" class="modal_text_input" maxlength="100" placeholder="{{t 'marketing' }}" />
     </div>
     <div>
         <label for="user_group_description">{{t "Description" }}</label>

web/templates/settings/api_key_modal.hbs

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

web/templates/settings/custom_user_profile_field.hbs

@@ -17,15 +17,15 @@
             <div class="input" contenteditable="true"></div>
         </div>
         {{else if is_date_field }}
-        <input class="custom_user_field_value datepicker" data-field-id="{{ field.id }}" type="text"
+        <input class="custom_user_field_value datepicker modal_text_input" data-field-id="{{ field.id }}" type="text"
           value="{{ field_value.value }}" />
         <span class="remove_date"><i class="fa fa-close"></i></span>
         {{else if is_url_field }}
-        <input class="custom_user_field_value" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="2048" />
+        <input class="custom_user_field_value modal_text_input" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="2048" />
         {{else if is_pronouns_field}}
-        <input class="custom_user_field_value pronouns_type_field" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" />
+        <input class="custom_user_field_value pronouns_type_field modal_text_input" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" />
         {{else}}
-        <input class="custom_user_field_value" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" />
+        <input class="custom_user_field_value modal_text_input" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" />
         {{/if}}
     </div>
 </div>

web/templates/settings/edit_bot_form.hbs

@@ -2,16 +2,16 @@
     <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 }}" />
+            <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>
-            <input type="text" autocomplete="off" name="email" value="{{ email }}" readonly/>
+            <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>
-            <input type="text" autocomplete="off" name="user_id" value="{{ user_id }}" readonly/>
+            <input type="text" autocomplete="off" name="user_id" class="modal_text_input" value="{{ user_id }}" readonly/>
         </div>
         <div class="input-group">
             <label class="input-label" for="bot-role-select">{{t 'Role' }}

web/templates/settings/edit_custom_profile_field_form.hbs

@@ -2,11 +2,11 @@
 <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" />
+        <input type="text" name="name" class="modal_text_input" value="{{ name }}" maxlength="40" />
     </div>
     <div class="input-group hint_change_container">
         <label for="hint">{{t "Hint" }}</label>
-        <input type="text" name="hint" value="{{ hint }}" maxlength="80" />
+        <input type="text" name="hint" class="modal_text_input" value="{{ hint }}" maxlength="80" />
     </div>
     {{#if is_select_field }}
     <div class="input-group">

web/templates/settings/edit_embedded_bot_service.hbs

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

web/templates/settings/edit_outgoing_webhook_service.hbs

@@ -1,6 +1,6 @@
 <div class="input-group">
     <label for="edit_service_base_url">{{t "Endpoint URL" }}</label>
-    <input id="edit_service_base_url" type="text" name="service_payload_url" class="edit_service_base_url required" value="{{service.base_url}}" maxlength=2083 />
+    <input id="edit_service_base_url" type="text" name="service_payload_url" class="edit_service_base_url required modal_text_input"value="{{service.base_url}}" maxlength=2083 />
     <div><label for="edit_service_base_url" generated="true" class="text-error"></label></div>
 </div>
 <div class="input-group">

web/templates/settings/realm_domains_modal.hbs

@@ -8,7 +8,7 @@
     </tbody>
     <tfoot>
         <tr id="add-realm-domain-widget">
-            <td><input type="text" class="new-realm-domain" placeholder="acme.com" /></td>
+            <td><input type="text" class="new-realm-domain modal_text_input" placeholder="acme.com" /></td>
             <td>
                 <label class="checkbox">
                     <input type="checkbox" class="new-realm-domain-allow-subdomains" />

web/templates/stream_settings/change_stream_info_modal.hbs

@@ -2,7 +2,7 @@
     <label for="change_stream_name">
         {{t 'Stream name' }}
     </label>
-    <input type="text" id="change_stream_name" value="{{ stream_name }}" maxlength="{{ max_stream_name_length }}" />
+    <input type="text" id="change_stream_name" class="modal_text_input" value="{{ stream_name }}" maxlength="{{ max_stream_name_length }}" />
 </div>
 <div>
     <label for="change_stream_description">

web/templates/user_group_settings/change_user_group_info_modal.hbs

@@ -2,7 +2,7 @@
     <label for="change_user_group_name">
         {{t 'User group name' }}
     </label>
-    <input type="text" id="change_user_group_name" value="{{ group_name }}" />
+    <input type="text" id="change_user_group_name" class="modal_text_input" value="{{ group_name }}" />
 </div>
 <div>
     <label for="change_user_group_description">

web/templates/user_profile_modal.hbs

@@ -92,7 +92,7 @@
                             <div class="header-section">
                                 <h3 class="stream-list-header">{{t 'Subscribed streams' }}</h3>
                             </div>
-                            <input type="text" class="stream-search" placeholder="{{t 'Filter streams' }}" />
+                            <input type="text" class="stream-search modal_text_input" placeholder="{{t 'Filter streams' }}" />
                             <button type="button" class="clear_search_button" id="clear_stream_search">
                                 <i class="fa fa-remove" aria-hidden="true"></i>
                             </button>