From f8e0a0da6b8d550a4f72a932fd5184cb11eaa73b Mon Sep 17 00:00:00 2001
From: William Wong <compulim@hotmail.com>
Date: Thu, 13 Dec 2018 17:38:02 -0800
Subject: [PATCH] Using CroppedImage for centering

---
 packages/component/src/Activity/Avatar.js        | 15 ++++++++++-----
 packages/component/src/Styles/StyleSet/Avatar.js |  5 +----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/component/src/Activity/Avatar.js b/packages/component/src/Activity/Avatar.js
index 2b4ee7d093..963789a98c 100644
--- a/packages/component/src/Activity/Avatar.js
+++ b/packages/component/src/Activity/Avatar.js
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 
 import connectToWebChat from '../connectToWebChat';
+import CroppedImage from '../Utils/CroppedImage';
 
 const connectAvatar = (...selectors) => connectToWebChat(
   ({
@@ -39,11 +40,15 @@ const Avatar = ({
       ) }
     >
       { avatarInitials }
-      <div
-        aria-hidden={ true }
-        className="image"
-        style={{ backgroundImage: `url(${ encodeURI(backgroundImage) })` }}
-      />
+      { !!avatarImage &&
+        <CroppedImage
+          alt=""
+          className="image"
+          height="100%"
+          src={ avatarImage }
+          width="100%"
+        />
+      }
     </div>
 
 export default connectAvatar(
diff --git a/packages/component/src/Styles/StyleSet/Avatar.js b/packages/component/src/Styles/StyleSet/Avatar.js
index 1a6094bbb7..7266891e08 100644
--- a/packages/component/src/Styles/StyleSet/Avatar.js
+++ b/packages/component/src/Styles/StyleSet/Avatar.js
@@ -21,12 +21,9 @@ export default function createAvatarStyle({
     width: avatarSize,
 
     '& > .image': {
-      backgroundSize: 'cover',
-      height: '100%',
       left: 0,
       position: 'absolute',
-      top: 0,
-      width: '100%'
+      top: 0
     }
   };
 }