From 92e43ea18108c366f5ca9ce0603f04cbcf952b92 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 6 Nov 2018 14:47:11 +0100
Subject: [PATCH 1/3] move filter member field to bottom of memberlist

reorganize styles as well
---
 res/css/views/rooms/_MemberList.scss     | 42 +++++++-----------------
 src/components/views/rooms/MemberList.js | 19 +++--------
 2 files changed, 17 insertions(+), 44 deletions(-)

diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index cb0a541e23..db41f6bc28 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -40,20 +40,6 @@ limitations under the License.
     flex: 1 1 0px;
 }
 
-.mx_MemberList form,
-.mx_GroupMemberList form,
-.mx_GroupRoomList form {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-}
-
-.mx_MemberList form > *,
-.mx_GroupMemberList form > *,
-.mx_GroupRoomList form > * {
-    margin: 9px;
-}
-
 .mx_MemberList_query,
 .mx_GroupMemberList_query,
 .mx_GroupRoomList_query {
@@ -75,28 +61,24 @@ limitations under the License.
     padding: 10px;
 }
 
-.mx_MemberList_inviteIcon object {
-    pointer-events: none;
-}
-
-.mx_MemberList_inviteIcon {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-}
-
 
 .mx_MemberList_invite {
     flex: 0 0 auto;
     position: relative;
     background-color: $button-bg-color;
-    color: $button-fg-color;
     border-radius: 4px;
     padding: 8px;
-    font-weight: 600;
-}
+    margin: 9px;
+    display: flex;
 
