Fixed Change Avatar. Improved Admin Panel: People columns order, selected tab background color.

Thanks to xet7 !

client/components/users/userAvatar.css

@@ -23,6 +23,9 @@
   background-color: #dbdbdb;
   color: #444;
   position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .member .avatar.avatar-image {
   object-fit: cover;

client/components/users/userAvatar.jade

@@ -17,7 +17,7 @@ template(name="userAvatar")
 
 template(name="userAvatarInitials")
   svg.avatar.avatar-initials(viewBox="0 0 {{viewPortWidth}} 15")
-    text(x="50%" y="13" text-anchor="middle")= initials
+    text(x="50%" y="11" text-anchor="middle" dominant-baseline="middle" font-size="16")= initials
 
 template(name="orgAvatar")
   a.member.orgOrTeamMember(class="js-member" title="{{orgData.orgDisplayName}}")
@@ -53,7 +53,7 @@ template(name="boardTeamRow")
 
 template(name="boardOrgName")
   svg.avatar.avatar-initials(viewBox="0 0 {{orgViewPortWidth}} 15")
-    text(x="50%" y="13" text-anchor="middle")= orgName
+    text(x="50%" y="11" text-anchor="middle" dominant-baseline="middle" font-size="16")= orgName
 
 template(name="teamAvatar")
   a.member.orgOrTeamMember(class="js-member" title="{{teamData.teamDisplayName}}")
@@ -61,7 +61,7 @@ template(name="teamAvatar")
 
 template(name="boardTeamName")
   svg.avatar.avatar-initials(viewBox="0 0 {{teamViewPortWidth}} 15")
-    text(x="50%" y="13" text-anchor="middle")= teamName
+    text(x="50%" y="11" text-anchor="middle" dominant-baseline="middle" font-size="16")= teamName
 
 template(name="userPopup")
   .board-member-menu
@@ -88,13 +88,11 @@ template(name="changeAvatarPopup")
       li: a.js-select-avatar
         .member
           img.avatar.avatar-image(src="{{link}}")
-        | {{_ 'uploaded-avatar'}}
         if isSelected
           | ✅
         p.sub-name
-          unless isSelected
-            a.js-delete-avatar {{_ 'delete'}}
-            |  -
+          a.js-delete-avatar {{_ 'delete'}}
+          |  -
           = name
     li: a.js-select-initials
       .member
@@ -102,7 +100,7 @@ template(name="changeAvatarPopup")
       | {{_ 'initials' }}
       if noAvatarUrl
         | ✅
-       p.sub-name {{_ 'default-avatar'}}
+      p.sub-name {{_ 'default-avatar'}}
   input.hide.js-upload-avatar-input(accept="image/*;capture=camera" type="file")
   if Meteor.settings.public.avatarsUploadMaxSize
     | {{_ 'max-avatar-filesize'}} {{Meteor.settings.public.avatarsUploadMaxSize}}
@@ -113,7 +111,11 @@ template(name="changeAvatarPopup")
   | {{_ 'invalid-file'}}
   button.full.js-upload-avatar
     | 📤
-    | {{_ 'upload-avatar'}}
+    | {{_ 'upload-avatar' }}
+
+template(name="deleteAvatarPopup")
+  p {{_ 'delete-avatar-confirm'}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
 template(name="cardMemberPopup")
   .board-member-menu

client/components/users/userAvatar.js

@@ -187,7 +187,7 @@ BlazeComponent.extendComponent({
   },
 
   uploadedAvatars() {
-    const ret = ReactiveCache.getAvatars({ userId: Meteor.userId() }, {}, true).each();
+    const ret = ReactiveCache.getAvatars({ userId: Meteor.userId() }, {}, true);
     return ret;
   },
 
@@ -205,7 +205,11 @@ BlazeComponent.extendComponent({
   },
 
   setAvatar(avatarUrl) {
-    ReactiveCache.getCurrentUser().setAvatarUrl(avatarUrl);
+    Meteor.call('setAvatarUrl', avatarUrl, (err) => {
+      if (err) {
+        this.setError(err.reason || 'Error setting avatar');
+      }
+    });
   },
 
   setError(error) {
@@ -234,44 +238,30 @@ BlazeComponent.extendComponent({
             uploader.start();
           }
         },
-        'click .js-select-avatar'() {
-          const avatarUrl = this.currentData().link();
-          this.setAvatar(avatarUrl);
+        'click .js-select-avatar'(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          const data = Blaze.getData(event.currentTarget);
+          if (data && typeof data.link === 'function') {
+            const avatarUrl = data.link();
+            this.setAvatar(avatarUrl);
+          }
         },
-        'click .js-select-initials'() {
+        'click .js-select-initials'(event) {
+          event.preventDefault();
+          event.stopPropagation();
           this.setAvatar('');
         },
-        'click .js-delete-avatar'(event) {
-          Avatars.remove(this.currentData()._id);
+        'click .js-delete-avatar': Popup.afterConfirm('deleteAvatar', function(event) {
+          Avatars.remove(this._id);
+          Popup.back();
           event.stopPropagation();
-        },
+        }),
       },
     ];
   },
 }).register('changeAvatarPopup');
 
-Template.cardMembersPopup.helpers({
-  isCardMember() {
-    const card = Template.parentData();
-    const cardMembers = card.getMembers();
-
-    return _.contains(cardMembers, this.userId);
-  },
-
-  user() {
-    return ReactiveCache.getUser(this.userId);
-  },
-});
-
-Template.cardMembersPopup.events({
-  'click .js-select-member'(event) {
-    const card = Utils.getCurrentCard();
-    const memberId = this.userId;
-    card.toggleMember(memberId);
-    event.preventDefault();
-  },
-});
-
 Template.cardMemberPopup.helpers({
   user() {
     return ReactiveCache.getUser(this.userId);