buddy list: Use user-list-arrow class.

Using a more specific class avoids confusion related
to the .arrow class, which is not only a popover concept,
but also a Zulip concept in the left sidebar.

static/js/popovers.js

@@ -792,7 +792,7 @@ exports.register_click_handlers = function () {
         e.preventDefault();
     });
 
-    $('#user_presences').on('click', 'span.arrow', function (e) {
+    $('#user_presences').on('click', '.user-list-arrow', function (e) {
         e.stopPropagation();
 
         // use email of currently selected user, rather than some elem comparison,

static/styles/left-sidebar.scss

@@ -273,17 +273,6 @@ a.conversation-partners:hover {
                 ignores top, font-size, display
                 display would be none either way
 
-        buddy list
-            span:
-                #user_presences .arrow (ok, top=0)
-
-                ul.filters .arrow
-                    keeps all but top
-
-            i:
-                ul.filters i
-                ignores ul.filters arrow
-
 */
 
 ul.filters i {

static/styles/night_mode.scss

@@ -255,6 +255,7 @@ on a dark background, and don't change the dark labels dark either. */
     #searchbox a.search_icon,
     #searchbox .search_button,
     .close,
+    #user_presences li:hover .user-list-arrow,
     ul.filters li:hover .arrow {
         color: hsl(236, 33%, 80%);
     }
@@ -266,6 +267,7 @@ on a dark background, and don't change the dark labels dark either. */
     #searchbox a.search_icon:hover,
     #searchbox .search_button:hover,
     .close:hover,
+    #user_presences li .user-list-arrow:hover,
     ul.filters li .arrow:hover {
         color: hsl(0, 0%, 100%);
     }

static/styles/right-sidebar.scss

@@ -49,10 +49,27 @@
     padding-right: 15px;
 }
 
-#user_presences .arrow {
+#user_presences .user-list-arrow {
+    position: absolute;
     top: 0px;
+    right: 10px;
+    font-size: 0.8em;
+    display: none;
 }
 
+#user_presences li:hover .user-list-arrow {
+    display: inline;
+    cursor: pointer;
+    color: hsl(0, 0%, 53%);
+}
+
+#user_presences li .user-list-arrow:hover {
+    display: inline;
+    cursor: pointer;
+    color: hsl(0, 0%, 0%);
+}
+
+
 #group-pm-title {
     margin: 10px 0px 0px 0px;
     display: inline-block;

static/templates/user_presence_row.handlebars

@@ -13,5 +13,5 @@
         </a>
         <span class="count"><span class="value">{{#if num_unread}}{{num_unread}}{{/if}}</span></span>
     </div>
-    <span class="arrow"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
+    <span class="user-list-arrow"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
 </li>