Redesign: bring back & restyle room filter field

res/css/_common.scss

@@ -52,11 +52,6 @@ a:visited {
 
 input[type=text], input[type=password], textarea {
     background-color: transparent;
-    color: $primary-fg-color;
-}
-
-input[type=text].error, input[type=password].error {
-    border: 1px solid $warning-color;
 }
 
 input[type=text]:focus, input[type=password]:focus, textarea:focus {

res/css/structures/_SearchBox.scss

@@ -14,55 +14,12 @@ 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;
+    background-position: center;
+    padding: 9px;
 }

res/css/views/rooms/_MemberList.scss

@@ -43,41 +43,21 @@ limitations under the License.
 .mx_MemberList form,
 .mx_GroupMemberList form,
 .mx_GroupRoomList form {
-    margin: 8px;
     display: flex;
     justify-content: flex-end;
+    align-items: center;
 }
 
-.mx_MemberList form > *:not(:first-child),
-.mx_GroupMemberList form > *:not(:first-child),
-.mx_GroupRoomList form > *:not(:first-child) {
-    margin-left: 5px;
+.mx_MemberList form > *,
+.mx_GroupMemberList form > *,
+.mx_GroupRoomList form > * {
+    margin: 9px;
 }
 
 .mx_MemberList_query,
 .mx_GroupMemberList_query,
 .mx_GroupRoomList_query {
     flex: 1 1 0;
-    box-sizing: border-box;
-    font-family: $font-family;
-    border-radius: 4px;
-    padding: 9px;
-    color: $input-darker-fg-color;
-    background-color: $input-darker-bg-color;
-    font-size: 14px;
-    font-weight: 600;
-    border: none;
-}
-
-.mx_MemberList_query::-webkit-input-placeholder,
-.mx_GroupMemberList_query::-webkit-input-placeholder,
-.mx_GroupRoomList_query::-webkit-input-placeholder,
-.mx_MemberList_query::-moz-placeholder,
-.mx_GroupMemberList_query::-moz-placeholder,
-.mx_GroupRoomList_query::-moz-placeholder {
-    color: $input-darker-fg-color;
-    opacity: 0.5;
-    font-size: 14px;
 }
 
 .mx_MemberList h2, .mx_GroupMemberList h2 {

res/themes/dharma/css/_dharma.scss

@@ -69,6 +69,8 @@ $primary-hairline-color: #e5e5e5;
 $input-border-color: #f0f0f0;
 $input-darker-bg-color: rgba(193, 201, 214, 0.29);
 $input-darker-fg-color: #9fa9ba;
+$input-lighter-bg-color: #f2f5f8;
+$input-lighter-fg-color: $input-darker-fg-color;
 
 $button-bg-color: #7ac9a1;
 $button-fg-color: white;
@@ -178,6 +180,93 @@ $lightbox-border-color: #ffffff;
 // unused?
 $progressbar-color: #000;
 
+// form elements
+
+// .mx_textinput is a container for a text input
+// + some other controls like buttons, ...
+// it has the appearance of a text box so the controls
+// appear to be part of the input
+
+:not(.mx_textinput) > input[type=text],
+:not(.mx_textinput) > input[type=search],
+.mx_textinput {
+    display: block;
+    margin: 9px;
+    box-sizing: border-box;
+    background-color: transparent;
+    color: $input-darker-fg-color;
+    border-radius: 4px;
+    border: 1px solid #c1c1c1;
+}
+
+.mx_textinput {
+    display: flex;
+    align-items: center;
+}
+
+.mx_textinput > input[type=text],
+.mx_textinput > input[type=search] {
+    border: none;
+    flex: 1;
+    color: inherit; //from .mx_textinput
+}
+
+input[type=text],
+input[type=search] {
+    padding: 9px;
+    font-family: $font-family;
+    font-size: 14px;
+    font-weight: 600;
+    min-width: 0;
+}
+
+.dark-panel {
+    :not(.mx_textinput) > input[type=text],
+    :not(.mx_textinput) > input[type=search],
+    .mx_textinput {
+        color: $input-darker-fg-color;
+        background-color: $input-darker-bg-color;
+        border: none;
+    }
+}
+
+.light-panel {
+    :not(.mx_textinput) > input[type=text],
+    :not(.mx_textinput) > input[type=search],
+    .mx_textinput {
+        color: $input-lighter-fg-color;
+        background-color: $input-lighter-bg-color;
+        border: none;
+    }
+}
+
+input[type=text].mx_textinput_icon,
+input[type=search].mx_textinput_icon {
+    padding-left: 36px;
+    background-repeat: no-repeat;
+    background-position: 10px center;
+}
+
+input[type=text].mx_textinput_icon.mx_textinput_search,
+input[type=search].mx_textinput_icon.mx_textinput_search {
+    background-image: url('../../img/icons-search.svg');
+}
+
+// dont search UI as not all browsers support it,
+// we implement it ourselves where needed instead
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+  display: none;
+}
+
+.input[type=text]::-webkit-input-placeholder,
+.input[type=text]::-moz-placeholder,
+.input[type=search]::-webkit-input-placeholder,
+.input[type=search]::-moz-placeholder {
+    color: #a5aab2;
+}
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {