templates: Add filter_text_input class to inputs used for filtering.

This commit adds filter_text_input class to various search inputs
used across the app. This new class is used to re-add the bootstrap
CSS rules such that we can remove the CSS from bootstrap.css.

web/styles/app_components.css

@@ -1026,3 +1026,19 @@ div.overlay {
         top: -1px;
     }
 }
+
+.filter_text_input {
+    padding: 4px 6px;
+    color: hsl(0deg 0% 33%);
+    border: 1px solid hsl(0deg 0% 80%);
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+    box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
+    border-radius: 4px;
+
+    &:focus {
+        border-color: hsl(206deg 80% 62% / 80%);
+        outline: 0;
+        box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
+            0 0 8px hsl(206deg 80% 62% / 60%);
+    }
+}

web/templates/dropdown_list_container.hbs

@@ -1,6 +1,6 @@
 <div class="dropdown-list-container">
     <div class="dropdown-list-search">
-        <input class="dropdown-list-search-input" type="text" placeholder="{{t 'Filter' }}" autofocus/>
+        <input class="dropdown-list-search-input filter_text_input" type="text" placeholder="{{t 'Filter' }}" autofocus/>
     </div>
     <div class="dropdown-list-wrapper" data-simplebar>
         <ul class="dropdown-list"></ul>

web/templates/emoji_popover_content.hbs

@@ -1,6 +1,6 @@
 <div class="emoji-popover">
     <div class="emoji-popover-top">
-        <input class="emoji-popover-filter" type="text" autofocus placeholder="{{t 'Search' }}" />
+        <input class="emoji-popover-filter filter_text_input" type="text" autofocus placeholder="{{t 'Search' }}" />
         <i class="fa fa-search" aria-hidden="true"></i>
     </div>
     <div class="emoji-popover-category-tabs">

web/templates/filter_topics.hbs

@@ -1,5 +1,5 @@
 <div class="input-append topic_search_section filter-topics">
-    <input class="topic-list-filter home-page-input" id="filter-topic-input" type="text" autocomplete="off" placeholder="{{t 'Filter topics'}}" />
+    <input class="topic-list-filter home-page-input filter_text_input" id="filter-topic-input" type="text" autocomplete="off" placeholder="{{t 'Filter topics'}}" />
     <button type="button" class="btn clear_search_button" id="clear_search_topic_button">
         <i class="fa fa-remove" aria-hidden="true"></i>
     </button>

web/templates/left_sidebar.hbs

@@ -97,7 +97,7 @@
                 </span>
                 <i id="filter_streams_tooltip" class="streams_filter_icon fa fa-filter" aria-hidden="true" data-tooltip-template-id="filter-streams-tooltip-template"></i>
                 <div class="input-append notdisplayed stream_search_section">
-                    <input class="stream-list-filter home-page-input" type="text" autocomplete="off" placeholder="{{t 'Filter streams' }}" />
+                    <input class="stream-list-filter home-page-input filter_text_input" type="text" autocomplete="off" placeholder="{{t 'Filter streams' }}" />
                     <button type="button" class="btn clear_search_button" id="clear_search_stream_button">
                         <i class="fa fa-remove" aria-hidden="true"></i>
                     </button>

web/templates/recent_topics_table.hbs

@@ -3,7 +3,7 @@
         {{> recent_topics_filters}}
     </div>
     <div class="search_group" role="group">
-        <input type="text" id="recent_topics_search" value="{{ search_val }}" autocomplete="off" placeholder="{{t 'Filter topics (t)' }}" />
+        <input type="text" id="recent_topics_search" class="filter_text_input" value="{{ search_val }}" autocomplete="off" placeholder="{{t 'Filter topics (t)' }}" />
         <button type="button" class="btn clear_search_button" id="recent_topics_search_clear">
             <i class="fa fa-remove" aria-hidden="true"></i>
         </button>

web/templates/right_sidebar.hbs

@@ -12,7 +12,7 @@
                 </i>
             </div>
             <div class="input-append notdisplayed" id="user_search_section">
-                <input class="user-list-filter home-page-input" type="text" autocomplete="off" placeholder="{{t 'Search people' }}" />
+                <input class="user-list-filter home-page-input filter_text_input" type="text" autocomplete="off" placeholder="{{t 'Search people' }}" />
                 <button type="button" class="btn clear_search_button" id="clear_search_people_button">
                     <i class="fa fa-remove" aria-hidden="true"></i>
                 </button>

web/templates/settings/attachments_settings.hbs

@@ -2,7 +2,7 @@
     <div id="attachment-stats-holder"></div>
     <div class="settings_panel_list_header">
         <h3>{{t "Uploaded files"}}</h3>
-        <input id="upload_file_search" class="search" type="text" placeholder="{{t 'Filter uploaded files' }}" aria-label="{{t 'Filter uploads' }}"/>
+        <input id="upload_file_search" class="search filter_text_input" type="text" placeholder="{{t 'Filter uploaded files' }}" aria-label="{{t 'Filter uploads' }}"/>
     </div>
     <div class="clear-float"></div>
     <div class="alert" id="delete-upload-status"></div>