-/* move text to left */
-.mx_MemberList_invite > :last-child {
-    margin-left: 25px;
+    span {
+        margin: 0 auto;
+        background-image: url('../../img/icon-invite-people.svg');
+        background-repeat: no-repeat;
+        background-position: center left;
+        padding-left: 25px;
+
+        font-weight: 600;
+        color: $button-fg-color;
+    }
 }
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 69e5dbb76c..58be22c90f 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -429,10 +429,7 @@ module.exports = React.createClass({
             const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
             inviteButton =
                 <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
-                    <div className="mx_MemberList_inviteIcon" >
-                        <TintableSvg src="img/icon-invite-people.svg" width="16" height="16" />
-                    </div>
-                    <div>{ _t('Invite to this room') }</div>
+                    <span>{ _t('Invite to this room') }</span>
                 </AccessibleButton>;
         }
 
@@ -447,18 +444,9 @@ module.exports = React.createClass({
                 />;
         }
 
-        const filterAndButtons = (
-            <form autoComplete="off">
-                <input className="mx_MemberList_query mx_textinput_icon mx_textinput_search" id="mx_MemberList_query" type="search"
-                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                        placeholder={_t('Filter room members')} />
-                { inviteButton }
-            </form>
-        );
-
         return (
             <div className="mx_MemberList dark-panel">
-                { filterAndButtons }
+                { inviteButton }
                 <GeminiScrollbarWrapper autoshow={true}>
                     <div className="mx_MemberList_wrapper">
                         <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
@@ -469,6 +457,9 @@ module.exports = React.createClass({
                         { invitedSection }
                     </div>
                 </GeminiScrollbarWrapper>
+                <input className="mx_MemberList_query mx_textinput_icon mx_textinput_search" id="mx_MemberList_query" type="text"
+                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                        placeholder={_t('Filter room members')} />
             </div>
         );
     },

From 4e773c266516147642eaa0d1be180d6f5d9ac1e7 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 6 Nov 2018 14:47:58 +0100
Subject: [PATCH 2/3] Make right panel a dark-panel instead of every
 descendant.

Also move bg color central.
---
 res/css/structures/_FilePanel.scss             | 1 -
 res/css/structures/_LeftPanel.scss             | 1 -
 res/css/structures/_NotificationPanel.scss     | 1 -
 res/css/structures/_RoomSubList.scss           | 1 -
 res/css/views/rooms/_MemberInfo.scss           | 1 -
 res/css/views/rooms/_MemberList.scss           | 1 -
 res/css/views/rooms/_RoomList.scss             | 1 -
 res/css/views/rooms/_RoomTile.scss             | 1 -
 res/themes/dharma/css/_dharma.scss             | 7 ++++++-
 src/components/structures/RightPanel.js        | 1 +
 src/components/views/groups/GroupMemberList.js | 2 +-
 src/components/views/groups/GroupRoomList.js   | 2 +-
 src/components/views/rooms/MemberList.js       | 2 +-
 13 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss
index aa56c23866..677fa34c6f 100644
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_FilePanel {
     order: 2;
     flex: 1 1 0;
-    background-color: $secondary-accent-color;
     overflow-y: auto;
 }
 
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index fc1622aa4d..1fe7a42678 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -46,7 +46,6 @@ limitations under the License.
 }
 
 .mx_LeftPanel {
-    background-color: $secondary-accent-color;
     flex: 1;
     overflow-x: hidden;
     display: flex;
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index 6fd1f1690d..b171aa3e36 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_NotificationPanel {
     order: 2;
     flex: 1 1 0;
-    background-color: $secondary-accent-color;
     overflow-y: auto;
 }
 
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index e062a912a5..30ce90a84f 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -45,7 +45,6 @@ limitations under the License.
     padding-top: 6px;
     padding-bottom: 6px;
     cursor: pointer;
-    background-color: $secondary-accent-color;
 }
 
 .mx_RoomSubList_label.mx_RoomSubList_fixed {
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index ab029874b4..a027c575dd 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_MemberInfo {
-    background-color: $secondary-accent-color;
     display: flex;
     flex-direction: column;
     flex: 1;
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index db41f6bc28..e21bc22f2e 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_MemberList,
 .mx_GroupMemberList,
 .mx_GroupRoomList {
-    background-color: $secondary-accent-color;
     flex: 1;
     display: flex;
     flex-direction: column;
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 54f7d023e4..30a569d41f 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -37,7 +37,6 @@ limitations under the License.
 }
 
 .mx_RoomList_emptySubListTip_container {
-    background-color: $secondary-accent-color;
     padding-left: 18px;
     padding-right: 18px;
     padding-top: 8px;
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index ca23d79137..475d2ac275 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -23,7 +23,6 @@ limitations under the License.
     margin: 0;
     padding: 2px 12px;
     position: relative;
-    background-color: $secondary-accent-color;
 }
 
 .mx_RoomTile_tooltip {
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index 1fa5963ccd..0b53202240 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -180,7 +180,7 @@ $lightbox-border-color: #ffffff;
 // unused?
 $progressbar-color: #000;
 
-// form elements
+/*** form elements ***/
 
 // .mx_textinput is a container for a text input
 // + some other controls like buttons, ...
@@ -220,6 +220,11 @@ input[type=search] {
     min-width: 0;
 }
 
+/*** panels ***/
+.dark-panel {
+    background-color: $secondary-accent-color;
+}
+
 .dark-panel {
     :not(.mx_textinput) > input[type=text],
     :not(.mx_textinput) > input[type=search],
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 95261597fe..5aaa2a1c06 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -213,6 +213,7 @@ export default class RightPanel extends React.Component {
         const classes = classNames("mx_RightPanel", "mx_fadable", {
             "collapsed": this.props.collapsed,
             "mx_fadable_faded": this.props.disabled,
+            "dark-panel": true
         });
 
         return (
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 156785efe8..38c679a5b5 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -163,7 +163,7 @@ export default React.createClass({
             </div> : <div />;
 
         return (
-            <div className="mx_MemberList dark-panel">
+            <div className="mx_MemberList">
                 { inputBox }
                 <GeminiScrollbarWrapper autoshow={true}>
                     { joined }
diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js
index 1abf6acb94..cfd2b806d4 100644
--- a/src/components/views/groups/GroupRoomList.js
+++ b/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 dark-panel">
+            <div className="mx_GroupRoomList">
                 { inputBox }
                 <GeminiScrollbarWrapper autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
                     <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 58be22c90f..92c486825c 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -445,7 +445,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className="mx_MemberList dark-panel">
+            <div className="mx_MemberList">
                 { inviteButton }
                 <GeminiScrollbarWrapper autoshow={true}>
                     <div className="mx_MemberList_wrapper">

From b0a47da72c5a6758b6a389897b88507babe51ac5 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 6 Nov 2018 15:29:47 +0100
Subject: [PATCH 3/3] fix lint

---
 src/components/structures/RightPanel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 5aaa2a1c06..33c09e1b16 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -213,7 +213,7 @@ export default class RightPanel extends React.Component {
         const classes = classNames("mx_RightPanel", "mx_fadable", {
             "collapsed": this.props.collapsed,
             "mx_fadable_faded": this.props.disabled,
-            "dark-panel": true
+            "dark-panel": true,
         });
 
         return (