From a2d5500f9e354299802d8af666ecd4df5c32f5f4 Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Wed, 4 Dec 2013 11:13:23 -0500
Subject: [PATCH] FED clean up of studio outline page

---
 cms/static/js/base.js                         |    6 +-
 cms/static/js/views/overview.js               |   50 +-
 cms/static/sass/_shame.scss                   |    2 +-
 cms/static/sass/elements/_edit_dialog.scss    |  179 +++
 cms/static/sass/style-app.scss                |    1 +
 cms/static/sass/views/_outline.scss           | 1063 ++++++++---------
 .../js/blank-slate-template.underscore        |   19 +
 .../js/new-section-template.underscore        |   15 +
 .../js/new-subsection-template.underscore     |   18 +
 .../js/no-outline-content.underscore          |    3 +
 cms/templates/overview.html                   |  381 +++---
 cms/templates/unit.html                       |    1 -
 cms/templates/widgets/units.html              |   18 +-
 common/static/sass/_mixins-inherited.scss     |   10 +-
 14 files changed, 996 insertions(+), 770 deletions(-)
 create mode 100644 cms/static/sass/elements/_edit_dialog.scss
 create mode 100644 cms/templates/js/blank-slate-template.underscore
 create mode 100644 cms/templates/js/new-section-template.underscore
 create mode 100644 cms/templates/js/new-subsection-template.underscore
 create mode 100644 cms/templates/js/no-outline-content.underscore

diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index 174ab10c89..e452936072 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -243,17 +243,17 @@ function createNewUnit(e) {
 
 function deleteUnit(e) {
     e.preventDefault();
-    _deleteItem($(this).parents('li.leaf'), 'Unit');
+    _deleteItem($(this).parents('li.courseware-unit'), 'Unit');
 }
 
 function deleteSubsection(e) {
     e.preventDefault();
-    _deleteItem($(this).parents('li.branch'), 'Subsection');
+    _deleteItem($(this).parents('li.courseware-subsection'), 'Subsection');
 }
 
 function deleteSection(e) {
     e.preventDefault();
-    _deleteItem($(this).parents('section.branch'), 'Section');
+    _deleteItem($(this).parents('section.courseware-section'), 'Section');
 }
 
 function _deleteItem($el, type) {
diff --git a/cms/static/js/views/overview.js b/cms/static/js/views/overview.js
index 9dfb339b0c..0e34fc64a1 100644
--- a/cms/static/js/views/overview.js
+++ b/cms/static/js/views/overview.js
@@ -3,7 +3,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
     function (domReady, $, ui, _, gettext, NotificationView, Draggabilly, ModalUtils, CancelOnEscape,
               DateUtils, ModuleUtils) {
 
-        var modalSelector = '.edit-subsection-publish-settings';
+        var modalSelector = '.edit-section-publish-settings';
 
         var toggleSections = function(e) {
             e.preventDefault();
@@ -21,20 +21,26 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
             if ($button.hasClass('is-activated')) {
                 $section.addClass('collapsed');
                 // first child in order to avoid the icons on the subsection lists which are not in the first child
-                $section.find('header .expand-collapse-icon').removeClass('collapse').addClass('expand');
+                $section.find('header .expand-collapse').removeClass('collapse').addClass('expand');
             } else {
                 $section.removeClass('collapsed');
                 // first child in order to avoid the icons on the subsection lists which are not in the first child
-                $section.find('header .expand-collapse-icon').removeClass('expand').addClass('collapse');
+                $section.find('header .expand-collapse').removeClass('expand').addClass('collapse');
             }
         };
 
         var toggleSubmodules = function(e) {
             e.preventDefault();
-            $(this).toggleClass('expand').toggleClass('collapse');
-            $(this).closest('.branch, .window').toggleClass('collapsed');
+            $(this).toggleClass('expand');
+            $(this).closest('.is-collapsible, .window').toggleClass('collapsed');
         };
 
+
+        var closeModalNew = function (e) {
+            $('body').removeClass('dialog-is-shown');
+            $('.edit-section-publish-settings').removeClass('is-shown');
+        }
+
         var editSectionPublishDate = function (e) {
             e.preventDefault();
             var $modal = $(modalSelector);
@@ -45,15 +51,17 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
                 $modal.find('.save-button').hide();
             }
             $modal.find('.section-name').html('"' + $(this).closest('.courseware-section').find('.section-name-span').text() + '"');
-            ModalUtils.showModal();
+            //ModalUtils.showModal();
+            $('body').addClass('dialog-is-shown');
+            $('.edit-section-publish-settings').addClass('is-shown');
         };
 
         var saveSetSectionScheduleDate = function (e) {
             e.preventDefault();
 
             var datetime = DateUtils(
-                $('.edit-subsection-publish-settings .start-date'),
-                $('.edit-subsection-publish-settings .start-time')
+                $('.edit-section-publish-settings .start-date'),
+                $('.edit-section-publish-settings .start-time')
             );
 
             var locator = $(modalSelector).attr('data-locator');
@@ -89,10 +97,10 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
                     var $thisSection = $('.courseware-section[data-locator="' + locator + '"]');
                     var html = _.template(
                         '<span class="published-status">' +
-                            '<strong>' + gettext("Will Release:") + '&nbsp;</strong>' +
+                            '<strong>' + gettext("Release date:") + '&nbsp;</strong>' +
                             gettext("{month}/{day}/{year} at {hour}:{minute} UTC") +
                             '</span>' +
-                            '<a href="#" class="edit-button" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}">' +
+                            '<a href="#" class="edit-release-date action" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}">' +
                             gettext("Edit") +
                             '</a>',
                         {year: datetime.getUTCFullYear(), month: pad2(datetime.getUTCMonth() + 1), day: pad2(datetime.getUTCDate()),
@@ -100,8 +108,9 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
                             locator: locator},
                         {interpolate: /\{(.+?)\}/g});
                     $thisSection.find('.section-published-date').html(html);
-                    ModalUtils.hideModal();
+                    //ModalUtils.hideModal();
                     saving.hide();
+                    closeModalNew();
                 });
         };
 
@@ -159,7 +168,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
             var $saveButton = $newSubsection.find('.new-subsection-name-save');
             var $cancelButton = $newSubsection.find('.new-subsection-name-cancel');
 
-            var parent = $(this).parents("section.branch").data("locator");
+            var parent = $(this).parents("section.courseware-section").data("locator");
 
             $saveButton.data('parent', parent);
             $saveButton.data('category', $(this).data('category'));
@@ -197,7 +206,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
 
         var cancelNewSubsection = function (e) {
             e.preventDefault();
-            $(this).parents('li.branch').remove();
+            $(this).parents('li.courseware-subsection').remove();
         };
 
         var overviewDragger = {
@@ -310,7 +319,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
                 };
                 if (!ele.hasClass('collapsed')) {
                     ele.addClass('collapsed');
-                    ele.find('.expand-collapse-icon').first().addClass('expand').removeClass('collapse');
+                    ele.find('.expand-collapse').first().addClass('expand').removeClass('collapse');
                     // onDragStart gets called again after the collapse, so we can't just store a variable in the dragState.
                     ele.addClass(this.expandOnDropClass);
                 }
