restyle SearchBox & make it more reusable

as we can reuse it in the room header

res/css/structures/_SearchBox.scss

@@ -9,60 +9,15 @@ You may obtain a copy of the License at
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+widows: THOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SearchBox {
-    height: 24px;
-    margin-left: 16px;
-    margin-right: 16px;
-    padding-top: 24px;
-    padding-bottom: 22px;
-
-    border-bottom: 1px solid $panel-divider-color;
-
-    display: flex;
-}
-
-.mx_SearchBox_searchButton {
-    margin-right: 10px;
-    margin-top: 5px;
-    pointer-events: none;
-}
-
 .mx_SearchBox_closeButton {
     cursor: pointer;
-    margin-top: -5px;
-}
-
-.mx_SearchBox_search {
-    flex: 1 1 auto;
-    width: 0px;
-    font-family: $font-family;
-    font-size: 12px;
-    margin-top: -2px;
-    height: 24px;
-    border: 0px ! important;
-    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
-    border: 0px;
-}
-
-.mx_SearchBox_minimise,
-.mx_SearchBox_maximise {
-    margin-top: 3px;
-    cursor: pointer;
-}
-
-.mx_SearchBox_minimise {
-    margin-left: 10px;
-}
-
-.mx_SearchBox_maximise {
-    margin-left: 9px;
-}
-
-.mx_SearchBox object {
-    pointer-events: none;
+    background-image: url('../../img/icons-close.svg');
+    background-repeat: no-repeat;
+    width: 16px;
+    height: 16px;
 }

src/components/structures/LeftPanel.js

@@ -171,6 +171,12 @@ const LeftPanel = React.createClass({
         this.setState({ searchFilter: term });
     },
 
+    onSearchCleared: function(source) {
+        if (source === "keyboard") {
+            dis.dispatch({action: 'focus_composer'});
+        }
+    },
+
     collectRoomList: function(ref) {
         this._roomList = ref;
     },
@@ -195,7 +201,7 @@ const LeftPanel = React.createClass({
         );
 
         const searchBox = !this.props.collapsed ?
-            <SearchBox onSearch={ this.onSearch } /> :
+            <SearchBox onSearch={ this.onSearch } onCleared={ this.onSearchCleared } /> :
             undefined;
 
         return (

src/components/structures/SearchBox.js

@@ -29,6 +29,7 @@ module.exports = React.createClass({
 
     propTypes: {
         onSearch: React.PropTypes.func,
+        onCleared: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -77,52 +78,41 @@ module.exports = React.createClass({
     _onKeyDown: function(ev) {
         switch (ev.keyCode) {
             case KeyCode.ESCAPE:
-                this._clearSearch();
-                dis.dispatch({action: 'focus_composer'});
+                this._clearSearch("keyboard");
                 break;
         }
     },
 
-    _clearSearch: function() {
+    _clearSearch: function(source) {
         this.refs.search.value = "";
         this.onChange();
+        if (this.props.onCleared) {
+            this.props.onCleared(source);
+        }
     },
 
     render: function() {
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
 
-        const searchControls = [
-            this.state.searchTerm.length > 0 ?
-            <AccessibleButton key="button"
+        const clearButton = this.state.searchTerm.length > 0 ?
+            (<AccessibleButton key="button"
                     className="mx_SearchBox_closeButton"
-                    onClick={ ()=>{ this._clearSearch(); } }>
-                <TintableSvg
-                    className="mx_SearchBox_searchButton"
-                    src="img/icons-close.svg" width="24" height="24"
-                />
-            </AccessibleButton>
-            :
-            <TintableSvg
-                key="button"
-                className="mx_SearchBox_searchButton"
-                src="img/icons-search-copy.svg" width="13" height="13"
-            />,
-            <input
-                key="searchfield"
-                type="text"
-                ref="search"
-                className="mx_SearchBox_search"
-                value={ this.state.searchTerm }
-                onChange={ this.onChange }
-                onKeyDown={ this._onKeyDown }
-                placeholder={ _t('Filter room names') }
-            />,
-        ];
+                    onClick={ () => {this._clearSearch("button")} }>
+            </AccessibleButton>) :  undefined;
 
-        const self = this;
         return (
-            <div className="mx_SearchBox">
-                { searchControls }
+            <div className="mx_SearchBox mx_textinput">
+                <input
+                    key="searchfield"
+                    type="text"
+                    ref="search"
+                    className="mx_textinput_icon mx_textinput_search"
+                    value={ this.state.searchTerm }
+                    onChange={ this.onChange }
+                    onKeyDown={ this._onKeyDown }
+                    placeholder={ _t('Filter room names') }
+                />
+                { clearButton }
             </div>
         );
     },