web/templates/settings/bot_list_admin.hbs

@@ -8,7 +8,7 @@
     <div class="settings_panel_list_header">
         <h3>{{t "Bots"}}</h3>
         <div class="alert-notification" id="bot-field-status"></div>
-        <input type="text" class="search" placeholder="{{t 'Filter bots' }}" aria-label="{{t 'Filter bots' }}"/>
+        <input type="text" class="search filter_text_input" placeholder="{{t 'Filter bots' }}" aria-label="{{t 'Filter bots' }}"/>
     </div>
 
     <div class="progressive-table-wrapper" data-simplebar>

web/templates/settings/deactivated_users_admin.hbs

@@ -6,7 +6,7 @@
             {{> ../help_link_widget link="/help/deactivate-or-reactivate-a-user" }}
         </h3>
         <div class="alert-notification" id="deactivated-user-field-status"></div>
-        <input type="text" class="search" placeholder="{{t 'Filter deactivated users' }}" aria-label="{{t 'Filter deactivated users' }}"/>
+        <input type="text" class="search filter_text_input" placeholder="{{t 'Filter deactivated users' }}" aria-label="{{t 'Filter deactivated users' }}"/>
     </div>
 
     <div class="progressive-table-wrapper" data-simplebar>

web/templates/settings/default_streams_list_admin.hbs

