restore border and header styles on the collaborator picker

fixes CNVS-4052

test plan
 - Go to the collaborations page for a course and check the
   collaborator picker interface for proper styling.

Change-Id: I9f78db713308540f83e1920a6ec6af6d699fc7b6
Reviewed-on: https://gerrit.instructure.com/18505
Tested-by: Jenkins <jenkins@instructure.com>
QA-Review: Marc LeGendre <marc@instructure.com>
Reviewed-by: Eric Berry <ericb@instructure.com>
Product-Review: Jon Willesen <jonw@instructure.com>

app/stylesheets/g_collaborations.scss

@@ -71,10 +71,6 @@ $highlight-blue: #00b5fe;
     padding: 0;
   }
 
-  .box-header {
-    min-height: 36px;
-  }
-
   .ui-state-active i {
     color: #00b5fe !important;
   }

app/stylesheets/utilities/_components.scss

@@ -1,5 +1,5 @@
 .toolbar {
-  @extend .ui-widget-header;
+  @include ui-widget-header-bg-and-text;
   padding: $contentBoxPadding / 2;
   font-size: $baseFontSize;
   line-height: $baseLineHeight;

app/views/jst/collaborations/CollaboratorPicker.handlebars

@@ -3,7 +3,7 @@
   {{#t "labels.collaborate_with"}}Collaborate With:{{/t}}
 
   <div class="box-with-header">
-    <header class="box-header">
+    <header class="toolbar border border-round-t border-trbl">
       <div class="filters">
         <input type="radio"
                aria-controls="available-users"
@@ -28,7 +28,7 @@
       </div>
     </header>
 
-    <div class="box-content">
+    <div class="box-content border border-round-b border-rbl">
       <div class="list-wrapper available-lists">
         <div class="list-view">
           <ul class="available-users" aria-label="{{#t "labels.available_users"}}Available users{{/t}}" tabindex="-1">