put event in the avatar element and trigger it in conversation header

js/views/conversation_view.js

@@ -290,6 +290,14 @@
           onInviteFriends: () => {
             window.Whisper.events.trigger('inviteFriends', this.model);
           },
+
+          onShowUserDetails: (pubkey) => {
+            if (this.model.isPrivate()) {
+              window.Whisper.events.trigger('onShowUserDetails', {
+                userPubKey: pubkey,
+              });
+            }
+          },
         };
       };
       this.titleView = new Whisper.ReactWrapperView({

ts/components/Avatar.tsx

@@ -17,6 +17,7 @@ interface Props {
   size: number;
   borderColor?: string;
   borderWidth?: number;
+  onAvatarClick?: () => void;
 }
 
 interface State {
@@ -25,11 +26,13 @@ interface State {
 
 export class Avatar extends React.PureComponent<Props, State> {
   public handleImageErrorBound: () => void;
+  public onAvatarClickBound: () => void;
 
   public constructor(props: Props) {
     super(props);
 
     this.handleImageErrorBound = this.handleImageError.bind(this);
+    this.onAvatarClickBound = this.onAvatarClick.bind(this);
 
     this.state = {
       imageBroken: false,
@@ -171,12 +174,19 @@ export class Avatar extends React.PureComponent<Props, State> {
           hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
           !hasImage ? `module-avatar--${color}` : null
         )}
+        onClick={this.onAvatarClickBound}
       >
         {hasImage ? this.renderAvatarOrIdenticon() : this.renderNoImage()}
       </div>
     );
   }
 
+  private onAvatarClick() {
+    if (this.props.onAvatarClick) {
+      this.props.onAvatarClick()
+    }
+  }
+
   private renderAvatarOrIdenticon() {
     const { avatarPath, conversationType } = this.props;
 

ts/components/conversation/ConversationHeader.tsx

@@ -68,12 +68,14 @@ interface Props {
   onLeaveGroup: () => void;
 
   onInviteFriends: () => void;
+  onShowUserDetails?: (userPubKey: string) => void;
 
   i18n: LocalizerType;
 }
 
 export class ConversationHeader extends React.Component<Props> {
   public showMenuBound: (event: React.MouseEvent<HTMLDivElement>) => void;
+  public onShowUserDetailsBound: (userPubKey: string) => void;
   public menuTriggerRef: React.RefObject<any>;
 
   public constructor(props: Props) {
@@ -81,6 +83,7 @@ export class ConversationHeader extends React.Component<Props> {
 
     this.menuTriggerRef = React.createRef();
     this.showMenuBound = this.showMenu.bind(this);
+    this.onShowUserDetailsBound = this.onShowUserDetails.bind(this);
   }
 
   public showMenu(event: React.MouseEvent<HTMLDivElement>) {
@@ -180,6 +183,9 @@ export class ConversationHeader extends React.Component<Props> {
           size={28}
           borderColor={borderColor}
           borderWidth={2}
+          onAvatarClick={() => {
+            this.onShowUserDetailsBound(phoneNumber);
+          }}
         />
       </span>
     );
@@ -397,4 +403,9 @@ export class ConversationHeader extends React.Component<Props> {
       </React.Fragment>
     );
   }
+
+  public onShowUserDetails(userPubKey: string) {
+    if (this.props.onShowUserDetails)
+      this.props.onShowUserDetails(userPubKey);
+  }
 }

ts/components/conversation/Message.tsx

@@ -674,12 +674,7 @@ export class Message extends React.PureComponent<Props, State> {
 
     return (
       <div
-        className="module-message__author-avatar"
-        role="button"
-        onClick={() => {
-          onShowUserDetails(authorPhoneNumber);
-        }}
-      >
+        className="module-message__author-avatar">
         <Avatar
           avatarPath={authorAvatarPath}
           color={authorColor}
@@ -689,6 +684,9 @@ export class Message extends React.PureComponent<Props, State> {
           phoneNumber={authorPhoneNumber}
           profileName={authorProfileName}
           size={36}
+          onAvatarClick={() => {
+            onShowUserDetails(authorPhoneNumber);
+          }}
         />
         {isModerator && (
           <div className="module-avatar__icon--crown-wrapper">