From 4d979097647a20da118fc91852988043f2a0dad9 Mon Sep 17 00:00:00 2001
From: Cynthia Lin <cynthialin1004@gmail.com>
Date: Sun, 16 Dec 2018 17:25:00 -0800
Subject: [PATCH] popovers: Add guest avatar marker to user info popover.

---
 frontend_tests/node_tests/popovers.js               | 2 ++
 static/js/popovers.js                               | 3 ++-
 static/styles/popovers.scss                         | 4 ++++
 static/templates/user_info_popover_title.handlebars | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend_tests/node_tests/popovers.js b/frontend_tests/node_tests/popovers.js
index 355108016f..fa72264733 100644
--- a/frontend_tests/node_tests/popovers.js
+++ b/frontend_tests/node_tests/popovers.js
@@ -44,6 +44,7 @@ var alice = {
     email: 'alice@example.com',
     full_name: 'Alice Smith',
     user_id: 42,
+    is_guest: false,
 };
 
 var me = {
@@ -136,6 +137,7 @@ run_test('sender_hover', () => {
         case 'user_info_popover_title':
             assert.deepEqual(opts, {
                 user_avatar: 'avatar/alice@example.com',
+                user_is_guest: false,
             });
             return 'title-html';
 
diff --git a/static/js/popovers.js b/static/js/popovers.js
index 0064bb370e..e11fa9d406 100644
--- a/static/js/popovers.js
+++ b/static/js/popovers.js
@@ -141,7 +141,8 @@ function render_user_info_popover(user, popover_element, is_sender_popover, priv
         placement: popover_placement,
         template: templates.render('user_info_popover', {class: template_class}),
         title: templates.render('user_info_popover_title',
-                                {user_avatar: "avatar/" + user.email}),
+                                {user_avatar: "avatar/" + user.email,
+                                 user_is_guest: user.is_guest}),
         trigger: "manual",
     });
     popover_element.popover("show");
diff --git a/static/styles/popovers.scss b/static/styles/popovers.scss
index ad165bc968..c9dd446b92 100644
--- a/static/styles/popovers.scss
+++ b/static/styles/popovers.scss
@@ -150,6 +150,10 @@ ul.remind_me_popover .remind_icon {
     background-size: cover;
     background-position: center;
     position: relative;
+
+    &.guest-avatar::after {
+        outline: 10px solid hsl(0, 0%, 100%);
+    }
 }
 
 #user-profile-modal {
diff --git a/static/templates/user_info_popover_title.handlebars b/static/templates/user_info_popover_title.handlebars
index 9d73adfdd9..21ecc92b3f 100644
--- a/static/templates/user_info_popover_title.handlebars
+++ b/static/templates/user_info_popover_title.handlebars
@@ -1,2 +1,2 @@
-<div class="popover-avatar" style="background-image: url('{{user_avatar}}');" >
+<div class="popover-avatar{{#if user_is_guest}} guest-avatar{{/if}}" style="background-image: url('{{user_avatar}}');" >
 </div>