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

And two initials.

ts/components/ContactListItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
+import { Avatar } from './Avatar';
 import { Emojify } from './conversation/Emojify';
 
 import { Localizer } from '../types/Util';
@@ -17,35 +18,28 @@ interface Props {
   onClick?: () => void;
 }
 
-function getInitial(name: string): string {
-  return name.trim()[0] || '#';
-}
-
 export class ContactListItem extends React.Component<Props> {
-  public renderAvatar({ displayName }: { displayName: string }) {
-    const { avatarPath, i18n, color, name } = this.props;
-
-    if (avatarPath) {
-      return (
-        <div className="module-contact-list-item__avatar">
-          <img alt={i18n('contactAvatarAlt', [displayName])} src={avatarPath} />
-        </div>
-      );
-    }
-
-    const title = name ? getInitial(name) : '#';
+  public renderAvatar() {
+    const {
+      avatarPath,
+      i18n,
+      color,
+      name,
+      phoneNumber,
+      profileName,
+    } = this.props;
 
     return (
-      <div
-        className={classNames(
-          'module-contact-list-item__avatar-default',
-          `module-contact-list-item__avatar-default--${color}`
-        )}
-      >
-        <div className="module-contact-list-item__avatar-default__label">
-          {title}
-        </div>
-      </div>
+      <Avatar
+        avatarPath={avatarPath}
+        color={color}
+        conversationType="direct"
+        i18n={i18n}
+        name={name}
+        phoneNumber={phoneNumber}
+        profileName={profileName}
+        size={48}
+      />
     );
   }
 
@@ -82,7 +76,7 @@ export class ContactListItem extends React.Component<Props> {
           onClick ? 'module-contact-list-item--with-click-handler' : null
         )}
       >
-        {this.renderAvatar({ displayName })}
+        {this.renderAvatar()}
         <div className="module-contact-list-item__text">
           <div className="module-contact-list-item__text__name">
             <Emojify text={displayName} i18n={i18n} /> {profileElement}