@@ -7,7 +7,7 @@
             {{#if is_admin}}
                 <button type="submit" id="show-add-default-streams-modal" class="button rounded sea-green">{{t "Add stream" }}</button>
             {{/if}}
-            <input type="text" class="search" placeholder="{{t 'Filter default streams' }}" aria-label="{{t 'Filter streams' }}"/>
+            <input type="text" class="search filter_text_input" placeholder="{{t 'Filter default streams' }}" aria-label="{{t 'Filter streams' }}"/>
         </div>
     </div>
 

web/templates/settings/dropdown_list_widget.hbs

@@ -11,7 +11,7 @@
         </button>
         <ul class="dropdown-menu modal-bg" role="menu">
             <li class="dropdown-search" role="presentation">
-                <input class="no-input-change-detection" type="text" role="menuitem" placeholder="{{list_placeholder}}" autofocus/>
+                <input class="no-input-change-detection filter_text_input" type="text" role="menuitem" placeholder="{{list_placeholder}}" autofocus/>
             </li>
             <div class="dropdown-list-wrapper" data-simplebar>
                 <span class="dropdown-list-body"></span>

web/templates/settings/emoji_settings_admin.hbs

@@ -11,7 +11,7 @@
 
     <div class="settings_panel_list_header">
         <h3>{{t "Custom emoji"}}</h3>
-        <input type="text" class="search" placeholder="{{t 'Filter emoji' }}"
+        <input type="text" class="search filter_text_input" placeholder="{{t 'Filter emoji' }}"
           aria-label="{{t 'Filter emoji' }}"/>
     </div>
     <div class="progressive-table-wrapper" data-simplebar>

web/templates/settings/invites_list_admin.hbs

@@ -10,7 +10,7 @@
     <div class="settings_panel_list_header">
         <h3>{{t "Invites"}}</h3>
         <div class="alert-notification" id="invites-field-status"></div>
-        <input type="text" class="search" placeholder="{{t 'Filter invites' }}" aria-label="{{t 'Filter invites' }}"/>
+        <input type="text" class="search filter_text_input" placeholder="{{t 'Filter invites' }}" aria-label="{{t 'Filter invites' }}"/>
     </div>
 
     <div class="progressive-table-wrapper" data-simplebar>

web/templates/settings/linkifier_settings_admin.hbs

@@ -59,7 +59,7 @@
         <div class="settings_panel_list_header">
             <h3>{{t "Linkifiers"}}</h3>
             <div class="alert-notification edit-linkifier-status" id="linkifier-field-status"></div>
-            <input type="text" class="search" placeholder="{{t 'Filter linkifiers' }}" aria-label="{{t 'Filter linkifiers' }}"/>
+            <input type="text" class="search filter_text_input" placeholder="{{t 'Filter linkifiers' }}" aria-label="{{t 'Filter linkifiers' }}"/>
         </div>
 
         <div class="progressive-table-wrapper" data-simplebar>

web/templates/settings/muted_users_settings.hbs

@@ -1,7 +1,7 @@
 <div id="muted-user-settings" class="settings-section" data-name="muted-users">
     <div class="settings_panel_list_header">
         <h3>{{t "Muted users"}}</h3>
-        <input id="muted_users_search" class="search" type="text" placeholder="{{t 'Filter muted users' }}" aria-label="{{t 'Filter muted users' }}"/>
+        <input id="muted_users_search" class="search filter_text_input" type="text" placeholder="{{t 'Filter muted users' }}" aria-label="{{t 'Filter muted users' }}"/>
     </div>
     <div class="progressive-table-wrapper" data-simplebar>
         <table class="table table-condensed table-striped wrapped-table">

web/templates/settings/playground_settings_admin.hbs

@@ -65,7 +65,7 @@
 
         <div class="settings_panel_list_header">
             <h3>{{t "Code playgrounds"}}</h3>
-            <input type="text" class="search" placeholder="{{t 'Filter code playgrounds' }}" aria-label="{{t 'Filter code playgrounds' }}"/>
+            <input type="text" class="search filter_text_input" placeholder="{{t 'Filter code playgrounds' }}" aria-label="{{t 'Filter code playgrounds' }}"/>
         </div>
 
         <div class="progressive-table-wrapper" data-simplebar>

web/templates/settings/user_list_admin.hbs

@@ -5,7 +5,7 @@
     <div class="settings_panel_list_header">
         <h3>{{t "Users"}}</h3>
         <div class="alert-notification" id="user-field-status"></div>
-        <input type="text" class="search" placeholder="{{t 'Filter users' }}" aria-label="{{t 'Filter users' }}"/>
+        <input type="text" class="search filter_text_input" placeholder="{{t 'Filter users' }}" aria-label="{{t 'Filter users' }}"/>
     </div>
 
     <div class="progressive-table-wrapper" data-simplebar>

web/templates/settings/user_topics_settings.hbs

@@ -9,7 +9,7 @@
     </p>
     <div class="settings_panel_list_header">
         <h3>{{t "Topic settings"}}</h3>
-        <input id="user_topics_search" class="search" type="text" placeholder="{{t 'Filter topics' }}" aria-label="{{t 'Filter topics' }}"/>
+        <input id="user_topics_search" class="search filter_text_input" type="text" placeholder="{{t 'Filter topics' }}" aria-label="{{t 'Filter topics' }}"/>
     </div>
     <div class="progressive-table-wrapper" data-simplebar>
         <table class="table table-condensed table-striped wrapped-table">

web/templates/stream_settings/new_stream_users.hbs

@@ -13,7 +13,7 @@
 
 <div class="create_stream_subscriber_list_header">
     <h4 class="stream_setting_subsection_title">{{t 'Subscribers' }}</h4>
-    <input class="add-user-list-filter" name="user_list_filter" type="text"
+    <input class="add-user-list-filter filter_text_input" name="user_list_filter" type="text"
       autocomplete="off" placeholder="{{t 'Filter subscribers' }}" />
 </div>
 

web/templates/stream_settings/stream_members.hbs

@@ -13,7 +13,7 @@
     <div>
         <h4 class="inline-block stream_setting_subsection_title">{{t "Subscribers"}}</h4>
         <span class="subscriber-search float-right">
-            <input type="text" class="search" placeholder="{{t 'Filter subscribers' }}" />
+            <input type="text" class="search filter_text_input" placeholder="{{t 'Filter subscribers' }}" />
         </span>
     </div>
     <div class="subscriber-list-box">

web/templates/stream_settings/stream_settings_overlay.hbs

@@ -20,7 +20,7 @@
                     </div>
                 </div>
                 <div class="input-append stream_name_search_section" id="stream_filter">
-                    <input type="text" name="stream_name" id="search_stream_name" autocomplete="off"
+                    <input type="text" name="stream_name" id="search_stream_name" class="filter_text_input" autocomplete="off"
                       placeholder="{{t 'Filter streams' }}" value=""/>
                     <button type="button" class="btn clear_search_button" id="clear_search_stream_name">
                         <i class="fa fa-remove" aria-hidden="true"></i>

web/templates/user_group_settings/new_user_group_users.hbs

@@ -8,7 +8,7 @@
 
 <div class="create_member_list_header">
     <h4 class="user_group_setting_subsection_title">{{t 'Members' }}</h4>
-    <input class="add-user-list-filter" name="user_list_filter" type="text"
+    <input class="add-user-list-filter filter_text_input" name="user_list_filter" type="text"
       autocomplete="off" placeholder="{{t 'Filter members' }}" />
 </div>
 

web/templates/user_group_settings/user_group_members.hbs

@@ -12,7 +12,7 @@
     <div>
         <h4 class="inline-block user_group_setting_subsection_title">{{t "Members"}}</h4>
         <span class="member-search float-right">
-            <input type="text" class="search" placeholder="{{t 'Filter subscribers' }}" />
+            <input type="text" class="search filter_text_input" placeholder="{{t 'Filter subscribers' }}" />
         </span>
     </div>
     <div class="member-list-box">

web/templates/user_group_settings/user_group_settings_overlay.hbs

@@ -10,7 +10,7 @@
             </div>
             <div class="left">
                 <div class="input-append group_name_search_section" id="group_filter">
-                    <input type="text" name="group_name" id="search_group_name" autocomplete="off"
+                    <input type="text" name="group_name" id="search_group_name" class="filter_text_input" autocomplete="off"
                       placeholder="{{t 'Filter groups' }}" value=""/>
                     <button type="button" class="btn clear_search_button" id="clear_search_group_name">
                         <i class="fa fa-remove" aria-hidden="true"></i>