dedicated search button

src/components/views/rooms/SearchBar.js

@@ -39,14 +39,19 @@ module.exports = React.createClass({
 
     onSearchChange: function(e) {
         if (e.keyCode === 13) { // on enter...
-            this.props.onSearch(this.refs.search_term.value, this.state.scope);
+            this.onSearch();
         }
     },
+
+    onSearch: function() {
+        this.props.onSearch(this.refs.search_term.value, this.state.scope);
+    },
     
     render: function() {
         return (
             <div className="mx_SearchBar">
                 <input ref="search_term" className="mx_SearchBar_input" type="text" autoFocus={true} placeholder="Search..." onKeyDown={this.onSearchChange}/>
+                <img className="mx_SearchBar_searchButton" src="img/search-button.svg" width="37" height="37" onClick={this.onSearch}/>
                 <div className={"mx_SearchBar_button" + (this.state.scope !== 'Room' ? " mx_SearchBar_unselected" : "")} onClick={this.onThisRoomClick}>This Room</div>
                 <div className={"mx_SearchBar_button" + (this.state.scope !== 'All' ? " mx_SearchBar_unselected" : "")} onClick={this.onAllRoomsClick}>All Rooms</div>
                 <img className="mx_SearchBar_cancel" src="img/cancel.svg" width="18" height="18" onClick={this.props.onCancelClick} />

src/skins/vector/css/molecules/SearchBar.css

@@ -21,18 +21,22 @@ limitations under the License.
     align-items: center;
 }
 
-.mx_SearchBar input {
+.mx_SearchBar_input {
     display: inline block;
     border-radius: 3px;
     border: 1px solid #f0f0f0;
     font-size: 15px;
     padding: 9px;
     padding-left: 11px;
-    margin-right: 17px;
     width: auto;
     flex: 1 1 0;
 }
 
+.mx_SearchBar_searchButton {
+    cursor: pointer;
+    margin-right: 10px;
+}
+
 .mx_SearchBar_button {
     display: inline;
     border: 0px;

src/skins/vector/img/search-button.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="37px" height="37px" viewBox="0 0 37 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_search</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="icon_search" sketch:type="MSLayerGroup">
+            <rect id="Rectangle-1" fill="#76CFA6" sketch:type="MSShapeGroup" x="0" y="0" width="37" height="37"></rect>
+            <path d="M21.328421,19.3333333 L27.5542961,24.7357275 C27.9574623,25.085568 28.0116667,25.70516 27.6700827,26.1261351 L27.6700827,26.1261351 C27.3308636,26.5441955 26.72562,26.5965299 26.3258751,26.2496583 L20.1,20.8472641" id="Rectangle-9" stroke="#FFFFFF" sketch:type="MSShapeGroup"></path>
+            <g id="search" transform="translate(15.617851, 15.853553) rotate(-45.000000) translate(-15.617851, -15.853553) translate(8.117851, 7.853553)" stroke="#FFFFFF" sketch:type="MSShapeGroup">
+                <ellipse id="Search" cx="7.64433504" cy="7.90518519" rx="7.1665641" ry="7.41111111"></ellipse>
+            </g>
+        </g>
+    </g>
+</svg>