Use Avatar component

src/components/AuthorInfo/AuthorInfo.js

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
+import { Avatar } from '../../components';
 import * as propTypes from '../../util/propTypes';
 import css from './AuthorInfo.css';
 
@@ -12,12 +13,11 @@ const AuthorInfo = props => {
   const authorName = currentAuthor.attributes.profile
     ? `${currentAuthor.attributes.profile.firstName} ${currentAuthor.attributes.profile.lastName}`
     : '';
-  const authorAvatar = 'https://placehold.it/44x44';
 
   return (
     <div className={classes}>
       <div className={css.avatarWrapper}>
-        <img className={css.avatar} src={authorAvatar} alt={authorName} />
+        <Avatar name={authorName} />
       </div>
       <div className={css.authorDetails}>
         <span className={css.authorName}>

src/components/Avatar/Avatar.css

@@ -1,3 +1,5 @@
 .avatar {
   border-radius: 50%;
+  width: 100%;
+  height: 100%;
 }

src/components/Avatar/Avatar.js

@@ -1,16 +1,14 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
+import avatarPlaceholder from './images/wireframeAvatar.svg';
 import css from './Avatar.css';
 
 const Avatar = props => {
   const { className, name } = props;
-
-  // TODO hard coded placeholder image need to be changed to something else
-  const avatarImageURL = 'http://placehold.it/44x44';
   const classes = classNames(css.avatar, className);
 
-  return <img className={classes} src={avatarImageURL} alt={name} />;
+  return <img className={classes} src={avatarPlaceholder} alt={name} />;
 };
 
 const { string } = PropTypes;

src/components/Avatar/images/wireframeAvatar.svg

@@ -0,0 +1 @@
+<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="24" cy="24" r="24"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#D8D8D8" xlink:href="#a"/><path d="M23.08 28.852C15.77 29.362 10 35.46 10 42.909 10 50.69 16.3 57 24.073 57c7.772 0 14.072-6.309 14.072-14.091 0-7.449-5.77-13.547-13.08-14.057a8.452 8.452 0 0 0 7.451-8.397c0-4.67-3.78-8.455-8.443-8.455-4.664 0-8.444 3.785-8.444 8.455a8.452 8.452 0 0 0 7.45 8.397z" fill="gray" mask="url(#b)"/></g></svg>

src/components/OrderDetailsPanel/OrderDetailsPanel.css

@@ -15,8 +15,8 @@
 
 .avatarWrapper {
   display: block;
-  flex-basis: 44px;
-  width: 44px;
-  height: 44px;
+  flex-basis: 48px;
+  width: 48px;
+  height: 48px;
   margin-right: 1rem;
 }

src/components/SaleDetailsPanel/SaleDetailsPanel.css

@@ -21,7 +21,7 @@
 
 .avatarWrapper {
   display: block;
-  flex-basis: 44px;
-  width: 44px;
-  height: 44px;
+  flex-basis: 48px;
+  width: 48px;
+  height: 48px;
 }

src/containers/InboxPage/InboxPage.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { PageLayout, NamedRedirect, NamedLink, PaginationLinks } from '../../components';
+import { Avatar, NamedLink, NamedRedirect, PageLayout, PaginationLinks } from '../../components';
 import * as propTypes from '../../util/propTypes';
 import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 import { loadData } from './InboxPage.duck';
@@ -53,7 +53,6 @@ export const InboxItem = props => {
   const { customer, provider } = tx;
   const isOrder = type === 'order';
   const otherUserName = username(isOrder ? provider : customer);
-  const otherUserAvatar = 'https://placehold.it/44x44';
   const changedDate = timestamp(intl, tx);
   return (
     <NamedLink
@@ -62,7 +61,7 @@ export const InboxItem = props => {
       params={{ id: tx.id.uuid }}
     >
       <div className={css.itemAvatar}>
-        <img className={css.itemAvatarImage} src={otherUserAvatar} alt={otherUserName} />
+        <Avatar name={otherUserName} />
       </div>
       <div className={css.itemInfo}>
         <div>

src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap

@@ -150,8 +150,8 @@ exports[`InboxPage matches snapshot 2`] = `
     className={undefined}>
     <img
       alt="provider-user-id first name provider-user-id last name"
-      className={undefined}
-      src="https://placehold.it/44x44" />
+      className=""
+      src="wireframeAvatar.svg" />
   </div>
   <div
     className={undefined}>
@@ -326,8 +326,8 @@ exports[`InboxPage matches snapshot 4`] = `
     className={undefined}>
     <img
       alt="customer-user-id first name customer-user-id last name"
-      className={undefined}
-      src="https://placehold.it/44x44" />
+      className=""
+      src="wireframeAvatar.svg" />
   </div>
   <div
     className={undefined}>

src/translations/en.json

@@ -55,6 +55,7 @@
   "InboxPage.statePending": "Pending",
   "InboxPage.stateRejected": "Rejected",
   "InboxPage.title": "Inbox",
+  "ListingCard.hostedBy": "Hosted by {authorName}.",
   "ListingPage.ctaButtonMessage": "Book {title}",
   "ListingPage.loadingListingData": "Loading listing data",
   "ListingPage.noListingData": "Could not find listing data",