Merge branch 'master' into talbs/studio-authorship

Conflicts: cms/djangoapps/contentstore/views/user.py cms/static/sass/elements/_controls.scss cms/templates/activation_active.html cms/templates/activation_complete.html cms/templates/activation_invalid.html
2013-07-22 12:15:42 -04:00
parent e1c02b1b31 9a61038c87
commit 6629d5d3a3
360 changed files with 17361 additions and 2519 deletions
--- a/cms/static/client_templates/checklist.html
+++ b/cms/static/client_templates/checklist.html
@@ -6,15 +6,15 @@
    class="course-checklist"
    <% } %>
    id="<%= 'course-checklist' + checklistIndex %>">
-    <% var widthPercentage = 'width:' + percentChecked + '%;'; %>
-    <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value" style="<%= widthPercentage %>">
-        <span class="int"><%= percentChecked %></span>% of checklist completed</span></span>
+    <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value" style="width: <%= percentChecked %>%;">
+        <%= _.template(gettext("{number}% of checklists completed"), {number: '<span class="int">' + percentChecked + '</span>'}, {interpolate: /\{(.+?)\}/g}) %>
+    </span></span>
    <header>
        <h3 class="checklist-title title-2 is-selectable" title="Collapse/Expand this Checklist">
            <i class="icon-caret-down ui-toggle-expansion"></i>
            <%= checklistShortDescription %></h3>
              <span class="checklist-status status">
-                Tasks Completed: <span class="status-count"><%= itemsChecked %></span>/<span class="status-amount"><%= items.length %></span>
+                <%= gettext("Tasks Completed:") %> <span class="status-count"><%= itemsChecked %></span>/<span class="status-amount"><%= items.length %></span>
                <i class="icon-ok"></i>
              </span>
    </header>
@@ -47,7 +47,7 @@
                    <li class="action-item">
                        <a href="<%= item['action_url'] %>" class="action action-primary"
                        <% if (item['action_external']) { %>
-                        rel="external" title="This link will open in a new browser window/tab"
+                        rel="external" title="<%= gettext("This link will open in a new browser window/tab") %>"
                        <% } %>
                        ><%= item['action_text'] %></a>
                    </li>
--- a/cms/static/client_templates/course_info_handouts.html
+++ b/cms/static/client_templates/course_info_handouts.html
@@ -1,12 +1,12 @@
 <a href="#" class="edit-button"><span class="edit-icon"></span>Edit</a>

-<h2>Course Handouts</h2>
+<h2 class="title">Course Handouts</h2>
 <%if (model.get('data') != null) { %>
  <div class="handouts-content">
    <%= model.get('data') %>
  </div>
 <% } else {%>
-  <p>You have no handouts defined</p>
+  <p>${_("You have no handouts defined")}</p>
 <% } %>
 <form class="edit-handouts-form" style="display: block;">
  <div class="row">
