popovers: Add guest avatar marker to user info popover.

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';
 

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");

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 {

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>