add input styling for light and dark panels (leftpanel vs room header)

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;
@@ -222,6 +224,26 @@ input[type=search] {
     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;
+    }
+}
+
 
 // dont search UI as not all browsers support it,
 // we implement it ourselves where needed instead

src/components/structures/GroupView.js

@@ -1287,6 +1287,7 @@ export default React.createClass({
 
             const headerClasses = {
                 mx_GroupView_header: true,
+                'light-panel': true,
                 mx_GroupView_header_view: !this.state.editing,
                 mx_GroupView_header_isUserMember: this.state.isUserMember,
             };

src/components/structures/LeftPanel.js

@@ -201,7 +201,7 @@ const LeftPanel = React.createClass({
         return (
             <div className={containerClasses}>
                 { tagPanel }
-                <aside className={"mx_LeftPanel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
+                <aside className={"mx_LeftPanel dark-panel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                     <TopLeftMenuButton collapsed={ this.props.collapsed }/>
                     { searchBox }
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />

src/components/views/groups/GroupMemberList.js

@@ -163,7 +163,7 @@ export default React.createClass({
             </div> : <div />;
 
         return (
-            <div className="mx_MemberList">
+            <div className="mx_MemberList dark-panel">
                 { inputBox }
                 <GeminiScrollbarWrapper autoshow={true}>
                     { joined }

src/components/views/groups/GroupRoomList.js

@@ -131,7 +131,7 @@ export default React.createClass({
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return (
-            <div className="mx_GroupRoomList">
+            <div className="mx_GroupRoomList dark-panel">
                 { inputBox }
                 <GeminiScrollbarWrapper autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
                     <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}

src/components/views/rooms/MemberList.js

@@ -457,7 +457,7 @@ module.exports = React.createClass({
         );
 
         return (
-            <div className="mx_MemberList">
+            <div className="mx_MemberList dark-panel">
                 { filterAndButtons }
                 <GeminiScrollbarWrapper autoshow={true}>
                     <div className="mx_MemberList_wrapper">

src/components/views/rooms/RoomHeader.js

@@ -424,7 +424,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className={"mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
+            <div className={"mx_RoomHeader light-panel " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
                     { name }