fix closed group avatar for conversationlistItem

stylesheets/_avatar.scss

@@ -55,6 +55,7 @@
   @include color-svg('../images/profile-individual.svg', $color-white);
 }
 
+.module-avatar__icon-closed .module-avatar--28,
 .module-avatar--28 {
   height: 28px;
   width: 28px;

stylesheets/themes.scss

@@ -9,7 +9,7 @@ $accentDarkTheme: #00f782;
 $borderLightTheme: #f1f1f1; // search for references on ts TODO: make this exposed on ts
 $borderDarkTheme: rgba($white, 0.06);
 
-$borderAvatarColor: #000a; // search for references on ts TODO: make this exposed on ts
+$borderAvatarColor: #00000059; // search for references on ts TODO: make this exposed on ts
 
 $themes: (
   light: (

ts/components/Avatar.tsx

@@ -212,6 +212,6 @@ export class Avatar extends React.PureComponent<Props, State> {
   }
 
   private getAvatarBorderColor(): string {
-    return '#000A'; // borderAvatarColor in themes.scss
+    return '#00000059'; // borderAvatarColor in themes.scss
   }
 }

ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx

@@ -30,7 +30,30 @@ export class ClosedGroupAvatar extends React.PureComponent<Props> {
       );
     } else if (conversations.length > 1) {
       // in a closed group avatar, each visible avatar member size is 2/3 of the group avatar in size
-      const avatarsDiameter = 28; //FIXME audric (size * 2) / 3;
+      // Always use the size directly under the one requested
+      let avatarsDiameter = 0;
+      switch (size) {
+        case 36: {
+          avatarsDiameter = 28;
+          break;
+        }
+        case 48: {
+          avatarsDiameter = 36;
+          break;
+        }
+        case 80: {
+          avatarsDiameter = 48;
+          break;
+        }
+        case 300: {
+          avatarsDiameter = 80;
+          break;
+        }
+        default:
+          throw new Error(
+            `Invalid size request for closed group avatar: ${size}`
+          );
+      }
       const conv1 = conversations[0];
       const conv2 = conversations[1];
       // use the 2 first members as group avatars

ts/components/ConversationListItem.tsx

@@ -23,6 +23,7 @@ import {
 import { ConversationAttributes } from '../../js/models/conversations';
 import { GroupUtils } from '../session/utils';
 import { PubKey } from '../session/types';
+import { UserUtil } from '../util';
 
 export type PropsData = {
   id: string;
@@ -91,11 +92,15 @@ export class ConversationListItem extends React.PureComponent<Props, State> {
   public async fetchClosedConversationDetails() {
     if (!this.props.isPublic && this.props.type === 'group') {
       const groupId = this.props.phoneNumber;
-      const members = await GroupUtils.getGroupMembers(PubKey.cast(groupId));
-      const membersConvos = members.map(m =>
-        window.ConversationController.get(m.key)
+      let members = await GroupUtils.getGroupMembers(PubKey.cast(groupId));
+      const ourPrimary = await UserUtil.getPrimary();
+      members = members.filter(m => m.key !== ourPrimary.key);
+      members.sort((a, b) => (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+      const membersConvos = members.map(
+        m => window.ConversationController.get(m.key).cachedProps
       );
-
+      // no need to forward more than 2 conversation for rendering the group avatar
+      membersConvos.slice(0, 2);
       this.setState({ closedMemberConversations: membersConvos });
     }
   }
@@ -113,12 +118,6 @@ export class ConversationListItem extends React.PureComponent<Props, State> {
       isPublic,
     } = this.props;
 
-    if (!isPublic && type === 'group') {
-      if (!this.state.closedMemberConversations) {
-        return <></>;
-      }
-    }
-
     const iconSize = 36;
 
     return (
@@ -341,7 +340,6 @@ export class ConversationListItem extends React.PureComponent<Props, State> {
       style,
       mentionedUs,
     } = this.props;
-
     const triggerId = `conversation-item-${phoneNumber}-ctxmenu`;
 
     return (