add first letter of display name to avatar

Author: Jaap

src/components/ChannelPreview/ChannelPreviewCompact.js

@@ -37,7 +37,11 @@ const ChannelPreviewCompact = (props) => {
       className={`str-chat__channel-preview-compact ${unreadClass} ${activeClass}`}
     >
       <div className="str-chat__channel-preview-compact--left">
-        <Avatar image={props.displayImage} size={20} />
+        <Avatar
+          image={props.displayImage}
+          name={props.displayTitle}
+          size={20}
+        />
       </div>
       <div className="str-chat__channel-preview-compact--right">
         {props.displayTitle}

src/components/ChannelPreview/ChannelPreviewLastMessage.js

@@ -36,7 +36,7 @@ const ChannelPreviewLastMessage = (props) => {
         {props.unread >= 1 && (
           <div className="str-chat__channel-preview--dot" />
         )}
-        <Avatar image={props.displayImage} />
+        <Avatar image={props.displayImage} name={props.displayTitle} />
         <div className="str-chat__channel-preview-info">
           <span className="str-chat__channel-preview-title">
             {props.displayTitle}

src/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -36,7 +36,13 @@ const ChannelPreviewMessenger = (props) => {
       data-testid="channel-preview-button"
     >
       <div className="str-chat__channel-preview-messenger--left">
-        {<Avatar image={props.displayImage} size={40} />}
+        {
+          <Avatar
+            image={props.displayImage}
+            name={props.displayTitle}
+            size={40}
+          />
+        }
       </div>
       <div className="str-chat__channel-preview-messenger--right">
         <div className="str-chat__channel-preview-messenger--name">