Avatars in Recommendations component

2 files changed, 9 insertions, 2 deletions

diff --git a/vnext/src/components/Avatar.css b/vnext/src/components/Avatar.css
index 133e6061..7bdb3115 100644
--- a/vnext/src/components/Avatar.css
+++ b/vnext/src/components/Avatar.css
@@ -13,6 +13,13 @@
     max-width: 48px;
 }
 
+.info-avatar img {
+    max-height: 24px;
+    max-width: 24px;
+    padding: 6px;
+    vertical-align: middle;
+}
+
 @media screen and (min-width: 450px) {
     .Avatar {
         width: 300px;
diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js
index 0a601834..45adcc4e 100644
--- a/vnext/src/components/UserInfo.js
+++ b/vnext/src/components/UserInfo.js
@@ -83,8 +83,8 @@ export function UserLink(props) {
     }, [props.user]);
     return (
         user.uid ?
-            <Link key={user.uid} to={`/${user.uname}/`}>{user.uname}</Link>
-            : <a href={user.uri}>{user.uname}</a>
+            <Link key={user.uid} to={`/${user.uname}/`} className="info-avatar"><img src={user.avatar}/>{user.uname}</Link>
+            : <a href={user.uri}><img src={user.avatar}/>{user.uname}</a>
     )
 }