mm-1762 - Search improvements with some other minor Ui changes

web/react/components/search_bar.jsx

@@ -36,6 +36,9 @@ module.exports = React.createClass({
             }
         }
     },
+    clearFocus: function(e) {
+        $('.search-bar__container').removeClass('focused');
+    },
     handleClose: function(e) {
         e.preventDefault();
 
@@ -57,6 +60,7 @@ module.exports = React.createClass({
     },
     handleUserFocus: function(e) {
         e.target.select();
+        $('.search-bar__container').addClass('focused');
     },
     performSearch: function(terms, isMentionSearch) {
         if (terms.length) {
@@ -92,13 +96,14 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div>
-                <div className="sidebar__collapse" onClick={this.handleClose}>Cancel</div>
-                <span className="glyphicon glyphicon-search sidebar__search-icon"></span>
+                <div className="sidebar__collapse" onClick={this.handleClose}><span className="fa fa-angle-left"></span></div>
+                <span onClick={this.clearFocus} className="search__clear">Cancel</span>
                 <form role="form" className="search__form relative-div" onSubmit={this.handleSubmit}>
+                    <span className="glyphicon glyphicon-search sidebar__search-icon"></span>
                     <input
                         type="text"
                         ref="search"
-                        className="form-control search-bar-box"
+                        className="form-control search-bar"
                         placeholder="Search"
                         value={this.state.search_term}
                         onFocus={this.handleUserFocus}

web/react/components/sidebar_header.jsx

@@ -75,7 +75,7 @@ var NavbarDropdown = React.createClass({
 
         return (
             <ul className="nav navbar-nav navbar-right">
-                <li className="dropdown">
+                <li className="dropdown" id="myDropdown">
                     <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                         <span className="dropdown__icon" dangerouslySetInnerHTML={{__html: Constants.MENU_ICON }} />
                     </a>
@@ -107,6 +107,12 @@ module.exports = React.createClass({
         };
     },
 
+    toggleDropdown: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        $('.team__header').find('.dropdown-toggle').trigger('click');
+    },
+
     render: function() {
         var me = UserStore.getCurrentUser();
 
@@ -116,7 +122,7 @@ module.exports = React.createClass({
 
         return (
             <div className="team__header theme">
-                <a className="settings_link" href="#" data-toggle="modal" data-target="#user_settings1">
+                <a href="#" onClick={this.toggleDropdown}>
                     { me.last_picture_update ?
                     <img className="user__picture" src={"/api/v1/users/" + me.id + "/image?time=" + me.update_at} />
                     :