Improve the alignment and spacing of the group list dropdown

 * Adjust the styling of the icon so that the bottom of
   the 'chat heads' icon for groups is aligned vertically
   with the baseline of the group name label

 * Remove extra space between group name label and dropdown
   indicator arrow

T-90

h/static/styles/app.scss

@@ -158,6 +158,25 @@ $group-list-width: 270px;
   }
 }
 
+// the icon indicating the type of group currently selected at
+// the top of the groups list
+.group-list-label__icon {
+  color: $color-gray;
+  display: inline-block;
+  margin-right: 4px;
+  vertical-align: baseline;
+
+  // align the base of the chat-heads icon for groups
+  // with the baseline of the group name label
+  transform: translateY(1px);
+}
+
+// the label showing the currently selected group which opens
+// the drop-down list when clicked
+.group-list-label__label {
+  font-weight:bold;
+}
+
 // the name of a group in the groups drop-down list
 // and 'Post to <Group>' button for saving annotations
 .group-name-link {

h/templates/client/group_list.html

@@ -5,10 +5,10 @@
         role="button"
         ng-switch on="groups.focused().public"
         ng-click="toggleShareLink(undefined)">
-    <i class="h-icon-public" ng-switch-when="true"></i>
-    <i class="h-icon-group" ng-switch-default></i>
-    {{groups.focused().name}}
-    <i class="h-icon-arrow-drop-down"></i>
+    <i class="group-list-label__icon h-icon-public" ng-switch-when="true"></i><!-- nospace
+    !--><i class="group-list-label__icon h-icon-group" ng-switch-default></i>
+    <span class="group-list-label__label">{{groups.focused().name}}</span><!-- nospace
+    !--><i class="h-icon-arrow-drop-down"></i>
   </span>
   <div class="dropdown-menu__top-arrow"></div>
   <ul class="dropdown-menu pull-none" role="menu">