--- a/cms/static/coffee/files.json
+++ b/cms/static/coffee/files.json
@@ -1,5 +1,6 @@
 {
  "static_files": [
+    "../jsi18n/",
    "js/vendor/RequireJS.js",
    "js/vendor/jquery.min.js",
    "js/vendor/jquery-ui.min.js",
--- a/cms/static/coffee/src/views/module_edit.coffee
+++ b/cms/static/coffee/src/views/module_edit.coffee
@@ -56,14 +56,15 @@ class CMS.Views.ModuleEdit extends Backbone.View
  changedMetadata: ->
    return _.extend(@metadataEditor.getModifiedMetadataValues(), @customMetadata())

-  cloneTemplate: (parent, template) ->
-    $.post("/clone_item", {
-      parent_location: parent
-      template: template
-    }, (data) => 
-      @model.set(id: data.id)
-      @$el.data('id', data.id)
-      @render()
+  createItem: (parent, payload) ->
+    payload.parent_location = parent
+    $.post(
+        "/create_item"
+        payload 
+        (data) => 
+            @model.set(id: data.id)
+            @$el.data('id', data.id)
+            @render()
    )

  render: ->
--- a/cms/static/coffee/src/views/tabs.coffee
+++ b/cms/static/coffee/src/views/tabs.coffee
@@ -55,9 +55,9 @@ class CMS.Views.TabsEdit extends Backbone.View
      editor.$el.removeClass('new')
    , 500)

-    editor.cloneTemplate(
+    editor.createItem(
      @model.get('id'),
-      'i4x://edx/templates/static_tab/Empty'
+      {category: 'static_tab'}
    )

    analytics.track "Added Static Page",
--- a/cms/static/coffee/src/views/unit.coffee
+++ b/cms/static/coffee/src/views/unit.coffee
@@ -89,9 +89,9 @@ class CMS.Views.UnitEdit extends Backbone.View

    @$newComponentItem.before(editor.$el)

-    editor.cloneTemplate(
+    editor.createItem(
      @$el.data('id'),
-      $(event.currentTarget).data('location')
+      $(event.currentTarget).data()
    )

    analytics.track "Added a Component",
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -79,10 +79,10 @@ $(document).ready(function() {
    });

    // general link management - new window/tab
-    $('a[rel="external"]').attr('title', 'This link will open in a new browser window/tab').bind('click', linkNewWindow);
+    $('a[rel="external"]').attr('title', gettext('This link will open in a new browser window/tab')).bind('click', linkNewWindow);

    // general link management - lean modal window
-    $('a[rel="modal"]').attr('title', 'This link will open in a modal window').leanModal({
+    $('a[rel="modal"]').attr('title', gettext('This link will open in a modal window')).leanModal({
        overlay: 0.50,
        closeButton: '.action-modal-close'
    });
@@ -199,8 +199,10 @@ function toggleSections(e) {
    $section = $('.courseware-section');
    sectionCount = $section.length;
    $button = $(this);
-    $labelCollapsed = $('<i class="icon-arrow-up"></i> <span class="label">Collapse All Sections</span>');
-    $labelExpanded = $('<i class="icon-arrow-down"></i> <span class="label">Expand All Sections</span>');
+    $labelCollapsed = $('<i class="icon-arrow-up"></i> <span class="label">' +
+        gettext('Collapse All Sections') + '</span>');
+    $labelExpanded = $('<i class="icon-arrow-down"></i> <span class="label">' +
+        gettext('Expand All Sections') + '</span>');

    var buttonLabel = $button.hasClass('is-activated') ? $labelCollapsed : $labelExpanded;
    $button.toggleClass('is-activated').html(buttonLabel);
@@ -251,17 +253,13 @@ function syncReleaseDate(e) {
 }

 function getEdxTimeFromDateTimeVals(date_val, time_val) {
-    var edxTimeStr = null;
-
    if (date_val != '') {
        if (time_val == '') time_val = '00:00';

-        // Note, we are using date.js utility which has better parsing abilities than the built in JS date parsing
-        var date = Date.parse(date_val + " " + time_val);
-        edxTimeStr = date.toString('yyyy-MM-ddTHH:mm');
+        return new Date(date_val + " " + time_val + "Z");
    }

-    return edxTimeStr;
+    else return null;
 }

 function getEdxTimeFromDateTimeInputs(date_id, time_id) {
@@ -326,7 +324,7 @@ function saveSubsection() {
            $changedInput = null;
        },
        error: function() {
-            showToastMessage('There has been an error while saving your changes.');
+            showToastMessage(gettext('There has been an error while saving your changes.'));
        }
    });
 }
@@ -336,7 +334,7 @@ function createNewUnit(e) {
    e.preventDefault();

    var parent = $(this).data('parent');
-    var template = $(this).data('template');
+    var category = $(this).data('category');

    analytics.track('Created a Unit', {
        'course': course_location_analytics,
@@ -344,9 +342,9 @@ function createNewUnit(e) {
    });


-    $.post('/clone_item', {
+    $.post('/create_item', {
        'parent_location': parent,
-        'template': template,
+        'category': category,
        'display_name': 'New Unit'
    },

@@ -372,7 +370,7 @@ function deleteSection(e) {
 }

 function _deleteItem($el) {
-    if (!confirm('Are you sure you wish to delete this item. It cannot be reversed!')) return;
+    if (!confirm(gettext('Are you sure you wish to delete this item. It cannot be reversed!'))) return;

    var id = $el.data('id');

@@ -549,7 +547,7 @@ function saveNewSection(e) {

    var $saveButton = $(this).find('.new-section-name-save');
    var parent = $saveButton.data('parent');
-    var template = $saveButton.data('template');
+    var category = $saveButton.data('category');
    var display_name = $(this).find('.new-section-name').val();

    analytics.track('Created a Section', {
@@ -557,9 +555,9 @@ function saveNewSection(e) {
        'display_name': display_name
    });

-    $.post('/clone_item', {
+    $.post('/create_item', {
        'parent_location': parent,
-        'template': template,
+        'category': category,
        'display_name': display_name,
    },

@@ -593,13 +591,12 @@ function saveNewCourse(e) {
    e.preventDefault();

    var $newCourse = $(this).closest('.new-course');
-    var template = $(this).find('.new-course-save').data('template');
    var org = $newCourse.find('.new-course-org').val();
    var number = $newCourse.find('.new-course-number').val();
    var display_name = $newCourse.find('.new-course-name').val();

    if (org == '' || number == '' || display_name == '') {
-        alert('You must specify all fields in order to create a new course.');
+        alert(gettext('You must specify all fields in order to create a new course.'));
        return;
    }

@@ -610,7 +607,6 @@ function saveNewCourse(e) {
    });

    $.post('/create_new_course', {
-        'template': template,
        'org': org,
        'number': number,
        'display_name': display_name
@@ -644,7 +640,7 @@ function addNewSubsection(e) {
    var parent = $(this).parents("section.branch").data("id");

    $saveButton.data('parent', parent);
-    $saveButton.data('template', $(this).data('template'));
+    $saveButton.data('category', $(this).data('category'));

    $newSubsection.find('.new-subsection-form').bind('submit', saveNewSubsection);
    $cancelButton.bind('click', cancelNewSubsection);
@@ -657,7 +653,7 @@ function saveNewSubsection(e) {
    e.preventDefault();

    var parent = $(this).find('.new-subsection-name-save').data('parent');
-    var template = $(this).find('.new-subsection-name-save').data('template');
+    var category = $(this).find('.new-subsection-name-save').data('category');
    var display_name = $(this).find('.new-subsection-name-input').val();

    analytics.track('Created a Subsection', {
@@ -666,9 +662,9 @@ function saveNewSubsection(e) {
    });


-    $.post('/clone_item', {
+    $.post('/create_item', {
        'parent_location': parent,
-        'template': template,
+        'category': category,
        'display_name': display_name
    },

@@ -730,18 +726,16 @@ function saveSetSectionScheduleDate(e) {
        })
    }).success(function() {
        var $thisSection = $('.courseware-section[data-id="' + id + '"]');
-        var format = gettext('<strong>Will Release:</strong> %(date)s at %(time)s UTC');
-        var willReleaseAt = interpolate(format, {
-            'date': input_date,
-            'time': input_time
-        },
-        true);
-        $thisSection.find('.section-published-date').html(
-            '<span class="published-status">' + willReleaseAt + '</span>' +
-            '<a href="#" class="edit-button" ' +
-            '" data-date="' + input_date +
-            '" data-time="' + input_time +
-            '" data-id="' + id + '">' + gettext('Edit') + '</a>');
+        var html = _.template(
+            '<span class="published-status">' +
+                '<strong>' + gettext("Will Release: ") + '</strong>' +
+                gettext("<%= date %> at <%= time %> UTC") +
+            '</span>' +
+            '<a href="#" class="edit-button" data-date="<%= date %>" data-time="<%= time %>" data-id="<%= id %>">' +
+                gettext("Edit") +
+            '</a>',
+            {date: input_date, time: input_time, id: id});
+        $thisSection.find('.section-published-date').html(html);
        hideModal();
        saving.hide();
    });
--- a/cms/static/js/models/settings/course_details.js
+++ b/cms/static/js/models/settings/course_details.js
@@ -38,23 +38,23 @@ CMS.Models.Settings.CourseDetails = Backbone.Model.extend({
        // A bit funny in that the video key validation is asynchronous; so, it won't stop the validation.
        var errors = {};
        if (newattrs.start_date === null) {
-            errors.start_date = "The course must have an assigned start date.";
+            errors.start_date = gettext("The course must have an assigned start date.");
        }
        if (newattrs.start_date && newattrs.end_date && newattrs.start_date >= newattrs.end_date) {
-            errors.end_date = "The course end date cannot be before the course start date.";
+            errors.end_date = gettext("The course end date cannot be before the course start date.");
        }
        if (newattrs.start_date && newattrs.enrollment_start && newattrs.start_date < newattrs.enrollment_start) {
-            errors.enrollment_start = "The course start date cannot be before the enrollment start date.";
+            errors.enrollment_start = gettext("The course start date cannot be before the enrollment start date.");
        }
        if (newattrs.enrollment_start && newattrs.enrollment_end && newattrs.enrollment_start >= newattrs.enrollment_end) {
-            errors.enrollment_end = "The enrollment start date cannot be after the enrollment end date.";
+            errors.enrollment_end = gettext("The enrollment start date cannot be after the enrollment end date.");
        }
        if (newattrs.end_date && newattrs.enrollment_end && newattrs.end_date < newattrs.enrollment_end) {
-            errors.enrollment_end = "The enrollment end date cannot be after the course end date.";
+            errors.enrollment_end = gettext("The enrollment end date cannot be after the course end date.");
        }
        if (newattrs.intro_video && newattrs.intro_video !== this.get('intro_video')) {
            if (this._videokey_illegal_chars.exec(newattrs.intro_video)) {
-                errors.intro_video = "Key should only contain letters, numbers, _, or -";
+                errors.intro_video = gettext("Key should only contain letters, numbers, _, or -");
            }
            // TODO check if key points to a real video using google's youtube api
        }
--- a/cms/static/js/models/settings/course_grading_policy.js
+++ b/cms/static/js/models/settings/course_grading_policy.js
@@ -79,14 +79,14 @@ CMS.Models.Settings.CourseGrader = Backbone.Model.extend({
                // FIXME somehow this.collection is unbound sometimes. I can't track down when
                var existing = this.collection && this.collection.some(function(other) { return (other.cid != this.cid) && (other.get('type') == attrs['type']);}, this);
                if (existing) {
-                    errors.type = "There's already another assignment type with this name.";
+                    errors.type = gettext("There's already another assignment type with this name.");
                }
            }
        }
        if (_.has(attrs, 'weight')) {
            var intWeight = parseInt(attrs.weight); // see if this ensures value saved is int
            if (!isFinite(intWeight) || /\D+/.test(attrs.weight) || intWeight < 0 || intWeight > 100) {
-                errors.weight = "Please enter an integer between 0 and 100.";
+                errors.weight = gettext("Please enter an integer between 0 and 100.");
            }
            else {
                attrs.weight = intWeight;
@@ -100,18 +100,20 @@ CMS.Models.Settings.CourseGrader = Backbone.Model.extend({
            }}
        if (_.has(attrs, 'min_count')) {
            if (!isFinite(attrs.min_count) || /\D+/.test(attrs.min_count)) {
-                errors.min_count = "Please enter an integer.";
+                errors.min_count = gettext("Please enter an integer.");
            }
            else attrs.min_count = parseInt(attrs.min_count);
        }
        if (_.has(attrs, 'drop_count')) {
            if (!isFinite(attrs.drop_count) || /\D+/.test(attrs.drop_count)) {
-                errors.drop_count = "Please enter an integer.";
+                errors.drop_count = gettext("Please enter an integer.");
            }
            else attrs.drop_count = parseInt(attrs.drop_count);
        }
        if (_.has(attrs, 'min_count') && _.has(attrs, 'drop_count') && attrs.drop_count > attrs.min_count) {
-            errors.drop_count = "Cannot drop more " + attrs.type + " than will assigned.";
+            errors.drop_count = _.template(
+                gettext("Cannot drop more <% attrs.types %> than will assigned."),
+                attrs, {variable: 'attrs'});
        }
        if (!_.isEmpty(errors)) return errors;
    }
--- a/cms/static/js/views/assets.js
+++ b/cms/static/js/views/assets.js
@@ -9,7 +9,7 @@ function removeAsset(e){
    e.preventDefault();

    var that = this;
-    var msg = new CMS.Views.Prompt.Confirmation({
+    var msg = new CMS.Views.Prompt.Warning({
        title: gettext("Delete File Confirmation"),
        message: gettext("Are you sure you wish to delete this item. It cannot be reversed!\n\nAlso any content that links/refers to this item will no longer work (e.g. broken images and/or links)"),
        actions: {
--- a/cms/static/js/views/textbook.js
+++ b/cms/static/js/views/textbook.js
@@ -26,8 +26,8 @@ CMS.Views.ShowTextbook = Backbone.View.extend({
        if(e && e.preventDefault) { e.preventDefault(); }
        var textbook = this.model, collection = this.model.collection;
        var msg = new CMS.Views.Prompt.Warning({
-            title: _.str.sprintf(gettext("Delete “%s”?"),
-                textbook.escape('name')),
+            title: _.template(gettext("Delete “<%= name %>”?"),
+                {name: textbook.escape('name')}),
            message: gettext("Deleting a textbook cannot be undone and once deleted any reference to it in your courseware's navigation will also be removed."),
            actions: {
                primary: {
@@ -241,8 +241,8 @@ CMS.Views.EditChapter = Backbone.View.extend({
            asset_path: this.$("input.chapter-asset-path").val()
        });
        var msg = new CMS.Models.FileUpload({
-            title: _.str.sprintf(gettext("Upload a new asset to %s"),
-                section.escape('name')),
+            title: _.template(gettext("Upload a new asset to “<%= name %>”"),
+                {name: section.escape('name')}),
            message: "Files must be in PDF format."
        });
        var view = new CMS.Views.UploadDialog({model: msg, chapter: this.model});
@@ -260,7 +260,7 @@ CMS.Views.UploadDialog = Backbone.View.extend({
        this.listenTo(this.model, "change", this.render);
    },
    render: function() {
-        var isValid = this.model.isValid()
+        var isValid = this.model.isValid();
        var selectedFile = this.model.get('selectedFile');
        var oldInput = this.$("input[type=file]").get(0);
        this.$el.html(this.template({
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -558,7 +558,7 @@ p, ul, ol, dl {

 // misc
 hr.divide {
-  @extend .text-sr;
+  @extend .cont-text-sr;
 }

 .item-details {
@@ -806,7 +806,7 @@ hr.divide {

 // basic utility
 .sr {
-  @extend .text-sr;
+  @extend .cont-text-sr;
 }

 .fake-link {
@@ -859,7 +859,7 @@ body.js {
      text-align: center;

      .label {
-        @extend .text-sr;
+        @extend .cont-text-sr;
      }

      [class^="icon-"] {
--- a/cms/static/sass/_mixins-inherited.scss
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -1 +0,0 @@
-../../../common/static/sass/_mixins-inherited.scss
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -3,7 +3,7 @@

 // gray primary button
 .btn-primary-gray {
-  @extend .btn-primary;
+  @extend .ui-btn-primary;
  background: $gray-l1;
  border-color: $gray-l2;
  color: $white;
@@ -25,14 +25,14 @@

 // blue primary button
 .btn-primary-blue {
-  @extend .btn-primary;
-  background: $blue-u1;
-  border-color: $blue-u1;
+  @extend .ui-btn-primary;
+  background: $blue;
+  border-color: $blue-s1;
  color: $white;

  &:hover, &:active {
-    background: $blue-s1;
-    border-color: $blue-s1;
+    background: $blue-s2;
+    border-color: $blue-s2;
  }

  &.current, &.active {
@@ -48,7 +48,7 @@

 // green primary button
 .btn-primary-green {
-  @extend .btn-primary;
+  @extend .ui-btn-primary;
  background: $green;
  border-color: $green;
  color: $white;
@@ -71,7 +71,7 @@

 // gray secondary button
 .btn-secondary-gray {
-  @extend .btn-secondary;
+  @extend .ui-btn-secondary;
  border-color: $gray-l3;
  color: $gray-l1;

@@ -92,7 +92,7 @@

 // blue secondary button
 .btn-secondary-blue {
-  @extend .btn-secondary;
+  @extend .ui-btn-secondary;
  border-color: $blue-l3;
  color: $blue;

@@ -114,7 +114,7 @@

 // green secondary button
 .btn-secondary-green {
-  @extend .btn-secondary;
+  @extend .ui-btn-secondary;
  border-color: $green-l4;
  color: $green-l2;

@@ -148,9 +148,9 @@
 // ====================

 // simple dropdown button styling - should we move this elsewhere?
-.btn-dd {
-  @extend .btn;
-  @extend .btn-pill;
+.ui-btn-dd {
+  @extend .ui-btn;
+  @extend .ui-btn-pill;
  padding:($baseline/4) ($baseline/2);
  border-width: 1px;
  border-style: solid;
@@ -158,7 +158,7 @@
  text-align: center;

  &:hover, &:active {
-    @extend .fake-link;
+    @extend .ui-fake-link;
    border-color: $gray-l3;
  }

@@ -169,8 +169,8 @@
 }

 // layout-based buttons - nav dd
-.btn-dd-nav-primary {
-  @extend .btn-dd;
+.ui-btn-dd-nav-primary {
+  @extend .ui-btn-dd;
  background: $white;
  border-color: $white;
  color: $gray-d1;
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -2,10 +2,10 @@
 // ====================

 .wrapper-header {
-  @extend .depth3;
-  box-shadow: 0 1px 2px 0 $shadow-l1;
+  @extend .ui-depth3;
  position: relative;
  width: 100%;
+  box-shadow: 0 1px 2px 0 $shadow-l1;
  margin: 0;
  padding: 0 $baseline;
  background: $white;
@@ -22,7 +22,6 @@
  // ====================

  // basic layout
-
  .wrapper-l, .wrapper-r {
    background: $white;
  }
@@ -76,7 +75,7 @@

    .title {
      @extend .t-action2;
-      @extend .btn-dd-nav-primary;
+      @extend .ui-btn-dd-nav-primary;
      @include transition(all $tmg-f2 ease-in-out 0s);

      .label, .icon-caret-down {
--- a/cms/static/sass/elements/_modal.scss
+++ b/cms/static/sass/elements/_modal.scss
@@ -2,7 +2,7 @@
 // ====================

 .modal-cover {
-	@extend .depth3;
+	@extend .ui-depth3;
 	display: none;
 	position: fixed;
 	top: 0;
@@ -13,7 +13,7 @@
 }

 .modal {
-	@extend .depth4;
+	@extend .ui-depth4;
 	display: none;
 	position: fixed;
 	top: 60px;
@@ -61,7 +61,7 @@

 // lean modal alternative
 #lean_overlay {
-	@extend .depth4;
+	@extend .ui-depth4;
 	position: fixed;
 	top: 0px;
 	left: 0px;
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -5,7 +5,7 @@
 nav {

  ol, ul {
-    @extend .no-list;
+    @extend .cont-no-list;
  }

  .nav-item {
--- a/cms/static/sass/elements/_sock.scss
+++ b/cms/static/sass/elements/_sock.scss
@@ -10,7 +10,7 @@

  .wrapper-inner {
    @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
-    @extend .depth0;
+    @extend .ui-depth0;
    display: none;
    width: 100% !important;
    border-bottom: 1px solid $white;
@@ -19,7 +19,7 @@

  // sock - actions
  .list-cta {
-    @extend .depth1;
+    @extend .ui-depth1;
    position: absolute;
    top: -($baseline*0.75);
    width: 100%;
@@ -27,7 +27,7 @@
    text-align: center;

    .cta-show-sock {
-      @extend .btn-pill;
+      @extend .ui-btn-pill;
      @extend .t-action4;
      background: $gray-l5;
      padding: ($baseline/2) $baseline;
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -186,8 +186,8 @@

 // prompts
 .wrapper-prompt {
-  @extend .depth5;
-  @include transition(all $tmg-f3 ease-in-out 0s);
+  @extend .ui-depth5;
+  @include transition(all $tmg-f3 ease-in-out  0s);
  position: fixed;
  top: 0;
  background: $black-t0;
@@ -284,7 +284,7 @@

 // notifications
 .wrapper-notification {
-  @extend .depth5;
+  @extend .ui-depth5;
  @include clearfix();
  box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
  position: fixed;
@@ -486,7 +486,7 @@
    }

    .copy p {
-      @extend .text-sr;
+      @extend .cont-text-sr;
    }
  }
 }
@@ -495,7 +495,7 @@

 // alerts
 .wrapper-alert {
-  @extend .depth2;
+  @extend .ui-depth2;
  @include box-sizing(border-box);
  box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
  position: relative;
@@ -641,7 +641,7 @@
    text-align: center;

    .label {
-      @extend .text-sr;
+      @extend .cont-text-sr;
    }

    [class^="icon"] {
@@ -738,7 +738,7 @@ body.uxdesign.alerts {
  }

  .content-primary {
-    @extend .window;
+    @extend .ui-window;
    width: flex-grid(12, 12);
    margin-right: flex-gutter();
    padding: $baseline ($baseline*1.5);
--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -14,7 +14,7 @@ body.course.checklists {

  // checklists - general
  .course-checklist {
-    @extend .window;
+    @extend .ui-window;
    margin: 0 0 ($baseline*2) 0;

    &:last-child {
@@ -23,7 +23,7 @@ body.course.checklists {

    // visual status
    .viz-checklist-status {
-      @extend .text-hide;
+      @extend .cont-text-hide;
      @include size(100%,($baseline/4));
      position: relative;
      display: block;
@@ -40,7 +40,7 @@ body.course.checklists {
        background: $green;

        .int {
-          @extend .text-sr;
+          @extend .cont-text-sr;
        }
      }
    }
--- a/cms/static/sass/views/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -2,9 +2,9 @@
 // ====================

 body.course.export {
-  
+
  .export-overview {
-    @extend .window;
+    @extend .ui-window;
    @include clearfix;
    padding: 30px 40px;
  }
@@ -40,7 +40,7 @@ body.course.export {
  }

  .export-form-wrapper {
-  
+
    .export-form {
      float: left;
      width: 35%;
@@ -122,4 +122,4 @@ body.course.export {
      }
    }
  }
-}
+}
--- a/cms/static/sass/views/_import.scss
+++ b/cms/static/sass/views/_import.scss
@@ -2,9 +2,9 @@
 // ====================

 body.course.import {
-  
+
  .import-overview {
-    @extend .window;
+    @extend .ui-window;
    @include clearfix;
    padding: 30px 40px;
  }
@@ -103,4 +103,4 @@ body.course.import {
    color: #fff;
    line-height: 48px;
  }
-}
+}
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -9,7 +9,7 @@ body.course.settings {
  }

  .content-primary {
-    @extend .window;
+    @extend .ui-window;
    width: flex-grid(9, 12);
    margin-right: flex-gutter();
    padding: $baseline ($baseline*1.5);
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -171,7 +171,7 @@ body.course.static-pages {
  }

  .static-page-details {
-    @extend .window;
+    @extend .ui-window;
    padding: 32px 40px;

    .row {
--- a/cms/static/sass/views/_textbooks.scss
+++ b/cms/static/sass/views/_textbooks.scss
@@ -115,7 +115,7 @@ body.course.textbooks {
            }

            .delete {
-              @extend .btn-non;
+              @extend .ui-btn-non;
            }
          }

@@ -188,7 +188,7 @@ body.course.textbooks {

      .chapters-fields,
      .textbook-fields {
-        @extend .no-list;
+        @extend .cont-no-list;

        .field {
          margin: 0 0 ($baseline*0.75) 0;
@@ -320,7 +320,7 @@ body.course.textbooks {
            }

            .action-upload {
-                @extend .btn-flat-outline;
+                @extend .ui-btn-flat-outline;
                position: absolute;
                top: 3px;
                right: 0;
@@ -348,7 +348,7 @@ body.course.textbooks {


      .action-add-chapter {
-        @extend .btn-flat-outline;
+        @extend .ui-btn-flat-outline;
        @include font-size(16);
        display: block;
        width: 100%;
@@ -365,7 +365,7 @@ body.course.textbooks {

 // dialog
 .wrapper-dialog {
-  @extend .depth5;
+  @extend .ui-depth5;
  @include transition(all 0.05s ease-in-out);
  position: fixed;
  top: 0;
--- a/cms/static/sass/views/_updates.scss
+++ b/cms/static/sass/views/_updates.scss
@@ -2,12 +2,6 @@
 // ====================

 body.course.updates {
-	
-	h2 {
-		margin-bottom: 24px;
-		font-size: 22px;
-		font-weight: 300;
-	}

 	.course-info-wrapper {
 		display: table;
@@ -180,9 +174,10 @@ body.course.updates {
 	border-left: none;
 	background: $lightGrey;

-	h2 {
-		font-size: 18px;
-		font-weight: 700;
+	.title {
+		margin-bottom: 24px;
+		font-size: 22px;
+		font-weight: 300;
 	}

 	.edit-button {
@@ -220,4 +215,4 @@ body.course.updates {
 	textarea {
 		height: 300px;
 	}
-}
+}
				`@@ -1 +0,0 @@`
				`../../../common/static/sass/_mixins-inherited.scss`