first pass at adding cohort groups to group configuration page

cms/static/sass/views/_group-configuration.scss

@@ -20,20 +20,21 @@
     }
 
     .no-group-configurations-content {
-      @extend %ui-well;
-      padding: ($baseline*2);
-      background-color: $gray-l4;
-      text-align: center;
-      color: $gray;
+      @extend %no-content;
     }
 
-    .new-button {
-      @extend %t-action3;
-      margin-left: $baseline;
+    .wrapper-groups {
+      margin-bottom: ($baseline*1.5);
+
+      .title {
+        @extend %t-title5;
+        @extend %t-strong;
+      }
 
-      .icon {
-        margin-right: ($baseline/2);
+      .copy {
+        @extend %t-copy-sub1;
       }
+
     }
 
     .group-configuration {
@@ -172,8 +173,7 @@
               margin-right: ($baseline/4);
 
               .edit {
-                @include blue-button;
-                @extend %t-action4;
+                @extend %ui-btn-non-blue;
               }
 
               .delete {
@@ -273,23 +273,13 @@
 
           // add a group is below with groups styling
           .action-primary {
-            @include blue-button;
-            @include transition(all .15s);
-            @extend %t-action2;
-            @extend %t-strong;
-            display: inline-block;
-            padding: ($baseline/5) $baseline;
-            text-transform: uppercase;
+            @extend %btn-primary-blue;
+            padding: ($baseline*.3) $baseline;
           }
 
           .action-secondary {
-            @include grey-button;
-            @include transition(all .15s);
-            @extend %t-action2;
-            @extend %t-strong;
-            display: inline-block;
-            padding: ($baseline/5) $baseline;
-            text-transform: uppercase;
+            @extend %btn-secondary-gray;
+            padding: ($baseline*.3) $baseline;
           }
 
           .wrapper-delete-button {

cms/templates/group_configurations.html

@@ -47,8 +47,28 @@
   <div class="wrapper-content wrapper">
     <section class="content">
       <article class="content-primary" role="main">
-        <div class="ui-loading">
-            <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
+        <div class="wrapper-groups cohort-groups">
+          <h3 class="title">${_("Cohorted Content")}</h3>
+          <p class="copy">${_("A cohorted content group configuration allows different groups of students to view separate content. You can then define what units each cohort can see from the {a_start}Course Outline{a_end}. [Copy TBD]").format(a_start='<a href="">', a_end="</a>")}</p>
+            <div class="no-group-configurations-content">
+                <p>${_("You haven't created any cohort groups yet.")}<a href="#" class="button new-button"><i class="icon fa fa-plus"></i> ${_("Add your first Cohort Group")}</a></p>
+            </div>
+          </div>
+
+        <div class="wrapper-groups experiment-groups">
+          <h3 class="title">${_("Experiment Groups")}</h3>
+          <p class="copy">${_("An experiment group configuration defines how many groups of students are in an experiment. You can then add a content experiment to any unit in the {a_start}Course Outline{a_end}. [Copy TBD]").format(a_start='<a href="">', a_end="</a>")}</p>
+          % if configurations is None:
+            <div class="notice notice-incontext notice-moduledisabled">
+                <p class="copy">
+                    ${_("This module is disabled at the moment.")}
+                </p>
+            </div>
+          % else:
+            <div class="ui-loading">
+                <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
+            </div>
+          % endif
         </div>
       </article>
       <aside class="content-supplementary" role="complementary">

cms/templates/js/group-configuration-details.underscore

@@ -42,7 +42,7 @@
     <% } %>
     <ul class="actions group-configuration-actions">
         <li class="action action-edit">
-            <button class="edit"><%= gettext("Edit") %></button>
+            <button class="edit"><i class="icon icon-pencil"></i> <%= gettext("Edit") %></button>
         </li>
         <% if (_.isEmpty(usage)) { %>
             <li class="action action-delete wrapper-delete-button">

cms/templates/js/no-group-configurations.underscore

 <div class="no-group-configurations-content">
-    <p><%= gettext("You haven't created any group configurations yet.") %><a href="#" class="button new-button"><i class="icon fa fa-plus"></i><%= gettext("Add your first Group Configuration") %></a></p>
+    <p><%= gettext("You haven't created any group configurations yet.") %><a href="#" class="button new-button"><i class="icon fa fa-plus"></i><%= gettext("Add your first Experiment Configuration") %></a></p>
 </div>