move filter member field to bottom of memberlist

reorganize styles as well

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;
+    }
 }

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>
         );
     },