Addressing items in the latest PR; includes RTL-ifying all SCSS

lms/static/js/groups/views/cohorts.js

@@ -13,8 +13,8 @@ var edx = edx || {};
         events : {
             'change .cohort-select': 'onCohortSelected',
             'click .action-create': 'showAddCohortForm',
-            'click .cohort-management-add-modal .action-save': 'saveAddCohortForm',
-            'click .cohort-management-add-modal .action-cancel': 'cancelAddCohortForm',
+            'click .cohort-management-add-form .action-save': 'saveAddCohortForm',
+            'click .cohort-management-add-form .action-cancel': 'cancelAddCohortForm',
             'click .link-cross-reference': 'showSection',
             'click .toggle-cohort-management-secondary': 'showCsvUpload'
         },
@@ -148,7 +148,7 @@ var edx = edx || {};
                 context: this.context
             });
             this.cohortFormView.render();
-            this.$('.cohort-management-add-modal').append(this.cohortFormView.$el);
+            this.$('.cohort-management-add-form').append(this.cohortFormView.$el);
             this.setCohortEditorVisibility(false);
         },
 

lms/static/js/spec/groups/views/cohorts_spec.js

@@ -87,7 +87,7 @@ define(['backbone', 'jquery', 'js/common_helpers/ajax_helpers', 'js/common_helpe
             };
 
             getAddModal = function() {
-                return cohortsView.$('.cohort-management-add-modal');
+                return cohortsView.$('.cohort-management-add-form');
             };
 
             selectContentGroup = function(groupId, userPartitionId) {

lms/static/sass/course/instructor/_cohort-management.scss

-.cohort-management {
-
-  .has-option-unavailable { // Given to <selects> that have some options that are unavailable
-
-    .option-unavailable { // Allows granular styling (i.e., red) for those unavailable options
-      background: $red-l5;
-      color: $error-red;
-    }
-  }
-
-  .has-other { // Given to groups which have an 'other' input that appears when needed
-    display: inline-block;
-
-    label {
-      display: inline-block;
-    }
-
-    .input-group-other {
-      display: none;
-
-      &.is-visible {
-        display: inline;
-        position: relative;
-        overflow: auto;
-        width: 100%;
-        height: auto;
-        margin: 0 0 0 $baseline;
-        padding: inherit;
-        border: inherit;
-        clip: auto;
-      }
-    }
-  }
-
-  .cohort-management-nav {
-    margin-bottom: $baseline;
-
-    .action-create {
-      margin-top: $baseline;
-    }
-  }
-
-  .cohort-management-settings {
-    @include clearfix();
-    background: $gray-l5;
-
-    .cohort-manage-group-header {
-      padding: 0;
-      border-bottom: 0;
-
-      .group-header-title {
-        padding: $baseline;
-        margin-bottom: 0;
-        border-bottom: 1px solid $gray-l3;
-        text-transform: none;
-        letter-spacing: normal;
-      }
-
-      .cohort-management-group-setup {
-        padding: $baseline;
-
-        .cohort-management-group-text {
-          display: inline-block;
-          width: flex-grid(9);
-        }
-
-        .cohort-management-group-actions {
-          display: inline-block;
-          width: flex-grid(3);
-          vertical-align: top;
-
-          .float-right {
-            float: right;
-          }
-        }
-      }
-    }
-
-    .cohort-management-details,
-    .cohort-management-group-add {
-      border-top: ($baseline/5) solid $gray-l4;
-      background: $white;
-
-      .cohort-details-name {
-        @extend %t-action1;
-        display: block;
-        width: 100%;
-        padding: ($baseline/2);
-        margin-bottom: ($baseline*2);
-      }
-
-      .cohort-section-header {
-        margin-top: ($baseline*1.5);
-        padding: $baseline 0 ($baseline/2) 0;
-      }
-
-      .cohort-section-header > .form-fields {
-        padding-bottom: $baseline;
-      }
-    }
-  }
-
-  .form-actions:last-child {
-    margin-top: $baseline;
-
-    .action-primary {
-      @include idashbutton($blue);
-      padding: 7px $baseline;
-      text-shadow: none;
-    }
-  }
-
-  .wrapper-tabs { // This applies to the tab-like interface that toggles between the student management and the group settings
-    @extend %ui-no-list;
-    @extend %ui-depth1;
-    position: relative;
-    top: ($baseline/5);
-    padding: 0 $baseline;
-
-    .tab {
-      position: relative;
-      display: inline-block;
-
-      a {
-        display: inline-block;
-        padding: $baseline;
-      }
-
-      &.is-selected { // Active or selected tabs (<li>) get this class. Also useful for aria stuff if ever implemented in the future.
-
-        a {
-          padding-bottom: ($baseline+($baseline/5));
-          border-style: solid;
-          border-width: ($baseline/5) ($baseline/5) 0 ($baseline/5);
-          border-color: $gray-l4;
-          background: $white;
-          color: inherit;
-          cursor: default;
-        }
-      }
-    }
-  }
-}

lms/templates/instructor/instructor_dashboard_2/cohort-form.underscore

@@ -13,7 +13,7 @@
             %>
                 <div class="form-field">
                     <div class="cohort-management-settings-form-name field field-text">
-                        <label for="cohort-name" class="label">
+                        <label for="cohort-name" class="form-label">
                             <%- gettext('Cohort Group Name') %> *
                             <span class="sr"><%- gettext('(Required Field)')%></span>
                         </label>
@@ -32,9 +32,9 @@
             %>
             <div class="form-field">
                 <div class="cohort-management-details-association-course field field-radio">
-                    <label class="label">
+                    <h4 class="form-label">
                         <%- gettext('Associate this cohort group with a content group') %>
-                    </label>
+                    </h4>
                     <label><input type="radio" class="radio-no" name="cohort-association-course" value="no"  <%- !hasSelectedContentGroup ? 'checked="checked"' : '' %>/> <%- gettext("No Content Group") %></label>
                     <div class="input-group has-other-input-text">
                         <label><input type="radio" class="radio-yes" name="cohort-association-course" value="yes" <%- !hasContentGroups ? 'disabled="disabled"' : '' %> <%- hasSelectedContentGroup ? 'checked="checked"' : '' %> /> <%- gettext("Select a Content Group") %></label>

lms/templates/instructor/instructor_dashboard_2/cohorts.underscore

@@ -25,7 +25,7 @@
 </div>
 
 <!-- Add modal -->
-<div class="cohort-management-add-modal"></div>
+<div class="cohort-management-add-form"></div>
 
 <!-- individual group -->
 <div class="cohort-management-group"></div>