Skip to content

Commit

Permalink
Using CroppedImage for centering
Browse files Browse the repository at this point in the history
  • Loading branch information
compulim committed Dec 14, 2018
1 parent 408835d commit 6966d29
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 9 deletions.
15 changes: 10 additions & 5 deletions packages/component/src/Activity/Avatar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
({
Expand Down Expand Up @@ -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(
Expand Down
5 changes: 1 addition & 4 deletions packages/component/src/Styles/StyleSet/Avatar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
};
}

0 comments on commit 6966d29

Please sign in to comment.