Studio: adding rendering/styling of course start date on outline view

cms/static/sass/views/_outline.scss

@@ -171,6 +171,49 @@
     @extend %expand-collapse;
   }
 
+  // course status
+  // --------------------
+  .course-status {
+    margin-bottom: $baseline;
+
+    .status-release {
+      @extend %t-copy-base;
+      display: inline-block;
+      color: $color-copy-base;
+    }
+
+    .status-release-label,
+    .status-release-value,
+    .status-actions {
+      display: inline-block;
+      vertical-align: middle;
+      margin-bottom: 0;
+    }
+
+    .status-release-label {
+      margin-right: ($baseline/4);
+    }
+
+    .status-release-value {
+      @extend %t-strong;
+    }
+
+    .status-actions {
+      @extend %actions-list;
+      @include transition(opacity $tmg-f1 ease-in-out 0);
+      margin-left: ($baseline/4);
+      opacity: 0.0;
+    }
+
+    // STATE: hover
+    &:hover {
+
+      .status-actions {
+        opacity: 1.0;
+      }
+    }
+  }
+
   // outline
   // --------------------
   .outline {

cms/templates/course_outline.html

@@ -42,7 +42,6 @@ from contentstore.utils import reverse_usage_url
         <h1 class="page-header">
             <small class="subtitle">${_("Content")}</small>
             <span class="sr">&gt; </span>${_("Course Outline")}
-            <span><a href="${settings_url}">${course_release_date}</a></span>
         </h1>
 
         <nav class="nav-actions">
@@ -71,10 +70,27 @@ from contentstore.utils import reverse_usage_url
 <div class="wrapper-content wrapper">
     <section class="content">
         <article class="content-primary" role="main">
+            <div class="course-status">
+                <div class="status-release">
+                    <h2 class="status-release-label">${_("Course Start Date:")}</h2>
+                    <p class="status-release-value">${course_release_date}</p>
+
+                    <ul class="status-actions">
+                      <li class="action-item action-edit">
+                        <a href="${settings_url}" class="edit-button action-button" data-tooltip="${_("Edit Start Date")}">
+                            <i class="icon-pencil"></i>
+                            <span class="action-button-text sr">${_("Edit Start Date")}</span>
+                        </a>
+                      </li>
+                    </ul>
+                </div>
+            </div>
+
             <div class="wrapper-dnd">
                 <%
                 course_locator = context_course.location
                 %>
+                <h2 class="sr">${_("Course Outline")}</h2>
                 <article class="outline outline-course" data-locator="${course_locator}" data-course-key="${course_locator.course_key}">
                 </article>
             </div>