Update to new design for avatars: individual/group icons/colors

And two initials.

ts/components/conversation/ContactDetail.tsx

@@ -207,7 +207,9 @@ export class ContactDetail extends React.Component<Props> {
 
     return (
       <div className="module-contact-detail">
-        {renderAvatar({ contact, i18n, module })}
+        <div className="module-contact-detail__avatar">
+          {renderAvatar({ contact, i18n, size: 80 })}
+        </div>
         {renderName({ contact, isIncoming, module })}
         {renderContactShorthand({ contact, isIncoming, module })}
         {this.renderSendMessage({ hasSignalAccount, i18n, onSendMessage })}

ts/components/conversation/ConversationHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import classNames from 'classnames';
 
 import { Emojify } from './Emojify';
+import { Avatar } from '../Avatar';
 import { Localizer } from '../../types/Util';
 import {
   ContextMenu,
@@ -45,10 +45,6 @@ interface Props {
   onGoBack: () => void;
 }
 
-function getInitial(name: string): string {
-  return name.trim()[0] || '#';
-}
-
 export class ConversationHeader extends React.Component<Props> {
   public captureMenuTriggerBound: (trigger: any) => void;
   public showMenuBound: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -116,37 +112,25 @@ export class ConversationHeader extends React.Component<Props> {
       avatarPath,
       color,
       i18n,
+      isGroup,
       name,
       phoneNumber,
       profileName,
     } = this.props;
 
-    if (!avatarPath) {
-      const initial = getInitial(name || '');
-
-      return (
-        <div
-          className={classNames(
-            'module-conversation-header___avatar',
-            'module-conversation-header___default-avatar',
-            `module-conversation-header___default-avatar--${color}`
-          )}
-        >
-          {initial}
-        </div>
-      );
-    }
-
-    const title = `${name || phoneNumber}${
-      !name && profileName ? ` ~${profileName}` : ''
-    }`;
-
     return (
-      <img
-        className="module-conversation-header___avatar"
-        alt={i18n('contactAvatarAlt', [title])}
-        src={avatarPath}
-      />
+      <span className="module-conversation-header__avatar">
+        <Avatar
+          avatarPath={avatarPath}
+          color={color}
+          conversationType={isGroup ? 'group' : 'direct'}
+          i18n={i18n}
+          name={name}
+          phoneNumber={phoneNumber}
+          profileName={profileName}
+          size={28}
+        />
+      </span>
     );
   }
 

ts/components/conversation/EmbeddedContact.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
+import { Avatar } from '../Avatar';
 import { Contact, getName } from '../../types/Contact';
 
 import { Localizer } from '../../types/Util';
@@ -41,7 +42,7 @@ export class EmbeddedContact extends React.Component<Props> {
         role="button"
         onClick={onClick}
       >
-        {renderAvatar({ contact, i18n, module })}
+        {renderAvatar({ contact, i18n, size: 48 })}
         <div className="module-embedded-contact__text-container">
           {renderName({ contact, isIncoming, module })}
           {renderContactShorthand({ contact, isIncoming, module })}
@@ -53,40 +54,29 @@ export class EmbeddedContact extends React.Component<Props> {
 
 // Note: putting these below the main component so style guide picks up EmbeddedContact
 
-function getInitial(name: string): string {
-  return name.trim()[0] || '#';
-}
-
 export function renderAvatar({
   contact,
   i18n,
-  module,
+  size,
 }: {
   contact: Contact;
   i18n: Localizer;
-  module: string;
+  size: number;
 }) {
   const { avatar } = contact;
 
-  const path = avatar && avatar.avatar && avatar.avatar.path;
+  const avatarPath = avatar && avatar.avatar && avatar.avatar.path;
   const name = getName(contact) || '';
 
-  if (!path) {
-    const initials = getInitial(name);
-
-    return (
-      <div className={`module-${module}__image-container`}>
-        <div className={`module-${module}__image-container__default-avatar`}>
-          {initials}
-        </div>
-      </div>
-    );
-  }
-
   return (
-    <div className={`module-${module}__image-container`}>
-      <img src={path} alt={i18n('contactAvatarAlt', [name])} />
-    </div>
+    <Avatar
+      avatarPath={avatarPath}
+      color="grey"
+      conversationType="direct"
+      i18n={i18n}
+      name={name}
+      size={size}
+    />
   );
 }
 

ts/components/conversation/Message.tsx

@@ -6,6 +6,7 @@ import {
   isVideoTypeSupported,
 } from '../../util/GoogleChrome';
 
+import { Avatar } from '../Avatar';
 import { MessageBody } from './MessageBody';
 import { ExpireTimer, getIncrement } from './ExpireTimer';
 import { Timestamp } from './Timestamp';
@@ -133,10 +134,6 @@ function canDisplayImage(attachment?: Attachment) {
   return height > 0 && height <= 4096 && width > 0 && width <= 4096;
 }
 
-function getInitial(name: string): string {
-  return name.trim()[0] || '#';
-}
-
 function getExtension({
   fileName,
   contentType,
@@ -633,21 +630,17 @@ export class Message extends React.Component<Props, State> {
 
   public renderAvatar() {
     const {
+      authorAvatarPath,
       authorName,
       authorPhoneNumber,
       authorProfileName,
-      authorAvatarPath,
-      conversationColor,
       collapseMetadata,
+      conversationColor,
       conversationType,
       direction,
       i18n,
     } = this.props;
 
-    const title = `${authorName || authorPhoneNumber}${
-      !authorName && authorProfileName ? ` ~${authorProfileName}` : ''
-    }`;
-
     if (
       collapseMetadata ||
       conversationType !== 'group' ||
@@ -656,26 +649,18 @@ export class Message extends React.Component<Props, State> {
       return;
     }
 
-    if (!authorAvatarPath) {
-      const label = authorName ? getInitial(authorName) : '#';
-
-      return (
-        <div
-          className={classNames(
-            'module-message__author-default-avatar',
-            `module-message__author-default-avatar--${conversationColor}`
-          )}
-        >
-          <div className="module-message__author-default-avatar__label">
-            {label}
-          </div>
-        </div>
-      );
-    }
-
     return (
       <div className="module-message__author-avatar">
-        <img alt={i18n('contactAvatarAlt', [title])} src={authorAvatarPath} />
+        <Avatar
+          avatarPath={authorAvatarPath}
+          color={conversationColor}
+          conversationType="direct"
+          i18n={i18n}
+          name={authorName}
+          phoneNumber={authorPhoneNumber}
+          profileName={authorProfileName}
+          size={36}
+        />
       </div>
     );
   }

ts/components/conversation/MessageDetail.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import moment from 'moment';
 
+import { Avatar } from '../Avatar';
 import { ContactName } from './ContactName';
 import { Message, Props as MessageProps } from './Message';
 import { Localizer } from '../../types/Util';
@@ -31,40 +32,21 @@ interface Props {
   i18n: Localizer;
 }
 
-function getInitial(name: string): string {
-  return name.trim()[0] || '#';
-}
-
 export class MessageDetail extends React.Component<Props> {
   public renderAvatar(contact: Contact) {
     const { i18n } = this.props;
     const { avatarPath, color, phoneNumber, name, profileName } = contact;
 
-    if (!avatarPath) {
-      const initial = getInitial(name || '');
-
-      return (
-        <div
-          className={classNames(
-            'module-message-detail__contact__avatar',
-            'module-message-detail__contact__default-avatar',
-            `module-message-detail__contact__default-avatar--${color}`
-          )}
-        >
-          {initial}
-        </div>
-      );
-    }
-
-    const title = `${name || phoneNumber}${
-      !name && profileName ? ` ~${profileName}` : ''
-    }`;
-
     return (
-      <img
-        className="module-message-detail__contact__avatar"
-        alt={i18n('contactAvatarAlt', [title])}
-        src={avatarPath}
+      <Avatar
+        avatarPath={avatarPath}
+        color={color}
+        conversationType="direct"
+        i18n={i18n}
+        name={name}
+        phoneNumber={phoneNumber}
+        profileName={profileName}
+        size={48}
       />
     );
   }