From b45b63f48010859b3c64bd59fea44a5bfa072c7c Mon Sep 17 00:00:00 2001
From: SachaG <info@sachagreif.com>
Date: Wed, 7 Jun 2017 18:08:22 -0700
Subject: [PATCH] remove avatar inline styles, define styles in
 base-styles/main.scss instead

---
 .../lib/users/UsersAvatar.jsx                 | 36 +++++++------------
 .../lib/stylesheets/_comments.scss            |  2 +-
 .../lib/stylesheets/_posts.scss               |  4 +--
 .../lib/stylesheets/_users.scss               |  6 ++++
 .../lib/stylesheets/main.scss                 | 12 +++++--
 5 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/packages/vulcan-base-components/lib/users/UsersAvatar.jsx b/packages/vulcan-base-components/lib/users/UsersAvatar.jsx
index 4ba885e0e..a5e9a48fa 100644
--- a/packages/vulcan-base-components/lib/users/UsersAvatar.jsx
+++ b/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>
+  );
 
 }
 
diff --git a/packages/vulcan-base-styles/lib/stylesheets/_comments.scss b/packages/vulcan-base-styles/lib/stylesheets/_comments.scss
index 517c66e93..a0453a06c 100644
--- a/packages/vulcan-base-styles/lib/stylesheets/_comments.scss
+++ b/packages/vulcan-base-styles/lib/stylesheets/_comments.scss
@@ -36,7 +36,7 @@
     margin-right: 10px;
   }
 
-  .users-avatar{
+  .avatar{
     margin-right: 5px;
   }
   .users-name{
diff --git a/packages/vulcan-base-styles/lib/stylesheets/_posts.scss b/packages/vulcan-base-styles/lib/stylesheets/_posts.scss
index 24886e7a2..b4d96035a 100644
--- a/packages/vulcan-base-styles/lib/stylesheets/_posts.scss
+++ b/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;
   }
 }
diff --git a/packages/vulcan-base-styles/lib/stylesheets/_users.scss b/packages/vulcan-base-styles/lib/stylesheets/_users.scss
index 44b33184c..0bde5aa4b 100644
--- a/packages/vulcan-base-styles/lib/stylesheets/_users.scss
+++ b/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;
diff --git a/packages/vulcan-base-styles/lib/stylesheets/main.scss b/packages/vulcan-base-styles/lib/stylesheets/main.scss
index 6c9ce6710..e517c0369 100644
--- a/packages/vulcan-base-styles/lib/stylesheets/main.scss
+++ b/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{