Merge pull request #265 from sharetribe/avatar-refactored

Avatar refactored - different sizes to the same place (component folder)

src/components/Avatar/Avatar.css

@@ -1,5 +1,11 @@
 @import '../../marketplace.css';
 
+:root {
+  --avatarSize: 100%;
+  --avatarSizeMedium: 61px;
+  --avatarSizeLarge: 120px;
+}
+
 .root {
   /* Font is specific to this component, but defining it in marketplace.css makes it easier
    * to change font if brand look-and-feel needs such changes.
@@ -7,8 +13,44 @@
   @apply --marketplaceSmallAvatarFontStyles;
 
   /* Layout */
-  width: 100%;
-  height: 100%;
+  width: var(--avatarSize);
+  height: var(--avatarSize);
+  border-radius: 50%;
+
+  /* Position possible initials to the center of the component */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Colors */
+  background-color: var(--matterColorAnti);
+  color: var(--matterColorLight);
+}
+
+.mediumAvatar {
+  @apply --marketplaceMediumAvatarFontStyles;
+
+  /* Fixed dimensions */
+  width: var(--avatarSizeMedium);
+  height: var(--avatarSizeMedium);
+  border-radius: 50%;
+
+  /* Position possible initials to the center of the component */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Colors */
+  background-color: var(--matterColorAnti);
+  color: var(--matterColorLight);
+}
+
+.largeAvatar {
+  @apply --marketplaceH1FontStyles;
+
+  /* Fixed dimensions */
+  width: var(--avatarSizeLarge);
+  height: var(--avatarSizeLarge);
   border-radius: 50%;
 
   /* Position possible initials to the center of the component */

src/components/Avatar/Avatar.js

@@ -35,3 +35,9 @@ Avatar.propTypes = {
 };
 
 export default Avatar;
+
+export const AvatarMedium = props => <Avatar rootClassName={css.mediumAvatar} {...props} />;
+AvatarMedium.displayName = 'AvatarMedium';
+
+export const AvatarLarge = props => <Avatar rootClassName={css.largeAvatar} {...props} />;
+AvatarLarge.displayName = 'AvatarLarge';

src/components/SaleDetailsPanel/SaleDetailsPanel.css

@@ -1,9 +1,5 @@
 @import '../../marketplace.css';
 
-:root {
-  --avatarSize: 61px;
-}
-
 .root {
   padding: 0 24px;
 }
@@ -31,16 +27,10 @@
 }
 
 .avatarWrapper {
-  width: var(--avatarSize);
+  width: auto;
   margin-top: 7px;
 }
 
-.avatar {
-  @apply --marketplaceMediumAvatarFontStyles;
-  width: var(--avatarSize);
-  height: var(--avatarSize);
-}
-
 .avatar span {
   margin-bottom: 5px;
 }

src/components/SaleDetailsPanel/SaleDetailsPanel.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 import { createSlug } from '../../util/urlHelpers';
 import { ensureListing, ensureTransaction, ensureBooking, ensureUser } from '../../util/data';
-import { Avatar, BookingBreakdown, NamedLink } from '../../components';
+import { AvatarMedium, BookingBreakdown, NamedLink } from '../../components';
 
 import css from './SaleDetailsPanel.css';
 
@@ -151,8 +151,7 @@ const SaleDetailsPanel = props => {
           {title}
         </h1>
         <div className={css.avatarWrapper}>
-          <Avatar
-            className={css.avatar}
+          <AvatarMedium
             firstName={customerFirstName}
             lastName={customerLastName}
           />

src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap

@@ -22,11 +22,9 @@ exports[`SaleDetailsPanel matches snapshot 1`] = `
         } />
     </h1>
     <div>
-      <Avatar
-        className={null}
+      <AvatarMedium
         firstName="customer1 first name"
-        lastName="customer1 last name"
-        rootClassName={null} />
+        lastName="customer1 last name" />
     </div>
   </div>
   <p>

src/components/TopbarMobileMenu/TopbarMobileMenu.css

@@ -27,24 +27,9 @@
 }
 
 .avatar {
-  /* Font */
-  @apply --marketplaceH1FontStyles;
-
   /* Layout */
   flex-shrink: 0;
   margin: var(--topMarginMobileMenu) 0 24px 0;
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-
-  /* Position possible initials to the center of the component */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  /* Colors */
-  background-color: var(--matterColorAnti);
-  color: var(--matterColorLight);
 }
 
 .greeting {

src/components/TopbarMobileMenu/TopbarMobileMenu.js

@@ -4,7 +4,7 @@
  */
 import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Avatar, InlineTextButton, NamedLink } from '../../components';
+import { AvatarLarge, InlineTextButton, NamedLink } from '../../components';
 
 import css from './TopbarMobileMenu.css';
 
@@ -60,7 +60,7 @@ const TopbarMobileMenu = props => {
 
   return (
     <div className={css.root}>
-      <Avatar rootClassName={css.avatar} firstName={firstName} lastName={lastName} />
+      <AvatarLarge className={css.avatar} firstName={firstName} lastName={lastName} />
       <div className={css.content}>
         <span className={css.greeting}>
           <FormattedMessage id="TopbarMobileMenu.greeting" values={{ firstName }} />

src/components/index.js

@@ -1,5 +1,5 @@
 import AddImages from './AddImages/AddImages';
-import Avatar from './Avatar/Avatar';
+import Avatar, { AvatarMedium, AvatarLarge } from './Avatar/Avatar';
 import BirthdayInputField from './BirthdayInputField/BirthdayInputField';
 import BookingBreakdown from './BookingBreakdown/BookingBreakdown';
 import Button, { PrimaryButton, SecondaryButton, InlineTextButton } from './Button/Button';
@@ -53,6 +53,8 @@ import ValidationError from './ValidationError/ValidationError';
 export {
   AddImages,
   Avatar,
+  AvatarMedium,
+  AvatarLarge,
   BirthdayInputField,
   BookingBreakdown,
   Button,