replace meteor/jparker:gravatar with our ReactionAvatar react component

imports/plugins/core/accounts/client/components/groupsTableCell.js

@@ -5,17 +5,18 @@ import PropTypes from "prop-types";
 import moment from "moment";
 import { Components, registerComponent } from "@reactioncommerce/reaction-components";
 import { Reaction } from "/client/api";
-import { getGravatar } from "../helpers/accountsHelper";
+import { getUserAvatar } from "/imports/plugins/core/accounts/client/helpers/helpers";
 
 const GroupsTableCell = ({ account, columnName, group, adminGroups, handleRemoveUserFromGroup, handleUserGroupChange, ...props }) => {
   const email = _.get(account, "emails[0].address");
   const groups = adminGroups;
+  const userAvatar = getUserAvatar(account);
   if (columnName === "name") {
     // use first part of email, if account has no name
     const name = account.name || email.split("@")[0];
     return (
       <div className="table-cell body-first">
-        <img className="accounts-img-tag" src={getGravatar(account)} />
+        {userAvatar}
         <span><b>{name}</b></span>
       </div>
     );

imports/plugins/core/accounts/client/components/mainDropdown.js

@@ -32,11 +32,14 @@ class MainDropdown extends Component {
   }
 
   buttonElement() {
+    const { userImage, userName } = this.props;
     return (
       <Components.Button containerStyle={{ color: "#000", fontWeight: "normal", letterSpacing: 0.8 }}>
-        <img className="accounts-img-tag" src={this.props.userImage} />&nbsp;
-        <span>{this.props.userName}</span>&nbsp;
-        <i className="fa fa-caret-down" />
+        <span>{userImage}</span>
+        <span>{userName}</span>&nbsp;
+        <Components.Icon
+          icon={"fa fa-caret-down"}
+        />
       </Components.Button>
     );
   }

imports/plugins/core/accounts/client/containers/mainDropdown.js

@@ -4,33 +4,11 @@ import { Meteor } from "meteor/meteor";
 import { Accounts } from "meteor/accounts-base";
 import { Roles } from "meteor/alanning:roles";
 import { Session } from "meteor/session";
-import { Gravatar } from "meteor/jparker:gravatar";
 import { Reaction, Logger } from "/client/api";
 import { i18nextDep, i18next } from  "/client/api";
-import * as Collections from "/lib/collections";
 import { Tags } from "/lib/collections";
 import MainDropdown from "../components/mainDropdown";
-
-function getUserGravatar(currentUser, size) {
-  const options = {
-    secure: true,
-    size: size,
-    default: "identicon"
-  };
-  const user = currentUser || Accounts.user();
-  if (!user) {
-    return false;
-  }
-  const account = Collections.Accounts.findOne(user._id);
-  // first we check picture exists. Picture has higher priority to display
-  if (account && account.profile && account.profile.picture) {
-    return account.profile.picture;
-  }
-  if (user.emails && user.emails.length === 1) {
-    const email = user.emails[0].address;
-    return Gravatar.imageUrl(email, options);
-  }
-}
+import { getUserAvatar } from "/imports/plugins/core/accounts/client/helpers/helpers";
 
 function displayName(displayUser) {
   i18nextDep.depend();
@@ -106,7 +84,7 @@ function handleChange(event, value) {
 }
 
 const composer = ({ currentAccount }, onData) => {
-  const userImage = getUserGravatar(currentAccount, 40);
+  const userImage = getUserAvatar(currentAccount);
   const userName = displayName(currentAccount);
   const adminShortcuts = getAdminShortcutIcons();
 

imports/plugins/core/accounts/client/helpers/accountsHelper.js

@@ -1,4 +1,3 @@
-/* global Gravatar */
 import { Meteor } from "meteor/meteor";
 import _ from "lodash";
 import { Reaction } from "/client/api";
@@ -67,23 +66,6 @@ export function getDefaultUserInviteGroup(groups) {
   return result;
 }
 
-export function getGravatar(user) {
-  const options = {
-    secure: true,
-    size: 30,
-    default: "identicon"
-  };
-  if (!user) { return false; }
-  const account = Collections.Accounts.findOne(user._id);
-  if (account && account.profile && account.profile.picture) {
-    return account.profile.picture;
-  }
-  if (user.emails && user.emails.length > 0) {
-    const email = user.emails[0].address;
-    return Gravatar.imageUrl(email, options);
-  }
-}
-
 export function groupPermissions(packages) {
   return packages.map((pkg) => {
     const permissions = [];

imports/plugins/core/accounts/client/helpers/helpers.js

@@ -1,6 +1,8 @@
+import React from "react";
 import { Template } from "meteor/templating";
-import { Gravatar } from "meteor/jparker:gravatar";
+import { Accounts } from "meteor/accounts-base";
 import * as Collections from "/lib/collections";
+import { Components } from "@reactioncommerce/reaction-components";
 
 export const LoginFormSharedHelpers = {
   messages: function () {
@@ -21,19 +23,38 @@ export const LoginFormSharedHelpers = {
 
 };
 
-export function getGravatar(user) {
-  const options = {
-    secure: true,
-    size: 30,
-    default: "identicon"
-  };
-  if (!user) { return false; }
+export function getUserAvatar(currentUser) {
+  const user = currentUser || Accounts.user();
+
   const account = Collections.Accounts.findOne(user._id);
+  // first we check picture exists. Picture has higher priority to display
   if (account && account.profile && account.profile.picture) {
-    return account.profile.picture;
+    const picture = account.profile.picture;
+
+    return (
+      <Components.ReactionAvatar
+        className={"accounts-avatar"}
+        size={30}
+        src={picture}
+      />
+    );
   }
-  if (user.emails && user.emails.length > 0) {
+  if (user.emails && user.emails.length === 1) {
     const email = user.emails[0].address;
-    return Gravatar.imageUrl(email, options);
+
+    return (
+      <Components.ReactionAvatar
+        className={"accounts-avatar"}
+        email={email}
+        size={30}
+      />
+    );
   }
+
+  return (
+    <Components.ReactionAvatar
+      className={"accounts-avatar"}
+      size={30}
+    />
+  );
 }

imports/plugins/core/accounts/client/helpers/templates.js

@@ -1,29 +1,9 @@
 import { Meteor } from "meteor/meteor";
 import { Template } from "meteor/templating";
-import { Accounts } from "meteor/accounts-base";
 import { Roles } from "meteor/alanning:roles";
-import { Gravatar } from "meteor/jparker:gravatar";
 import { Reaction, i18next, i18nextDep } from "/client/api";
 import * as Collections from "/lib/collections";
 
-Template.registerHelper("getGravatar", function (currentUser, size) {
-  const options = {
-    secure: true,
-    size: size,
-    default: "identicon"
-  };
-  const user = currentUser || Accounts.user();
-  if (!user) return false;
-  const account = Collections.Accounts.findOne(user._id);
-  // first we check picture exists. Picture has higher priority to display
-  if (account && account.profile && account.profile.picture) {
-    return account.profile.picture;
-  }
-  if (user.emails && user.emails.length === 1) {
-    const email = user.emails[0].address;
-    return Gravatar.imageUrl(email, options);
-  }
-});
 
 /**
  * registerHelper displayName

imports/plugins/core/accounts/client/templates/dropdown/helpers/templates.js

@@ -2,28 +2,7 @@ import { Meteor } from "meteor/meteor";
 import { Template } from "meteor/templating";
 import { Accounts } from "meteor/accounts-base";
 import { Roles } from "meteor/alanning:roles";
-import { Gravatar } from "meteor/jparker:gravatar";
 import { Reaction, i18next, i18nextDep } from "/client/api";
-import * as Collections from "/lib/collections";
-
-Template.registerHelper("getGravatar", function (currentUser, size) {
-  const options = {
-    secure: true,
-    size: size,
-    default: "identicon"
-  };
-  const user = currentUser || Accounts.user();
-  if (!user) return false;
-  const account = Collections.Accounts.findOne(user._id);
-  // first we check picture exists. Picture has higher priority to display
-  if (account && account.profile && account.profile.picture) {
-    return account.profile.picture;
-  }
-  if (user.emails && user.emails.length === 1) {
-    const email = user.emails[0].address;
-    return Gravatar.imageUrl(email, options);
-  }
-});
 
 /**
  * registerHelper displayName

imports/plugins/core/accounts/client/templates/members/member.html

@@ -1,7 +1,6 @@
 <template name="member">
   {{!-- TODO: make this a Reactive Table --}}
       <div class="member-list-item-image">
-        <!-- <img class="circular-icon" src="{{getGravatar this 40}}" style="width: 40px;border-radius: 50%;"/> -->
         <div>
           {{> React ReactionAvatar }}
         </div>

imports/plugins/included/default-theme/client/styles/navbar.less

@@ -334,3 +334,9 @@ html:not(.rtl) .rui.navbar .languages .dropdown-menu {
   border-radius: 50%;
   display: inline-block;
 }
+
+.accounts-avatar {
+  .margin-right(10px);
+  border: solid rgba(129, 122, 122, 0.62) 2px;
+  box-sizing: content-box !important;
+}