Blur avatars of unapproved conversations

ts/components/ContactPill.tsx

@@ -3,26 +3,33 @@
 
 import React, { FunctionComponent } from 'react';
 
-import { ColorType } from '../types/Colors';
+import { ConversationType } from '../state/ducks/conversations';
 import { LocalizerType } from '../types/Util';
 import { ContactName } from './conversation/ContactName';
 import { Avatar, AvatarSize } from './Avatar';
 
 export type PropsType = {
-  avatarPath?: string;
-  color?: ColorType;
-  firstName?: string;
   i18n: LocalizerType;
-  id: string;
-  isMe?: boolean;
-  name?: string;
   onClickRemove: (id: string) => void;
-  phoneNumber?: string;
-  profileName?: string;
-  title: string;
-};
+} & Pick<
+  ConversationType,
+  | 'about'
+  | 'acceptedMessageRequest'
+  | 'avatarPath'
+  | 'color'
+  | 'firstName'
+  | 'id'
+  | 'isMe'
+  | 'name'
+  | 'phoneNumber'
+  | 'profileName'
+  | 'sharedGroupNames'
+  | 'title'
+  | 'unblurredAvatarPath'
+>;
 
 export const ContactPill: FunctionComponent<PropsType> = ({
+  acceptedMessageRequest,
   avatarPath,
   color,
   firstName,
@@ -31,7 +38,9 @@ export const ContactPill: FunctionComponent<PropsType> = ({
   name,
   phoneNumber,
   profileName,
+  sharedGroupNames,
   title,
+  unblurredAvatarPath,
   onClickRemove,
 }) => {
   const removeLabel = i18n('ContactPill--remove');
@@ -39,6 +48,7 @@ export const ContactPill: FunctionComponent<PropsType> = ({
   return (
     <div className="module-ContactPill">
       <Avatar
+        acceptedMessageRequest={acceptedMessageRequest}
         avatarPath={avatarPath}
         color={color}
         noteToSelf={false}
@@ -48,7 +58,9 @@ export const ContactPill: FunctionComponent<PropsType> = ({
         phoneNumber={phoneNumber}
         profileName={profileName}
         title={title}
+        sharedGroupNames={sharedGroupNames}
         size={AvatarSize.TWENTY_EIGHT}
+        unblurredAvatarPath={unblurredAvatarPath}
       />
       <ContactName
         firstName={firstName}