Blur avatars of unapproved conversations

ts/components/ContactListItem.tsx

@@ -10,36 +10,45 @@ import { Emojify } from './conversation/Emojify';
 import { InContactsIcon } from './InContactsIcon';
 
 import { LocalizerType } from '../types/Util';
-import { ColorType } from '../types/Colors';
+import { ConversationType } from '../state/ducks/conversations';
 
 type Props = {
-  about?: string;
-  avatarPath?: string;
-  color?: ColorType;
   i18n: LocalizerType;
   isAdmin?: boolean;
-  isMe?: boolean;
-  name?: string;
   onClick?: () => void;
-  phoneNumber?: string;
-  profileName?: string;
-  title: string;
-};
+} & Pick<
+  ConversationType,
+  | 'about'
+  | 'acceptedMessageRequest'
+  | 'avatarPath'
+  | 'color'
+  | 'isMe'
+  | 'name'
+  | 'phoneNumber'
+  | 'profileName'
+  | 'sharedGroupNames'
+  | 'title'
+  | 'unblurredAvatarPath'
+>;
 
 export class ContactListItem extends React.Component<Props> {
   public renderAvatar(): JSX.Element {
     const {
+      acceptedMessageRequest,
       avatarPath,
-      i18n,
       color,
+      i18n,
       name,
       phoneNumber,
       profileName,
+      sharedGroupNames,
       title,
+      unblurredAvatarPath,
     } = this.props;
 
     return (
       <Avatar
+        acceptedMessageRequest={acceptedMessageRequest}
         avatarPath={avatarPath}
         color={color}
         conversationType="direct"
@@ -48,7 +57,9 @@ export class ContactListItem extends React.Component<Props> {
         phoneNumber={phoneNumber}
         profileName={profileName}
         title={title}
+        sharedGroupNames={sharedGroupNames}
         size={52}
+        unblurredAvatarPath={unblurredAvatarPath}
       />
     );
   }