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 = -
- -
-
{ _t('Invite to this room') }
+ { _t('Invite to this room') }
; } @@ -447,18 +444,9 @@ module.exports = React.createClass({ />; } - const filterAndButtons = ( -
- - { inviteButton } -
- ); - return (
- { filterAndButtons } + { inviteButton }
+
); },