Move component-specific styles into their own files

Move styles for the <group-list> and <signin-control>
components out of app.scss and into the appropriate
SCSS files.

h/static/styles/app.scss

@@ -13,6 +13,7 @@ $base-line-height: 20px;
 @import './excerpt';
 @import './primary-action-btn';
 @import './dropdown-menu-btn';
+@import './group-list';
 @import './publish-annotation-btn';
 @import './search-status-bar';
 @import './share-link';
@@ -94,7 +95,6 @@ body {
   }
 }
 
-
 .user {
   font-weight: bold;
   font-size: 1.1em;
@@ -104,130 +104,3 @@ body {
     text-decoration: underline;
   }
 }
-
-
-/* The groups dropdown list. */
-
-$group-list-width: 270px;
-$group-list-spacing-below: 50px;
-
-.group-list {
-  .dropdown {
-    white-space: nowrap;
-  }
-
-  .dropdown-menu {
-    width: $group-list-width;
-    max-height: 500px;  // fallback for browsers lacking support for vh/calc
-    max-height: calc(100vh - #{$top-bar-height} - #{$group-list-spacing-below});
-    overflow-y: auto;
-
-    .group-name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: $group-list-width - 30px;
-    }
-  }
-
-  .group-item {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-
-    padding: 10px;
-    cursor: pointer;
-
-    &:hover {
-      .group-name-link {
-        color: $brand-color;
-      }
-    }
-
-    &.selected {
-      .group-name-link {
-        font-size: $body2-font-size;
-        font-weight: 600;
-      }
-    }
-  }
-
-  .group-icon-container {
-    margin-right: 10px;
-  }
-
-  .group-cancel-icon-container {
-    // the 'Leave group' icon is shifted down slightly
-    // so that it lines up vertically with the 'chat heads' icon on the
-    // left-hand side of the groups list
-    padding-top: 3px;
-    margin-right: 2px;
-  }
-
-  .group-details {
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-
-  .new-group-btn {
-    background-color: $gray-lightest;
-
-    .group-item {
-      padding-top: 12px;
-      padding-bottom: 12px;
-    }
-
-    .h-icon-add {
-      font-weight: bold;
-    }
-  }
-}
-
-// 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-size: $body2-font-size;
-  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 {
-  white-space: nowrap;
-  color: inherit;
-}
-
-/* The user account dropdown menu */
-.user-picker {
-  .avatar {
-    border-radius: 2px;
-  }
-
-  .dropdown-toggle {
-    .provider {
-      color: $gray-light;
-      display: none;
-    }
-    &:hover {
-      .provider {
-        display: inline;
-      }
-    }
-  }
-
-  .dropdown.open .provider {
-    display: inline;
-  }
-}

h/static/styles/group-list.scss

+/* The groups dropdown list. */
+
+$group-list-width: 270px;
+$group-list-spacing-below: 50px;
+
+.group-list {
+  .dropdown {
+    white-space: nowrap;
+  }
+
+  .dropdown-menu {
+    width: $group-list-width;
+    max-height: 500px;  // fallback for browsers lacking support for vh/calc
+    max-height: calc(100vh - #{$top-bar-height} - #{$group-list-spacing-below});
+    overflow-y: auto;
+
+    .group-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: $group-list-width - 30px;
+    }
+  }
+
+  .group-item {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+
+    padding: 10px;
+    cursor: pointer;
+
+    &:hover {
+      .group-name-link {
+        color: $brand-color;
+      }
+    }
+
+    &.selected {
+      .group-name-link {
+        font-size: $body2-font-size;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .group-icon-container {
+    margin-right: 10px;
+  }
+
+  .group-cancel-icon-container {
+    // the 'Leave group' icon is shifted down slightly
+    // so that it lines up vertically with the 'chat heads' icon on the
+    // left-hand side of the groups list
+    padding-top: 3px;
+    margin-right: 2px;
+  }
+
+  .group-details {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .new-group-btn {
+    background-color: $gray-lightest;
+
+    .group-item {
+      padding-top: 12px;
+      padding-bottom: 12px;
+    }
+
+    .h-icon-add {
+      font-weight: bold;
+    }
+  }
+}
+
+// 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-size: $body2-font-size;
+  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 {
+  white-space: nowrap;
+  color: inherit;
+}

h/static/styles/signin-control.scss

@@ -2,3 +2,26 @@
   font-size: $body2-font-size;
   padding-left: 6px;
 }
+
+/* The user account dropdown menu */
+.user-picker {
+  .avatar {
+    border-radius: 2px;
+  }
+
+  .dropdown-toggle {
+    .provider {
+      color: $gray-light;
+      display: none;
+    }
+    &:hover {
+      .provider {
+        display: inline;
+      }
+    }
+  }
+
+  .dropdown.open .provider {
+    display: inline;
+  }
+}