@@ -406,7 +415,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
 
             expandElement: function (ele) {
                 ele.removeClass('collapsed');
-                ele.find('.expand-collapse-icon').first().removeClass('expand').addClass('collapse');
+                ele.find('.expand-collapse').first().removeClass('expand').addClass('collapse');
             },
 
             /*
@@ -500,13 +509,12 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
                 }
             });
             $('.toggle-button-sections').bind('click', toggleSections);
-            $('.expand-collapse-icon').bind('click', toggleSubmodules);
+            $('.expand-collapse').bind('click', toggleSubmodules);
 
             var $body = $('body');
-            $body.on('click', '.section-published-date .edit-button', editSectionPublishDate);
-            $body.on('click', '.section-published-date .schedule-button', editSectionPublishDate);
-            $body.on('click', '.edit-subsection-publish-settings .save-button', saveSetSectionScheduleDate);
-            $body.on('click', '.edit-subsection-publish-settings .cancel-button', ModalUtils.hideModal);
+            $body.on('click', '.section-published-date .edit-release-date', editSectionPublishDate);
+            $body.on('click', '.edit-section-publish-settings .action-save', saveSetSectionScheduleDate);
+            $body.on('click', '.edit-section-publish-settings .action-cancel', closeModalNew);
 
             $('.new-courseware-section-button').bind('click', addNewSection);
             $('.new-subsection-item').bind('click', addNewSubsection);
@@ -530,7 +538,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
                 '.unit',
                 '.unit-drag-handle',
                 'ol.sortable-unit-list',
-                'li.branch, article.subsection-body'
+                'li.courseware-subsection, article.subsection-body'
             );
         });
 
diff --git a/cms/static/sass/_shame.scss b/cms/static/sass/_shame.scss
index 409e9098e5..099692c1d3 100644
--- a/cms/static/sass/_shame.scss
+++ b/cms/static/sass/_shame.scss
@@ -47,7 +47,7 @@
 // ====================
 
 // needed for poorly scoped margin rules on all content elements
-.branch .sortable-unit-list {
+.courseware-subsection .sortable-unit-list {
   margin-bottom: 0;
 }
 
diff --git a/cms/static/sass/elements/_edit_dialog.scss b/cms/static/sass/elements/_edit_dialog.scss
new file mode 100644
index 0000000000..27ec1d1cf1
--- /dev/null
+++ b/cms/static/sass/elements/_edit_dialog.scss
@@ -0,0 +1,179 @@
+// studio - elements - uploads
+// ========================
+
+body.course.feature-edit-dialog {
+
+  // dialog
+  .wrapper-dialog {
+    @extend %ui-depth5;
+    @include transition(all 0.05s ease-in-out);
+    position: fixed;
+    top: 0;
+    background: $black-t2;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+
+    &:before {
+      content: '';
+      display: inline-block;
+      height: 100%;
+      vertical-align: middle;
+      margin-right: -0.25em; /* Adjusts for spacing */
+    }
+
+    .dialog  {
+      @include box-sizing(border-box);
+      box-shadow: 0px 0px 7px $shadow-d1;
+      border-radius: ($baseline/5);
+      background-color: $gray-l4;
+      display: inline-block;
+      vertical-align: middle;
+      width: $baseline*23;
+      padding: 7px;
+      text-align: left;
+
+      .title {
+        @extend %t-title5;
+        margin-bottom: ($baseline/2);
+        font-weight: 600;
+        color: $black;
+      }
+
+      .message {
+        @extend %t-copy-sub2;
+        color: $gray;
+      }
+
+      .error {
+        color: $white;
+      }
+
+      form {
+        padding: 0;
+
+        .form-content {
+          box-shadow: 0 0 3px $shadow-d1;
+          padding: ($baseline*1.5);
+          background-color: $white;
+        }
+
+        .field {
+          margin-bottom: ($baseline/2);
+        }
+
+        label {
+          @include font-size(14);
+          display: block;
+          font-weight: bold;
+        }
+
+        input[type="text"] {
+          @extend %t-copy-sub2;
+        }
+
+          .message-status {
+            @include border-top-radius(2px);
+            @include box-sizing(border-box);
+            @include font-size(14);
+            display: none;
+            border-bottom: 2px solid $yellow;
+            margin: 0 0 20px 0;
+            padding: 10px 20px;
+            font-weight: 500;
+            background: $paleYellow;
+
+            .text {
+              display: inline-block;
+            }
+
+            &.error {
+              border-color: $red-d2;
+              background: $red-l1;
+              color: $white;
+            }
+
+            &.confirm {
+              border-color: $green-d2;
+              background: $green-l1;
+              color: $white;
+            }
+
+            &.is-shown {
+              display: block;
+            }
+          }
+
+
+        .actions {
+          padding: ($baseline*0.75) $baseline ($baseline/2) $baseline;
+
+
+
+          .action-item {
+            @extend %t-action4;
+            display: inline-block;
+            margin-right: ($baseline*0.75);
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+
+          .action-primary {
+            @include blue-button();
+            @include font-size(12); // needed due to bad button mixins for now
+            border-color: $blue-d1;
+            color: $white;
+          }
+
+          a {
+            color: $blue;
+
+            &:hover {
+              color: $blue-s2;
+            }
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+  // ====================
+
+
+
+    // dialog set-up
+    .wrapper-dialog {
+      visibility: hidden;
+      pointer-events: none;
+
+      .dialog {
+        opacity: 0;
+      }
+    }
+
+    // dialog showing/hiding
+    &.dialog-is-shown {
+
+      .wrapper-dialog {
+        -webkit-filter: blur(2px) grayscale(25%);
+        filter: blur(2px) grayscale(25%);
+      }
+
+      .wrapper-dialog.is-shown {
+        visibility: visible;
+        pointer-events: auto;
+
+        .dialog {
+          opacity: 1.0;
+        }
+      }
+    }
+
+
+}
diff --git a/cms/static/sass/style-app.scss b/cms/static/sass/style-app.scss
index 09409f779c..f6b20b06db 100644
--- a/cms/static/sass/style-app.scss
+++ b/cms/static/sass/style-app.scss
@@ -38,3 +38,4 @@
 @import 'elements/modal'; // interstitial UI, dialogs, modal windows
 @import 'elements/vendor'; // overrides to vendor-provided styling
 @import 'elements/uploads';
+@import 'elements/edit_dialog';
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 7a787bb5f0..4a8ac577a8 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -3,212 +3,186 @@
 
 .view-outline {
 
-  input.courseware-unit-search-input {
-      float: left;
-      width: 260px;
-      background-color: #fff;
+  // page structure
+  .content-primary,
+  .content-supplementary {
+    @include box-sizing(border-box);
+    float: left;
   }
 
-  .branch {
+  .content-primary {
+    width: flex-grid(9, 12);
+    margin-right: flex-gutter();
 
-      .section-item {
-        @include clearfix();
+    .no-outline-content {
+      @extend %ui-well;
+      padding: ($baseline*2);
+      background-color: $gray-l4;
+      text-align: center;
+      color: $gray;
 
-        .details {
-          display: block;
-          float: left;
-          margin-bottom: 0;
-          width: 650px;
-        }
+      .new-button {
+        @include font-size(14);
+        margin-left: $baseline;
 
-        .gradable-status {
-          float: right;
-          position: relative;
-          top: -4px;
-          right: 50px;
-          width: 100px;
-
-          .status-label {
-            @include font-size(12);
-            position: absolute;
-            top: 2px;
-            right: -5px;
-            display: none;
-            width: 110px;
-            padding: 5px 40px 5px 10px;
-            border-radius: 3px;
-            color: $lightGrey;
-            text-align: right;
-            font-weight: bold;
-            line-height: 16px;
-          }
-
-          .menu-toggle {
-                z-index: 10;
-                position: absolute;
-                top: 0;
-                right: 5px;
-                padding: 5px;
-                color: $mediumGrey;
-
-                &:hover, &.is-active {
-                  color: $blue;
-                }
-              }
-
-              [class^="icon-"] {
-                  vertical-align: middle;
-                  margin-top: -5px;
-                  display: inline-block;
-                }
-
-              .menu {
-                @include font-size(12);
-                @include transition(opacity $tmg-f2 linear 0s);
-                border-radius: 4px;
-                box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-                z-index: 1;
-                display: none;
-                opacity: 0.0;
-                position: absolute;
-                top: -1px;
-                right: 0;
-                margin: 0;
-                padding: 8px 12px;
-                background: $white;
-                border: 1px solid $mediumGrey;
-
-
-                li {
-                  width: 115px;
-                  margin-bottom: 3px;
-                  padding-bottom: 3px;
-                  border-bottom: 1px solid $lightGrey;
-
-                  &:last-child {
-                    margin-bottom: 0;
-                    padding-bottom: 0;
-                    border: none;
-
-                    a {
-                      color: $darkGrey;
-                    }
-                  }
-                }
-
-            a {
-              color: $blue;
-
-              &.is-selected {
-                font-weight: bold;
-              }
-            }
-          }
-
-          // dropdown state
-          &.is-active {
-
-            .menu {
-              z-index: 1000;
-              display: block;
-              opacity: 1.0;
-            }
-
-            .menu-toggle {
-              z-index: 10000;
-            }
-          }
-
-          // set state
-          &.is-set {
-
-            .menu-toggle {
-              color: $blue;
-            }
-
-            .status-label {
-              display: block;
-              color: $blue;
-            }
-          }
+        [class^="icon-"] {
+          margin-right: ($baseline/2);
         }
       }
     }
+  }
+
+  .content-supplementary {
+    width: flex-grid(3, 12);
+  }
 
 
+  // page header bits
+  .toggle-button-sections {
+    @include font-size(12);
+    display: none;
+    position: relative;
+    float: right;
+    margin-top: ($baseline/4);
+    color: $darkGrey;
+
+    &.is-shown {
+      display: block;
+    }
+
+    [class^="icon-"] {
+      @include font-size(11);
+      border-radius: 20px;
+      position: relative;
+      top: -1px;
+      display: inline-block;
+      margin-right: 2px;
+      line-height: 5px;
+    }
+
+    .label {
+      display: inline-block;
+    }
+  }
+
+
+  // new section, subsection, unit
+  .new-section-name,
+  .new-subsection-name-input {
+    @include font-size(16);
+    display: inline-block;
+    vertical-align: top;
+    width: 515px;
+    padding: ($baseline/4);
+  }
+
+  .new-section-name-save,
+  .new-subsection-name-save {
+    @include blue-button;
+    padding: 4px 20px 7px;
+    margin: 0 5px;
+    color: #fff !important;
+  }
+
+  .new-section-name-cancel,
+  .new-subsection-name-cancel {
+    @include white-button;
+    padding: 4px 20px 7px;
+    color: #8891a1 !important;
+  }
+
+  .new-subsection-item,
+  .new-unit-item {
+    @extend %ui-btn-flat-outline;
+    width: 100%;
+    margin: 0 0 ($baseline/2) 0;
+    border: 1px solid $gray-l3;
+    padding: ($baseline/2) 0;
+    color: $gray-l2;
+
+
+    &:hover {
+      box-shadow: none;
+      background-image: none;
+    }
+  }
+
+  .courseware-unit-new {
+    margin-right: ($baseline*1.5);
+  }
+
+
+  // general action list styles (section and subsection)
+  .expand-collapse {
+    @include transition(all $tmg-f2 linear 0s);
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 ($baseline/4);
+    padding: 0;
+    color: $gray-l2;
+
+    &:hover {
+      color: $blue;
+    }
+
+    .ui-toggle-expansion {
+      @include transition(all $tmg-f2 ease-in-out 0s);
+      @include font-size(18);
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: ($baseline/4);
+      color: $gray-l3;
+    }
+
+    &.expand .ui-toggle-expansion {
+      @include transform(rotate(-90deg));
+      @include transform-origin(50% 50%);
+    }
+
+  }
+
+  .actions-list {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+
+  .actions-item {
+    @include font-size(13);
+    display: inline-block;
+    padding: 0 4px;
+    vertical-align: middle;
+
+    .action {
+      min-width: ($baseline*.75);
+      color: $gray-l2;
+
+      &:hover,
+      &.isset {
+        color: $blue;
+        visibility: visible;
+      }
+
+      //reset old drag handle style
+      &.drag-handle {
+        float: none;
+        margin: 0;
+        background: none;
+        text-align: center;
+      }
+
+    }
+  }
+
+
+  // section styles
   .courseware-section {
     @extend %ui-window;
     @include transition(background $tmg-avg ease-in-out 0);
     position: relative;
-    margin-top: ($baseline);
-    padding-bottom: ($baseline/2);
+    padding: ($baseline*1.5) $baseline $baseline $baseline;
 
     &.collapsed {
-        padding-bottom: 0;
-    }
-
-    label {
-        float: left;
-        line-height: 29px;
-    }
-
-    .datepair {
-        float: left;
-        margin-left: 10px;
-    }
-
-    .section-published-date {
-        position: absolute;
-        top: 19px;
-        right: 80px;
-        padding: 4px 10px;
-        border-radius: 3px;
-        background: $lightGrey;
-        text-align: right;
-
-        .published-status {
-            @include font-size(12);
-            margin-right: 15px;
-
-            strong {
-                font-weight: bold;
-            }
-        }
-
-        .schedule-button {
-            @include blue-button;
-        }
-
-        .edit-button {
-            @include blue-button;
-        }
-
-        .schedule-button,
-        .edit-button {
-            @include font-size(11);
-            padding: 3px 15px 5px;
-        }
-    }
-
-    .datepair .date,
-    .datepair .time {
-        @include font-size(13);
-        box-shadow: none;
-        padding-left: 0;
-        padding-right: 0;
-        border: none;
-        background: none;
-        font-weight: bold;
-        color: $blue;
-        cursor: pointer;
-    }
-
-    .datepair .date {
-        width: 80px;
-    }
-
-    .datepair .time {
-        width: 65px;
+      padding-bottom: 0;
     }
 
     &.collapsed .subsection-list,
@@ -217,44 +191,65 @@
         display: none !important;
     }
 
-    header {
-        min-height: 75px;
+    &.new-section {
+
+      header {
         @include clearfix();
+        height: auto;
+        border-bottom: 0;
+      }
 
-        .item-details, .section-published-date {
+      .expand-collapse {
+        visibility: hidden;
+      }
 
+      .item-details {
+        padding: 25px 0 0 0;
+
+        .section-name {
+          float: none;
+          width: 100%;
+        }
+      }
+    }
+
+    .section {
+      @include clearfix();
+      min-height: 65px; // needed to align with edit input
+      margin-bottom: 0;
+      border: 0;
+      padding: 0;
+
+      // section name area
+      .item-details {
+        @include clearfix();
+        display: inline-block;
+        float: none;
+        padding: 0 0 ($baseline/2) 0;
+
+        .section-name {
+          @include font-size(19);
+          float: left;
+          width: 400px;
+          margin-right: 10px;
         }
 
-        .item-details {
-            display: inline-block;
-            padding: 20px 0 10px 0;
-            @include clearfix();
+        .section-name-span {
+          @include transition(color $tmg-f2 linear 0s);
+          cursor: pointer;
 
-            .section-name {
-              @include font-size(19);
-              float: left;
-              margin-right: 10px;
-              width: 350px;
-              font-weight: bold;
-              color: $blue;
-            }
+          &:hover {
+            color: $blue;
+          }
+        }
 
-            .section-name-span {
-              @include transition(color $tmg-f2 linear 0s);
-              cursor: pointer;
+        .section-name-edit {
+          position: relative;
+          width: 400px;
+          background: $white;
 
-              &:hover {
-                color: $orange;
-              }
-            }
-
-            .section-name-edit {
-              position: relative;
-              width: 400px;
-              background: $white;
-
-              input {
-              @include font-size(16);
+          input {
+            @include font-size(16);
           }
 
           .save-button {
@@ -268,11 +263,43 @@
             padding: 7px 20px 7px;
           }
         }
+      }
+
+
+      // section specific action styles
+      .item-actions {
+        top: 0;
+      }
+
+      .actions-item {
+        padding: 0 0 0 8px;
+
+        &:last-child {
+          padding-right: 4px;
+        }
+
+        &.pubdate {
+          padding-right: 0;
+        }
+
+        .action {
+
+          &.pubdate {
+            visibility: hidden;
+          }
+
+          &:hover,
+          &.isset {
+            color: $blue;
+            visibility: visible;
+          }
+        }
 
         .section-published-date {
-          float: right;
+          padding: 4px 10px;
           border-radius: 3px;
           background: $lightGrey;
+          text-align: right;
 
           .published-status {
             @include font-size(12);
@@ -283,392 +310,286 @@
             }
           }
 
-          .schedule-button {
-            @include blue-button;
-          }
+          &.released .section-published-date {
+            background-color: transparent;
+            color: $gray-l1;
 
-          .edit-button {
-            @include blue-button;
-          }
+            a {
+              color: $gray-l2;
 
-          .schedule-button,
-          .edit-button {
-            @include font-size(11);
-            padding: 0 15px 2px 15px;
-            }
-          }
-
-          .gradable-status {
-            position: absolute;
-            top: 20px;
-            right: 70px;
-            width: 145px;
-
-            .status-label {
-              @include font-size(12);
-              border-radius: 3px;
-              position: absolute;
-              top: 0;
-              right: 2px;
-              display: none;
-              width: 100px;
-              padding: 10px 35px 10px 10px;
-              background: $lightGrey;
-              color: $lightGrey;
-              text-align: right;
-              font-weight: bold;
-              line-height: 16px;
-            }
-
-            .menu-toggle {
-              z-index: 10;
-              position: absolute;
-              top: 2px;
-              right: 5px;
-              padding: 5px;
-              color: $lightGrey;
-
-              &:hover, &.is-active {
+              &:hover {
                 color: $blue;
               }
-
             }
-
-            .menu {
-              @include font-size(12);
-              @include transition(opacity $tmg-f2 linear 0s, display $tmg-f2 linear 0s);
-              border-radius: 4px;
-              box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-              z-index: 1;
-              display: none;
-              opacity: 0.0;
-              position: absolute;
-              top: -1px;
-              left: 2px;
-              margin: 0;
-              padding: 8px 12px;
-              background: $white;
-              border: 1px solid $mediumGrey;
-
-
-
-              li {
-                width: 115px;
-                margin-bottom: 3px;
-                padding-bottom: 3px;
-                border-bottom: 1px solid $lightGrey;
-
-                &:last-child {
-                  margin-bottom: 0;
-                  padding-bottom: 0;
-                  border: none;
-
-                  a {
-                    color: $darkGrey;
-                  }
-                }
-              }
-
-              a {
-
-                &.is-selected {
-                  font-weight: bold;
-                }
-              }
-          }
-
-          // dropdown state
-          &.is-active {
-
-            .menu {
-              z-index: 1000;
-              display: block;
-              opacity: 1.0;
-            }
-
-
-          .menu-toggle {
-            z-index: 10000;
           }
         }
-
-        // set state
-        &.is-set {
-
-          .menu-toggle {
-            color: $blue;
-          }
-
-          .status-label {
-            display: block;
-            color: $blue;
-          }
-        }
-
-        float: left;
-        padding: 21px 0 0;
       }
-    }
-
-        .item-actions {
-            margin-top: 21px;
-            margin-right: 12px;
-
-            .edit-button,
-            .delete-button {
-                margin-top: -3px;
-            }
-        }
-
-        .expand-collapse-icon {
-            @include transition(none);
-            float: left;
-            margin: 25px 6px 16px 16px;
-
-            &.expand {
-                background-position: 0 0;
-            }
-
-            &.collapsed {
-
-            }
-        }
-
-        .drag-handle {
-            margin-left: 11px;
-        }
-    }
-
-    h3 {
-        @include font-size(19);
-        font-weight: 700;
-        color: $blue;
-    }
-
-    .section-name-span {
-        @include transition(color $tmg-f2 linear 0s);
-        cursor: pointer;
-
-        &:hover {
-            color: $orange;
-        }
-    }
-
-    .section-name-form {
-        margin-bottom: 15px;
-    }
-
-    .section-name-edit {
-        input {
-          @include font-size(16);
-        }
-
-        .save-button {
-            @include blue-button;
-            padding: 7px 20px 7px;
-            margin-right: 5px;
-        }
-
-        .cancel-button {
-            @include white-button;
-            padding: 7px 20px 7px;
-        }
-    }
-
-    h4 {
-        @include font-size(12);
-        color: #878e9d;
-
-        strong {
-            font-weight: bold;
-        }
-    }
-
-    .list-header {
-        @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
-        background-color: #ced2db;
-        border-radius: 3px 3px 0 0;
-    }
-
-    .subsection-list {
-        margin: 0 12px;
-
-        > ol {
-            @include tree-view;
-            border-top-width: 0;
-        }
-    }
-
-    &.new-section {
-
-        header {
-            @include clearfix();
-            height: auto;
-        }
-
-        .expand-collapse-icon {
-            visibility: hidden;
-        }
-
-        .item-details {
-          padding: 25px 0 0 0;
-
-          .section-name {
-            float: none;
-            width: 100%;
-          }
-        }
     }
   }
 
-  .toggle-button-sections {
-      @include font-size(12);
-      display: none;
-      position: relative;
-      float: right;
-      margin-top: ($baseline/4);
-      color: $darkGrey;
 
-      &.is-shown {
+  // subsection styles
+  .courseware-subsection {
+    @include clearfix();
+    margin-bottom: 5px;
+
+    &.visible {
+      border-left: 5px solid $green;
+    }
+
+    &.mixed {
+      border-left: 5px solid $yellow-s1;
+    }
+
+    .status {
+      @extend %cont-text-sr;
+    }
+
+    .section-item {
+      @include transition(background $tmg-avg ease-in-out 0);
+      @include font-size(13);
+      position: relative;
+      display: block;
+      background-color: $gray-l5;
+      padding: 6px 8px 8px 16px;
+
+      &:hover {
+        background: $blue-l5;
+
+        .item-actions {
           display: block;
+        }
+      }
+
+      &.editing {
+        background: $orange-l4;
+      }
+    }
+
+    .details {
+      display: block;
+      margin-bottom: 0;
+      width: 600px;
+
+      a {
+        color: $baseFontColor;
+      }
+    }
+  }
+
+  // gradable drop down
+  .gradable-status {
+    display: inline-block;
+    position: relative;
+
+    .status-label {
+      @include font-size(12);
+      width: 110px;
+      padding: 5px 40px 5px 10px;
+      border-radius: 3px;
+      color: transparent;
+      text-align: right;
+      font-weight: bold;
+      line-height: 16px;
+    }
+
+    .menu-toggle {
+      z-index: 10;
+      position: absolute;
+      top: 0;
+      right: 5px;
+      padding: 2px 5px;
+      color: $mediumGrey;
+
+      &:hover,
+      &.is-active {
+        color: $blue;
+      }
+
+      &:focus {
+        outline: 0;
       }
 
       [class^="icon-"] {
-          @include font-size(11);
-          border-radius: 20px;
-          position: relative;
-          top: -1px;
-          display: inline-block;
-          margin-right: 2px;
-          line-height: 5px;
+        vertical-align: middle;
+        margin-top: -5px;
+        display: inline-block;
       }
+    }
 
-      .label {
-          display: inline-block;
-      }
-  }
 
-  .new-section-name,
-  .new-subsection-name-input {
-      width: 515px;
-  }
-
-  .new-section-name-save,
-  .new-subsection-name-save {
-      @include blue-button;
-      padding: 4px 20px 7px;
-      margin: 0 5px;
-      color: #fff !important;
-  }
-
-  .new-section-name-cancel,
-  .new-subsection-name-cancel {
-      @include white-button;
-      padding: 4px 20px 7px;
-      color: #8891a1 !important;
-  }
-
-  .dummy-calendar {
+    // gradable dropdown menu default
+    .menu {
+      @include font-size(12);
+      @include transition(opacity $tmg-f2 linear 0s);
       display: none;
+      opacity: 0.0;
+      z-index: 1;
       position: absolute;
-      top: 55px;
-      left: 110px;
-      z-index: 9999;
-      border: 1px solid #3C3C3C;
-      box-shadow: 0 1px 15px rgba(0, 0, 0, .2);
-  }
+      top: -4px;
+      right: 0;
+      margin: 0;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+      border: 1px solid $mediumGrey;
+      border-radius: 4px;
+      padding: 8px 12px;
+      background: $white;
 
-  .preview {
-      background: url(../img/preview.jpg) center top no-repeat;
-  }
+      li {
+        width: 115px;
+        margin-bottom: 3px;
+        padding-bottom: 3px;
+        border-bottom: 1px solid $lightGrey;
 
-  .edit-subsection-publish-settings {
-      display: none;
-      position: fixed;
-      top: 100px;
-      left: 50%;
-      z-index: 99999;
-      width: 600px;
-      margin-left: -300px;
-      background: #fff;
-      text-align: center;
+        &:last-child {
+          margin-bottom: 0;
+          padding-bottom: 0;
+          border: none;
 
-      .settings {
-          padding: 40px;
-      }
-
-      h3 {
-          @include font-size(34);
-          font-weight: 300;
-      }
-
-      .picker {
-          @include clearfix();
-          margin: 30px 0 65px;
-
-          .field {
-            float: left;
-            margin-right: ($baseline/2);
-
-            &:first-child {
-              margin-left: ($baseline*5);
-            }
-
-            &:last-child {
-              margin-right: 0;
-            }
-
-            label, input {
-              display: block;
-              text-align: left;
-            }
-
-            label {
-              @extend %t-copy-sub1;
-              margin-bottom: ($baseline/4);
-            }
+          .gradable-status-notgraded {
+            color: $darkGrey;
           }
+        }
       }
 
-      .description {
-          @include font-size(14);
-          float: left;
-          margin-top: 30px;
-          line-height: 20px;
-          width: 100%;
+      a {
+        color: $blue;
+
+        &.is-selected {
+          font-weight: bold;
+        }
+      }
+    }
+
+    // gradable dropdown state
+    &.is-active {
+
+      .menu {
+        z-index: 1000;
+        display: block;
+        opacity: 1.0;
       }
 
-      strong {
-          font-weight: 700;
+      .menu-toggle {
+        z-index: 10000;
+      }
+    }
+
+    // set state
+    &.is-set {
+
+      .menu-toggle {
+        color: $blue;
       }
 
-      .start-date,
-      .start-time {
-          @include font-size(19);
-      }
-
-      .save-button {
-          @include blue-button;
-          margin-right: 10px;
-      }
-
-      .cancel-button {
-          @include white-button;
-      }
-
-      .save-button,
-      .cancel-button {
-        @include font-size(16);
+      .status-label {
+        display: block;
+        color: $blue;
       }
+    }
   }
 
-  .collapse-all-button {
-      @include font-size(13);
-      float: right;
-      margin-top: 10px;
-      color: $darkGrey;
+  // unit styles
+  .courseware-unit {
+    margin: ($baseline/4) 0 0 ($baseline*1.75);
+
+    &.add-new-unit {
+      margin-right: ($baseline*1.75);
+    }
+
+    .section-item {
+      border: 0;
+      background-color: $white;
+    }
+
+    .public-item {
+      color: $black;
+    }
+
+    .private-item {
+      color: $gray-l1;
+    }
+
+    .draft-item {
+      color: $yellow-d1;
+    }
+
+    .draft-item:after,
+    .public-item:after,
+    .private-item:after {
+      margin-left: 3px;
+      font-size: 9px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .draft-item:after {
+      content: "- draft";
+    }
+
+    .private-item:after {
+      content: "- private";
+    }
   }
 
+
+  // modal to edit section publish settings
+  .edit-section-publish-settings {
+
+    .picker {
+      @include clearfix();
+
+
+      .field {
+        float: left;
+        margin-right: ($baseline/2);
+
+        label, input {
+          display: block;
+          text-align: left;
+        }
+
+        label {
+          @extend %t-copy-sub1;
+          margin-bottom: ($baseline/4);
+        }
+      }
+    }
+
+    .description {
+      @include font-size(14);
+      float: left;
+      margin-top: 30px;
+      line-height: 20px;
+      width: 100%;
+    }
+
+    strong {
+      font-weight: 700;
+    }
+
+    .start-date,
+    .start-time {
+      @include font-size(19);
+    }
+
+    .save-button {
+      @include blue-button;
+      margin-right: 10px;
+    }
+
+    .cancel-button {
+      @include white-button;
+    }
+
+    .save-button,
+    .cancel-button {
+      @include font-size(16);
+    }
+  }
+
+
+
   // UI: DnD - specific elems/cases - section
   .courseware-section {
 
diff --git a/cms/templates/js/blank-slate-template.underscore b/cms/templates/js/blank-slate-template.underscore
new file mode 100644
index 0000000000..d395d40a42
--- /dev/null
+++ b/cms/templates/js/blank-slate-template.underscore
@@ -0,0 +1,19 @@
+    <section class="courseware-section new-section">
+      <header>
+      <a href="#"  data-tooltip="${_('Collapse/expand this section')}" class="expand-collapse-icon collapse"></a>
+        <div class="item-details">
+          <h3 class="section-name">
+          <span class="section-name-span">Click here to set the section name</span>
+          <form class="section-name-form">
+            <input type="text" value="${_('New Section Name')}" class="new-section-name" />
+            <input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
+                   data-category="${new_section_category}" value="${_('Save')}" />
+            <input type="button" class="new-section-name-cancel" value="$(_('Cancel')}" /></h3>
+          </form>
+        </div>
+        <div class="item-actions">
+          <a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
+          <span data-tooltip="${_('Drag to re-order')}" class="drag-handle"></span>
+        </div>
+      </header>
+    </section>
diff --git a/cms/templates/js/new-section-template.underscore b/cms/templates/js/new-section-template.underscore
new file mode 100644
index 0000000000..2d0cbaefff
--- /dev/null
+++ b/cms/templates/js/new-section-template.underscore
@@ -0,0 +1,15 @@
+    <section class="courseware-section new-section is-collapsible is-draggable">
+      <header>
+      <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
+        <div class="item-details">
+          <h3 class="section-name">
+            <form class="section-name-form">
+              <input type="text" value="New Section Name" class="new-section-name" />
+              <input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
+                     data-category="${new_section_category}" value="Save" />
+              <input type="button" class="new-section-name-cancel" value="Cancel" />
+            </form>
+          </h3>
+        </div>
+      </header>
+    </section>
diff --git a/cms/templates/js/new-subsection-template.underscore b/cms/templates/js/new-subsection-template.underscore
new file mode 100644
index 0000000000..99f94c0464
--- /dev/null
+++ b/cms/templates/js/new-subsection-template.underscore
@@ -0,0 +1,18 @@
+    <li class="collapsed">
+      <div class="section-item editing">
+        <form class="new-subsection-form">
+          <span class="subsection-name">
+            <input type="text" value="${_('New Subsection')}" class="new-subsection-name-input" />
+          </span>
+          <input type="submit" value="${_('Save')}" class="new-subsection-name-save" />
+          <input type="button" value="${_('Cancel')}" class="new-subsection-name-cancel" />
+        </form>
+      </div>
+      <ol>
+        <li>
+          <a href="unit.html" class="new-unit-item">
+            <i class="icon-plus"></i> ${_('New Unit')}
+          </a>
+        </li>
+      </ol>
+    </li>
diff --git a/cms/templates/js/no-outline-content.underscore b/cms/templates/js/no-outline-content.underscore
new file mode 100644
index 0000000000..5d4774dd65
--- /dev/null
+++ b/cms/templates/js/no-outline-content.underscore
@@ -0,0 +1,3 @@
+<div class="no-outline-content">
+    <p><%= gettext("You haven't added any sections to your course outline.") %><a href="#" class="button new-button"><i class="icon-plus"></i><%= gettext("Add your first section") %></a></p>
+</div>
diff --git a/cms/templates/overview.html b/cms/templates/overview.html
index 61b00278a4..adc1e59ccb 100644
--- a/cms/templates/overview.html
+++ b/cms/templates/overview.html
@@ -7,7 +7,7 @@
   from xmodule.modulestore.django import loc_mapper
 %>
 <%block name="title">${_("Course Outline")}</%block>
-<%block name="bodyclass">is-signedin course view-outline</%block>
+<%block name="bodyclass">is-signedin course view-outline feature-edit-dialog</%block>
 
 <%namespace name='static' file='static_content.html'/>
 <%namespace name="units" file="widgets/units.html" />
@@ -49,64 +49,71 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
 
 <%block name="header_extras">
   <script type="text/template" id="new-section-template">
-    <section class="courseware-section branch new-section">
+    <section class="courseware-section new-section is-collapsible is-draggable">
       <header>
-      <a href="#"  data-tooltip="${_('Collapse/expand this section')}" class="expand-collapse-icon collapse"></a>
+      <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
         <div class="item-details">
           <h3 class="section-name">
-          <form class="section-name-form">
-            <input type="text" value="${_('New Section Name')}" class="new-section-name" />
-            <input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
-                   data-category="${new_section_category}" value="${_('Save')}" />
-            <input type="button" class="new-section-name-cancel" value="${_('Cancel')}" /></h3>
-          </form>
+            <form class="section-name-form">
+              <input type="text" value="${_('New Section Name')}" class="new-section-name" />
+              <input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
+                     data-category="${new_section_category}" value="${_('Save')}" />
+              <input type="button" class="new-section-name-cancel" value="${_('Cancel')}" />
+            </form>
+          </h3>
         </div>
       </header>
     </section>
   </script>
 
+
   <script type="text/template" id="blank-slate-template">
-    <section class="courseware-section branch new-section">
-      <header>
-      <a href="#"  data-tooltip="${_('Collapse/expand this section')}" class="expand-collapse-icon collapse"></a>
-        <div class="item-details">
-          <h3 class="section-name">
-          <span class="section-name-span">Click here to set the section name</span>
-          <form class="section-name-form">
-            <input type="text" value="${_('New Section Name')}" class="new-section-name" />
-            <input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
-                   data-category="${new_section_category}" value="${_('Save')}" />
-            <input type="button" class="new-section-name-cancel" value="$(_('Cancel')}" /></h3>
-          </form>
-        </div>
-        <div class="item-actions">
-          <a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
-          <span data-tooltip="${_('Drag to re-order')}" class="drag-handle"></span>
-        </div>
-      </header>
-    </section>
+  <section class="courseware-section new-section">
+    <header>
+      <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
+      <div class="item-details">
+        <h3 class="section-name">
+        <span class="section-name-span">Click here to set the section name</span>
+        <form class="section-name-form">
+          <input type="text" value="${_('New Section Name')}" class="new-section-name" />
+          <input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
+                 data-category="${new_section_category}" value="${_('Save')}" />
+          <input type="button" class="new-section-name-cancel" value="$(_('Cancel')}" /></h3>
+        </form>
+      </div>
+      <div class="item-actions">
+        <a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
+        <span data-tooltip="${_('Drag to re-order')}" class="drag-handle"></span>
+      </div>
+    </header>
+  </section>
   </script>
 
   <script type="text/template" id="new-subsection-template">
-    <li class="branch collapsed">
-      <div class="section-item editing">
-        <form class="new-subsection-form">
-          <span class="folder-icon"></span>
-          <span class="subsection-name">
-            <input type="text" value="${_('New Subsection')}" class="new-subsection-name-input" />
-          </span>
-          <input type="submit" value="${_('Save')}" class="new-subsection-name-save" />
-          <input type="button" value="${_('Cancel')}" class="new-subsection-name-cancel" />
-        </form>
-      </div>
-      <ol>
-        <li>
-          <a href="unit.html" class="new-unit-item">
-            <span class="new-unit-icon"></span>${_('New Unit')}
-          </a>
-        </li>
-      </ol>
-    </li>
+  <li class="collapsed">
+    <div class="section-item editing">
+      <form class="new-subsection-form">
+        <span class="subsection-name">
+          <input type="text" value="${_('New Subsection')}" class="new-subsection-name-input" />
+        </span>
+        <input type="submit" value="${_('Save')}" class="new-subsection-name-save" />
+        <input type="button" value="${_('Cancel')}" class="new-subsection-name-cancel" />
+      </form>
+    </div>
+    <ol>
+      <li>
+        <a href="unit.html" class="new-unit-item">
+          <i class="icon-plus"></i> ${_('New Unit')}
+        </a>
+      </li>
+    </ol>
+  </li>
+  </script>
+
+  <script type="text/template" id="no-outline-content">
+  <div class="no-outline-content">
+      <p>${_("You haven't added any sections to your course outline yet.")} <a href="#" class="button new-button"><i class="icon-plus"></i>${_("Add your first section")}</a></p>
+  </div>
   </script>
 </%block>
 
@@ -135,130 +142,182 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
     </header>
   </div>
 
-  <div class="main-wrapper">
-    <div class="inner-wrapper">
+  <div class="wrapper-content wrapper">
+    <section class="content">
+      <article class="content-primary" role="main">
 
-      <div class="wrapper-dnd">
-        <%
-          course_locator = loc_mapper().translate_location(
-            context_course.location.course_id, context_course.location, False, True
-          )
-        %>
-        <article class="courseware-overview" data-locator="${course_locator}">
-          % for section in sections:
-          <%
-            section_locator = loc_mapper().translate_location(
-              context_course.location.course_id, section.location, False, True
-            )
-          %>
-          <section class="courseware-section branch is-draggable" data-parent="${course_locator}"
-                   data-locator="${section_locator}">
-            <%include file="widgets/_ui-dnd-indicator-before.html" />
+          <div class="wrapper-dnd">
+            <%
+              course_locator = loc_mapper().translate_location(
+                context_course.location.course_id, context_course.location, False, True
+              )
+            %>
+            <article class="courseware-overview" data-locator="${course_locator}">
+              % for section in sections:
+              <%
+                section_locator = loc_mapper().translate_location(
+                  context_course.location.course_id, section.location, False, True
+                )
+              %>
+              <section class="courseware-section is-collapsible is-draggable" data-parent="${course_locator}"
+                       data-locator="${section_locator}">
+                <%include file="widgets/_ui-dnd-indicator-before.html" />
 
-            <header>
-            <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="expand-collapse-icon collapse"></a>
+                <header class="section">
+                  <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
 
-              <div class="item-details" data-locator="${section_locator}">
-                <h3 class="section-name" data-name="${section.display_name_with_default | h}"></h3>
-                <div class="section-published-date">
-                  <%
-                    if section.start is not None:
-                        start_date_str = section.start.strftime('%m/%d/%Y')
-                        start_time_str = section.start.strftime('%H:%M')
-                    else:
-                        start_date_str = ''
-                        start_time_str = ''
-                  %>
-                  %if section.start is None:
-                    <span class="published-status">${_("This section has not been released.")}</span>
-                    <a href="#" class="schedule-button" data-date="" data-time="" data-locator="${section_locator}">${_("Schedule")}</a>
-                  %else:
-                    <span class="published-status"><strong>${_("Will Release:")}</strong>
-                    ${date_utils.get_default_time_display(section.start)}</span>
-                    <a href="#" class="edit-button" data-date="${start_date_str}"
-                      data-time="${start_time_str}" data-locator="${section_locator}">${_("Edit")}</a>
-                  %endif
-                </div>
-              </div>
-
-              <div class="item-actions">
-                <a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
-                <span data-tooltip="${_('Drag to reorder')}" class="drag-handle section-drag-handle"></span>
-              </div>
-            </header>
-            <div class="subsection-list">
-              <div class="list-header">
-                <a href="#" class="new-subsection-item" data-category="${new_subsection_category}">
-                  <span class="new-folder-icon"></span>${_("New Subsection")}
-                </a>
-              </div>
-              <ol class="sortable-subsection-list">
-                % for subsection in section.get_children():
-                  <%
-                    subsection_locator = loc_mapper().translate_location(
-                      context_course.location.course_id, subsection.location, False, True
-                    )
-                  %>
-                <li class="courseware-subsection branch collapsed id-holder is-draggable"
-                    data-parent="${section_locator}" data-locator="${subsection_locator}">
-
-                  <%include file="widgets/_ui-dnd-indicator-before.html" />
-
-                  <div class="section-item">
-                    <div class="details">
-                      <a href="#" data-tooltip="${_('Expand/collapse this subsection')}" class="expand-collapse-icon expand"></a>
-                      <a href="${subsection_locator.url_reverse('subsection')}">
-                        <span class="folder-icon"></span>
-                        <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
-                      </a>
-                    </div>
-
-                    <div class="gradable-status" data-initial-status="${subsection.format if subsection.format is not None else _('Not Graded')}">
-                    </div>
-
-                    <div class="item-actions">
-                      <a href="#" data-tooltip="${_('Delete this subsection')}" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>
-                      <span data-tooltip="${_('Drag to reorder')}" class="drag-handle subsection-drag-handle"></span>
-                    </div>
+                  <div class="item-details" data-locator="${section_locator}">
+                    <h3 class="section-name" data-name="${section.display_name_with_default | h}"></h3>
                   </div>
-                  ${units.enum_units(subsection)}
+                  <div class="item-actions">
 
-                  <%include file="widgets/_ui-dnd-indicator-after.html" />
-                </li>
-                % endfor
-                <li class="ui-splint ui-splint-indicator">
-                  <%include file="widgets/_ui-dnd-indicator-initial.html" />
-                </li>
-              </ol>
-            </div>
+                    <ul class="actions-list">
 
-            <%include file="widgets/_ui-dnd-indicator-after.html" />
-          </section>
-          % endfor
-        </article>
-      </div>
-    </div>
+                      <li class="actions-item pubdate">
+                        <div class="section-published-date">
+                          <%
+                            if section.start is not None:
+                                start_date_str = section.start.strftime('%m/%d/%Y')
+                                start_time_str = section.start.strftime('%H:%M')
+                            else:
+                                start_date_str = ''
+                                start_time_str = ''
+                          %>
+                          %if section.start is None:
+                            <span class="published-status">${_("This section is not scheduled for release")}</span>
+                            <a href="#" class="edit-release-date action" data-date="" data-time="" data-locator="${section_locator}"><i class="icon-time"></i> <span class="sr">${_("Schedule")}</span></a>
+                          %else:
+                            <span class="published-status"><strong>${_("Release date:")}</strong>
+                            ${date_utils.get_default_time_display(section.start)}</span>
+                            <a href="#" class="edit-release-date action" data-date="${start_date_str}" data-time="${start_time_str}" data-locator="${section_locator}"><i class="icon-time"></i> <span class="sr">${_("Edit section release date")}</span></a>
+                          %endif
+                        </div>
+                      </li>
+                      <li class="actions-item delete">
+                        <a href="#" data-tooltip="${_('Delete this section')}" class="action delete-section-button"><i class="icon-trash"></i> <span class="sr">Delete section</span></a>
+                      </li>
+                      <li class="actions-item drag">
+                        <span data-tooltip="${_('Drag to reorder')}" class="drag-handle section-drag-handle action"><i class="icon-ellipsis-vertical"></i><span class="sr"> ${_("Drag to reorder section")}</span></span>
+                      </li>
+                    </ul>
+                  </div>
+                </header>
+                <div class="subsection-list">
+
+                  <ol class="sortable-subsection-list">
+                    % for subsection in section.get_children():
+                      <%
+                        subsection_locator = loc_mapper().translate_location(
+                          context_course.location.course_id, subsection.location, False, True
+                        )
+                      %>
+                    <li class="courseware-subsection collapsed id-holder is-draggable"
+                        data-parent="${section_locator}" data-locator="${subsection_locator}">
+
+                      <%include file="widgets/_ui-dnd-indicator-before.html" />
+
+                      <div class="section-item">
+                        <div class="details">
+                        <a href="#" data-tooltip="${_('Expand/collapse this subsection')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this subsection')}</span></a>
+                          <a href="${subsection_locator.url_reverse('subsection')}">
+                            <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
+                          </a>
+                        </div>
+
+                        <div class="item-actions">
+
+                          <ul class="actions-list">
+                            <li class="actions-item grades">
+                              <div class="gradable-status" data-initial-status="${subsection.format if subsection.format is not None else _('Not Graded')}"></div>
+                            </li>
+                            <li class="actions-item delete">
+                              <a href="#" data-tooltip="${_('Delete this subsection')}" class="action delete-subsection-button"><i class="icon-trash"></i> <span class="sr">${_("Delete subsection")}</span></a>
+                            </li>
+                            <li class="actions-item drag">
+                              <span data-tooltip="${_('Drag to reorder')}" class="drag-handle subsection-drag-handle action"><i class="icon-ellipsis-vertical"></i></span>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                      ${units.enum_units(subsection)}
+
+                      <%include file="widgets/_ui-dnd-indicator-after.html" />
+                    </li>
+                    % endfor
+                    <li class="ui-splint ui-splint-indicator">
+                      <%include file="widgets/_ui-dnd-indicator-initial.html" />
+                    </li>
+                  </ol>
+
+                  <div class="list-header new-subsection">
+                    <a href="#" class="new-subsection-item" data-category="${new_subsection_category}">
+                      <i class="icon-plus"></i> ${_("New Subsection")}
+                    </a>
+                  </div>
+
+                </div>
+
+                <%include file="widgets/_ui-dnd-indicator-after.html" />
+              </section>
+              % endfor
+            </article>
+          </div>
+
+      </article>
+      <aside class="content-supplementary" role="complimentary">
+        <div class="bit">
+          <h3 class="title-3">${_("What can I do on this page?")}</h3>
+          <p>${_("You can create new sections and subsections, set the release date for sections, and create new units in existing subsections.  You can set the assignment type for subsections that are to be graded, and you can open a subsection for further editing.")}</p>
+
+            <p>${_("In addition, you can drag and drop sections, subsections, and units to reorganize your course.")}</p>
+        </div>
+      </aside>
+    </section>
   </div>
   <footer></footer>
 
-  <div class="edit-subsection-publish-settings showAsModal">
-    <div class="settings">
-      <h3>${_("Section Release Date")}</h3>
-      <div class="picker datepair">
-        <div class="field field-start-date">
-          <label for="">${_("Release Day")}</label>
-          <input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
-        </div>
-        <div class="field field-start-time">
-          <label for="">${_("Release Time")} (<abbr title="${_("Coordinated Universal Time")}">UTC</abbr>)</label>
-          <input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
-        </div>
+    <div
+      class="wrapper wrapper-dialog wrapper-dialog-edit-sectionrelease edit-section-publish-settings"
+      aria-describedby="dialog-edit-sectionrelease-description"
+      aria-labelledby="dialog-edit-sectionrelease-title"
+      aria-hidden=""
+      role="dialog">
+      <div class="dialog confirm">
+
+        <form class="edit-sectionrelease-dialog" method="POST" action="#" enctype="multipart/form-data">
+          <div class="form-content">
+          <h2 class="title dialog-edit-sectionrelease-title">${_("Section Release Date")}</h2>
+          <p id="dialog-edit-sectionrelease-description" class="message">${_('On the date set below, this section - {name} - will be released to students. Any units marked private will only be visible to admins.').format(name='<strong class="section-name"></strong>')}</p>
+
+            <ul class="list-input picker datepair">
+              <li class="field field-start-date">
+                <label for="start_date">${_("Release Day")}</label>
+                <input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
+              </li>
+              <li class="field field-start-time">
+                <label for="start_time">${_("Release Time")} (<abbr title="${_("Coordinated Universal Time")}">UTC</abbr>)</label>
+                <input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
+              </li>
+            </ul>
+
+          </div>
+
+          <div class="actions">
+            <h3 class="sr">${_("Form Actions")}</h3>
+          <ul>
+          <li class="action-item">
+            <a href="#" class="button action-primary action-save">${_("Save")}</a>
+          </li>
+          <li class="action-item">
+            <a href="#" class="button action-secondary action-cancel">${_("Cancel")}</a>
+          </li>
+          </ul>
+          </div>
+        </form>
 
-        <div class="description">
-          <p>${_('On the date set above, this section - {name} - will be released to students. Any units marked private will only be visible to admins.').format(name='<strong class="section-name"></strong>')}</p>
-        </div>
       </div>
-      <a href="#" class="save-button">${_("Save")}</a><a href="#" class="cancel-button">${_("Cancel")}</a>
-    </div>
   </div>
+
+
+
 </%block>
diff --git a/cms/templates/unit.html b/cms/templates/unit.html
index 2318e9cd97..5c613d4d0b 100644
--- a/cms/templates/unit.html
+++ b/cms/templates/unit.html
@@ -191,7 +191,6 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
                 <ol>
                   <li>
                     <a href="${subsection_url}" class="section-item">
-                      <span class="folder-icon"></span>
                       <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
                     </a>
                     ${units.enum_units(subsection, actions=False, selected=unit.location)}
diff --git a/cms/templates/widgets/units.html b/cms/templates/widgets/units.html
index edc32ed947..f5f35736cb 100644
--- a/cms/templates/widgets/units.html
+++ b/cms/templates/widgets/units.html
@@ -18,7 +18,7 @@ This def will enumerate through a passed in subsection and list all of the units
   <%
     unit_locator = loc_mapper().translate_location(context_course.location.course_id, unit.location, False, True)
   %>
-  <li class="courseware-unit leaf unit is-draggable" data-locator="${unit_locator}"
+  <li class="courseware-unit unit is-draggable" data-locator="${unit_locator}"
       data-parent="${subsection_locator}">
 
     <%include file="_ui-dnd-indicator-before.html" />
@@ -32,14 +32,18 @@ This def will enumerate through a passed in subsection and list all of the units
     %>
     <div class="section-item ${selected_class}">
       <a href="${unit_locator.url_reverse('unit')}" class="${unit_state}-item">
-        <span class="${unit.scope_ids.block_type}-icon"></span>
         <span class="unit-name">${unit.display_name_with_default}</span>
       </a>
       % if actions:
       <div class="item-actions">
-	<a href="#" data-tooltip="Delete this unit" class="delete-button" data-locator="${unit_locator}">
-        <span class="delete-icon"></span></a>
-	<span data-tooltip="Drag to sort" class="drag-handle unit-drag-handle"></span>
+        <ul class="actions-list">
+          <li class="actions-item delete">
+            <a href="#" data-tooltip="Delete this unit" class="delete-unit-button action" data-locator="${unit_locator}"><i class="icon-trash"></i><span class="sr">Delete unit</span></a>
+          </li>
+          <li class="actions-item drag">
+            <span data-tooltip="Drag to sort" class="drag-handle unit-drag-handle action"><i class="icon-ellipsis-vertical"></i></span>
+          </li>
+        </ul>
       </div>
       % endif
     </div>
@@ -47,11 +51,11 @@ This def will enumerate through a passed in subsection and list all of the units
     <%include file="_ui-dnd-indicator-after.html" />
   </li>
   % endfor
-  <li>
+  <li class="courseware-unit add-new-unit">
     <%include file="_ui-dnd-indicator-initial.html" />
 
     <a href="#" class="new-unit-item" data-category="${new_unit_category}" data-parent="${subsection_locator}">
-      <span class="new-unit-icon"></span>New Unit
+      <i class="icon-plus"></i> New Unit
     </a>
   </li>
 </ol>
diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss
index 7a3cb1633d..b59d193d5f 100644
--- a/common/static/sass/_mixins-inherited.scss
+++ b/common/static/sass/_mixins-inherited.scss
@@ -354,8 +354,8 @@
 }
 
 @mixin tree-view {
-  border: 1px solid $mediumGrey;
-  background: $lightGrey;
+  border: 0;
+  background: $white;
 
   .branch {
     margin-bottom: 0;
@@ -374,7 +374,7 @@
     font-size: 13px;
 
     &:hover {
-      background: $orange-l4;
+      background: $blue-l5;
 
       .item-actions {
         display: block;
@@ -403,11 +403,11 @@
     }
 
     .private-item {
-      color: #a4aab7;
+      color: $gray-l1;
     }
 
     .draft-item {
-      color: #9f7d10;
+      color: $yellow-d1;
     }
   }