Blur avatars of unapproved conversations

ts/components/conversation/ConversationHeader.tsx

@@ -17,7 +17,7 @@ import { Avatar, AvatarSize } from '../Avatar';
 import { InContactsIcon } from '../InContactsIcon';
 
 import { LocalizerType } from '../../types/Util';
-import { ColorType } from '../../types/Colors';
+import { ConversationType } from '../../state/ducks/conversations';
 import { MuteOption, getMuteOptions } from '../../util/getMuteOptions';
 import {
   ExpirationTimerOptions,
@@ -35,33 +35,33 @@ export enum OutgoingCallButtonStyle {
 
 export type PropsDataType = {
   conversationTitle?: string;
-  id: string;
-  name?: string;
-
-  phoneNumber?: string;
-  profileName?: string;
-  color?: ColorType;
-  avatarPath?: string;
-  type: 'direct' | 'group';
-  title: string;
-
-  acceptedMessageRequest?: boolean;
-  isVerified?: boolean;
-  isMe?: boolean;
-  isArchived?: boolean;
-  isPinned?: boolean;
   isMissingMandatoryProfileSharing?: boolean;
-  left?: boolean;
-  markedUnread?: boolean;
-  groupVersion?: number;
-
-  canChangeTimer?: boolean;
-  expireTimer?: number;
-  muteExpiresAt?: number;
-
-  showBackButton?: boolean;
   outgoingCallButtonStyle: OutgoingCallButtonStyle;
-};
+  showBackButton?: boolean;
+} & Pick<
+  ConversationType,
+  | 'acceptedMessageRequest'
+  | 'avatarPath'
+  | 'canChangeTimer'
+  | 'color'
+  | 'expireTimer'
+  | 'groupVersion'
+  | 'id'
+  | 'isArchived'
+  | 'isMe'
+  | 'isPinned'
+  | 'isVerified'
+  | 'left'
+  | 'markedUnread'
+  | 'muteExpiresAt'
+  | 'name'
+  | 'phoneNumber'
+  | 'profileName'
+  | 'sharedGroupNames'
+  | 'title'
+  | 'type'
+  | 'unblurredAvatarPath'
+>;
 
 export type PropsActionsType = {
   onSetMuteNotifications: (seconds: number) => void;
@@ -180,6 +180,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
 
   private renderAvatar(): ReactNode {
     const {
+      acceptedMessageRequest,
       avatarPath,
       color,
       i18n,
@@ -188,22 +189,28 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
       name,
       phoneNumber,
       profileName,
+      sharedGroupNames,
       title,
+      unblurredAvatarPath,
     } = this.props;
 
     return (
       <span className="module-ConversationHeader__header__avatar">
         <Avatar
+          acceptedMessageRequest={acceptedMessageRequest}
           avatarPath={avatarPath}
           color={color}
           conversationType={type}
           i18n={i18n}
+          isMe={isMe}
           noteToSelf={isMe}
           title={title}
           name={name}
           phoneNumber={phoneNumber}
           profileName={profileName}
+          sharedGroupNames={sharedGroupNames}
           size={AvatarSize.THIRTY_TWO}
+          unblurredAvatarPath={unblurredAvatarPath}
         />
       </span>
     );