cosmetic UI for updateGroupMembersDialog

_locales/en/messages.json

@@ -1753,7 +1753,7 @@
     "description": "Toast title when the user tries to remove the creator from a closed group v2 member list."
   },
   "cannotRemoveCreatorFromGroupDesc": {
-    "message": "You cannot remove this user as he is the creator of the group.",
+    "message": "You cannot remove this user as they are the creator of the group.",
     "description": "Toast description when the user tries to remove the creator from a closed group v2 member list."
   },
   "noContactsForGroup": {

stylesheets/_mentions.scss

@@ -21,14 +21,6 @@
   }
 }
 
-.dark-theme {
-  .contact-selection-list {
-    .check-mark {
-      color: rgb(230, 230, 230);
-    }
-  }
-}
-
 .member-list-container {
   margin: 0;
   padding: 0;

stylesheets/_session.scss

@@ -556,12 +556,6 @@ label {
   .contact-selection-list {
     width: unset;
   }
-
-  .create-group-dialog__member-count {
-    text-align: center;
-    margin-top: -25px;
-    opacity: 0.6;
-  }
 }
 
 .session-confirm {

ts/components/conversation/ModeratorsAddDialog.tsx

@@ -150,9 +150,7 @@ export class AddModeratorsDialog extends React.Component<Props, State> {
               onMemberClicked={this.onMemberClicked}
             />
           </div>
-          {hasContacts ? null : (
+          {hasContacts ? null : <p>{i18n('noContactsToAdd')}</p>}
-            <p className="no-friends">{i18n('noContactsToAdd')}</p>
-          )}
         </div>
         <div className="buttons">
           <button className="cancel" tabIndex={0} onClick={this.closeDialog}>

ts/components/conversation/ModeratorsRemoveDialog.tsx

@@ -67,9 +67,7 @@ export class RemoveModeratorsDialog extends React.Component<Props, State> {
               onMemberClicked={this.onModClicked}
             />
           </div>
-          {hasMods ? null : (
+          {hasMods ? null : <p>{i18n('noModeratorsToRemove')}</p>}
-            <p className="no-friends">{i18n('noModeratorsToRemove')}</p>
-          )}
         </div>
         <div className="buttons">
           <button className="cancel" tabIndex={0} onClick={this.closeDialog}>

ts/components/conversation/UpdateGroupMembersDialog.tsx

@@ -82,27 +82,9 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
   }
 
   public render() {
-    const checkMarkedCount = this.getMemberCount(this.state.contactList);
+    const { okText, cancelText, contactList, titleText } = this.props;
-
+
-    const okText = this.props.okText;
+    const showNoMembersMessage = contactList.length === 0;
-    const cancelText = this.props.cancelText;
-
-    let titleText;
-    let noFriendsClasses;
-
-    if (this.props.isPublic) {
-      // no member count in title
-      titleText = `${this.props.titleText}`;
-      // hide the no-friend message
-      noFriendsClasses = classNames('no-friends', 'hidden');
-    } else {
-      // private group
-      titleText = this.props.titleText;
-      noFriendsClasses =
-        this.state.contactList.length === 0
-          ? 'no-friends'
-          : classNames('no-friends', 'hidden');
-    }
 
     const errorMsg = this.state.errorMessage;
     const errorMessageClasses = classNames(
@@ -120,23 +102,13 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
       >
         <div className="spacer-md" />
 
-        {!this.props.isPublic && (
-          <>
-            <small className="create-group-dialog__member-count">
-              {`${checkMarkedCount} members`}
-            </small>
-          </>
-        )}
-
         <p className={errorMessageClasses}>{errorMsg}</p>
         <div className="spacer-md" />
 
         <div className="group-member-list__selection">
           {this.renderMemberList()}
         </div>
-        <p className={noFriendsClasses}>{`(${this.props.i18n(
+        {showNoMembersMessage && <p>{window.i18n('noMembersInThisGroup')}</p>}
-          'noMembersInThisGroup'
-        )})`}</p>
 
         <div className="spacer-lg" />
 
@@ -192,11 +164,6 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
     });
   }
 
-  private getMemberCount(users: Array<Contact>) {
-    // Adding one to include ourselves
-    return this.getWouldBeMembers(users).length + 1;
-  }
-
   private closeDialog() {
     window.removeEventListener('keyup', this.onKeyUp);
 
@@ -214,7 +181,7 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
 
     if (selected.existingMember && admins.includes(selected.id)) {
       window.log.warn(
-        `User ${selected.id} cannot be removed as he is the creator of this closed group v2.`
+        `User ${selected.id} cannot be removed as they are the creator of the closed group v2.`
       );
       ToastUtils.pushCannotRemoveCreatorFromGroup();
       return;