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

And two initials.

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>
     );
   }