remove avatar inline styles, define styles in base-styles/main.scss instead

packages/vulcan-base-components/lib/users/UsersAvatar.jsx

@@ -3,37 +3,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Users from 'meteor/vulcan:users';
 import { Link } from 'react-router';
+import classNames from 'classnames';
 
-const UsersAvatar = ({user, size, link}) => {
-
-  const sizes = {
-    small: "20px",
-    medium: "30px",
-    large: "50px"
-  }
-
-  const aStyle = {
-    borderRadius: "100%",
-    display: "inline-block",
-    height: sizes[size],
-    width: sizes[size]
-  };
-
-  const imgStyle = {
-    borderRadius: "100%",
-    display: "block",
-    height: sizes[size],
-    width: sizes[size]
-  };
+const UsersAvatar = ({className, user, link}) => {
 
   const avatarUrl = user.avatarUrl || Users.avatar.getUrl(user);
 
-  const img = <img alt={Users.getDisplayName(user)} style={imgStyle} className="avatar" src={avatarUrl} title={user.username}/>;
+  const img = <img alt={Users.getDisplayName(user)} className="avatar-image" src={avatarUrl} title={user.username}/>;
   const initials = <span className="avatar-initials"><span>{Users.avatar.getInitials(user)}</span></span>;
 
   const avatar = avatarUrl ? img : initials;
 
-  return link ? <Link style={aStyle} className="users-avatar" to={Users.getProfileUrl(user)}>{avatar}</Link> : avatar;
+  return (
+    <div className={classNames('avatar', className)}>
+      {link ? 
+        <Link to={Users.getProfileUrl(user)}>
+          <span>{avatar}</span>
+        </Link> 
+        : <span>{avatar}</span>
+      }
+    </div>
+  );
 
 }
 

packages/vulcan-base-styles/lib/stylesheets/_comments.scss

@@ -36,7 +36,7 @@
     margin-right: 10px;
   }
 
-  .users-avatar{
+  .avatar{
     margin-right: 5px;
   }
   .users-name{

packages/vulcan-base-styles/lib/stylesheets/_posts.scss

@@ -182,7 +182,7 @@
     @include flex-center;
   }
   font-size: $small-font;
-  .users-avatar{
+  .avatar{
     margin-right: 5px;
   }
   .users-name, .posts-item-date, .posts-item-comments, .posts-stats, .post-actions{
@@ -235,7 +235,7 @@
 
 .posts-commenters-avatars{
   display: flex;
-  .users-avatar{
+  .avatar{
     margin-right: $hmargin;
   }
 }

packages/vulcan-base-styles/lib/stylesheets/_users.scss

@@ -4,6 +4,12 @@
   }
 }
 
+.users-menu{
+  .avatar{
+    margin-right: 5px;
+  }
+}
+
 .avatar-initials{
   background: $light-grey;
   color: $dark-grey;

packages/vulcan-base-styles/lib/stylesheets/main.scss

@@ -29,9 +29,15 @@ code{
 }
 
 .avatar{
-  height: 24px;
-  width: 24px;
-  display: inline-block;
+  height: 20px;
+  width: 20px;
+  display: block;
+  a, span, img{
+    display: block;
+    border-radius: 100%;
+    height: 100%;
+    widows: 100%;
+  }
 }
 
 .sr-only{