style search bar

res/css/views/rooms/_RoomHeader.scss

@@ -98,6 +98,7 @@ limitations under the License.
     font-size: 18px;
     margin: 0 7px;
     border-bottom: 1px solid transparent;
+    display: flex;
 }
 
 .mx_RoomHeader_nametext {
@@ -111,7 +112,6 @@ limitations under the License.
 }
 
 .mx_RoomHeader_searchStatus {
-    display: inline-block;
     font-weight: normal;
     opacity: 0.6;
 }

res/css/views/rooms/_SearchBar.scss

@@ -15,69 +15,52 @@ limitations under the License.
 */
 
 .mx_SearchBar {
-    padding-top: 5px;
-    padding-bottom: 5px;
+    height: 56px;
     display: flex;
     align-items: center;
-}
+    border-bottom: 1px solid $primary-hairline-color;
 
-.mx_SearchBar_input {
-    display: inline block;
-    border-radius: 3px 0px 0px 3px;
-    border: 1px solid $input-border-color;
-    font-size: 15px;
-    padding: 9px;
-    padding-left: 11px;
-    width: auto;
-    flex: 1 1 0;
-}
+    .mx_SearchBar_input {
+        // border: 1px solid $input-border-color;
+        // font-size: 15px;
+        flex: 1 1 0;
+        margin-left: 22px;
+    }
 
-.mx_SearchBar_searchButton {
-    cursor: pointer;
-    margin-right: 10px;
-    width: 37px;
-    height: 37px;
-    border-radius: 0px 3px 3px 0px;
-    background-color: $accent-color;
-}
+    .mx_SearchBar_searchButton {
+        cursor: pointer;
+        width: 37px;
+        height: 37px;
+        background-color: $accent-color;
+        mask: url('../../../img/feather-icons/search-input.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+    }
 
-@keyframes pulsate {
-    0% { opacity: 1.0; }
-    50% { opacity: 0.1; }
-    100% { opacity: 1.0; }
-}
+    .mx_SearchBar_button {
+        border: 0;
+        margin: 0 0 0 22px;
+        padding: 5px;
+        font-size: 15px;
+        cursor: pointer;
+        color: $primary-fg-color;
+        border-bottom: 2px solid $accent-color;
+        font-weight: 600;
+    }
 
-.mx_SearchBar_searching img {
-    animation: pulsate 0.5s ease-out;
-    animation-iteration-count: infinite;
-}
+    .mx_SearchBar_unselected {
+        color: $input-darker-fg-color;
+        border-color: transparent;
+    }
 
-.mx_SearchBar_button {
-    display: inline;
-    border: 0px;
-    border-radius: 36px;
-    font-weight: 400;
-    font-size: 15px;
-    color: $accent-fg-color;
-    background-color: $accent-color;
-    width: auto;
-    margin: auto;
-    margin-left: 7px;
-    padding-top: 6px;
-    padding-bottom: 4px;
-    padding-left: 24px;
-    padding-right: 24px;
-    cursor: pointer;
-}
-
-.mx_SearchBar_unselected {
-    background-color: $primary-bg-color;
-    color: $accent-color;
-    border: $accent-color 1px solid;
-}
-
-.mx_SearchBar_cancel {
-    padding-left: 14px;
-    padding-right: 14px;
-    cursor: pointer;
+    .mx_SearchBar_cancel {
+        background-color: $warning-color;
+        mask: url('../../../img/cancel.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 12px;
+        padding: 10px;
+        margin: 0 12px 0 3px;
+        cursor: pointer;
+    }
 }

src/components/views/rooms/SearchBar.js

@@ -60,12 +60,44 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_SearchBar">
-                <input ref="search_term" className="mx_SearchBar_input" type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
-                <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch}><img src="img/search-button.svg" width="37" height="37" alt={_t("Search")} /></AccessibleButton>
                 <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick}>{_t("This Room")}</AccessibleButton>
                 <AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick}>{_t("All Rooms")}</AccessibleButton>
-                <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
+                <div className="mx_SearchBar_input mx_textinput">
+                    <input ref="search_term" type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
+                    <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch}></AccessibleButton>
+                </div>
+                <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick}></AccessibleButton>
             </div>
         );
+
+
+
+
+/*
+const clearButton = this.state.searchTerm.length > 0 ?
+            (<AccessibleButton key="button"
+                    className="mx_SearchBox_closeButton"
+                    onClick={ () => {this._clearSearch("button")} }>
+            </AccessibleButton>) :  undefined;
+
+        return (
+            <div className="mx_SearchBox mx_textinput">
+                <input
+                    key="searchfield"
+                    type="text"
+                    ref="search"
+                    className="mx_textinput_icon mx_textinput_search"
+                    value={ this.state.searchTerm }
+                    onFocus={ this._onFocus }
+                    onChange={ this.onChange }
+                    onKeyDown={ this._onKeyDown }
+                    placeholder={ _t('Filter room names') }
+                />
+                { clearButton }
+            </div>
+        );
+*/
+
+
     },
 });