Add checkmarks to selected individuals

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;

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
             ? <img
                 src={require("../../../../res/img/icon-email-pill-avatar.svg")}
                 width={avatarSize} height={avatarSize} />
@@ -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 = <div className='mx_DMInviteDialog_roomTile_selected' />;
+        }
+
+        // To reduce flickering we put the checkmark on top of the actual avatar (prevents
+        // the browser from reloading the image source when the avatar remounts).
+        let stackedAvatar = (
+            <span className='mx_DMInviteDialog_roomTile_avatarStack'>
+                {avatar}
+                {checkmark}
+            </span>
+        );
+
         return (
             <div className='mx_DMInviteDialog_roomTile' onClick={this._onClick}>
-                {avatar}
+                {stackedAvatar}
                 <span className='mx_DMInviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</span>
                 <span className='mx_DMInviteDialog_roomTile_userId'>{this._highlightName(this.props.member.userId)}</span>
                 {timestamp}
@@ -492,6 +508,7 @@ export default class DMInviteDialog extends React.PureComponent {
                 key={r.userId}
                 onToggle={this._toggleMember}
                 highlightWord={this.state.filterText}
+                isSelected={this.state.targets.some(t => t.userId === r.userId)}
             />
         ));
         return (