diff --git a/res/css/views/dialogs/_DMInviteDialog.scss b/res/css/views/dialogs/_DMInviteDialog.scss
index e581f9dc7a..e4ca0b5953 100644
--- a/res/css/views/dialogs/_DMInviteDialog.scss
+++ b/res/css/views/dialogs/_DMInviteDialog.scss
@@ -93,6 +93,43 @@ limitations under the License.
vertical-align: middle;
}
+ .mx_DMInviteDialog_roomTile_avatarStack {
+ display: inline-block;
+ position: relative;
+ width: 36px;
+ height: 36px;
+
+ &>* {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .mx_DMInviteDialog_roomTile_selected {
+ width: 36px;
+ height: 36px;
+ border-radius: 36px;
+ background-color: $username-variant1-color;
+ display: inline-block;
+ position: relative;
+
+ &::before {
+ content: "";
+ width: 24px;
+ height: 24px;
+ grid-column: 1;
+ grid-row: 1;
+ mask-image: url('$(res)/img/feather-customised/check.svg');
+ mask-size: 100%;
+ mask-repeat: no-repeat;
+ position: absolute;
+ top: 6px; // 50%
+ left: 6px; // 50%
+ background-color: #ffffff; // this is fine without a var because it's for both themes
+ }
+ }
+
.mx_DMInviteDialog_roomTile_name {
font-weight: 600;
font-size: 14px;
diff --git a/src/components/views/dialogs/DMInviteDialog.js b/src/components/views/dialogs/DMInviteDialog.js
index 6eb6d0c78b..3703082504 100644
--- a/src/components/views/dialogs/DMInviteDialog.js
+++ b/src/components/views/dialogs/DMInviteDialog.js
@@ -170,6 +170,7 @@ class DMRoomTile extends React.PureComponent {
lastActiveTs: PropTypes.number,
onToggle: PropTypes.func.isRequired, // takes 1 argument, the member being toggled
highlightWord: PropTypes.string,
+ isSelected: PropTypes.bool,
};
_onClick = (e) => {
@@ -228,7 +229,7 @@ class DMRoomTile extends React.PureComponent {
}
const avatarSize = 36;
- const avatar = this.props.member.isEmail
+ let avatar = this.props.member.isEmail
?
@@ -241,9 +242,24 @@ class DMRoomTile extends React.PureComponent {
width={avatarSize}
height={avatarSize} />;
+ let checkmark = null;
+ if (this.props.isSelected) {
+ // To reduce flickering we put the 'selected' room tile above the real avatar
+ checkmark =