studio - restyling course basic details and adding in a course's URL more prominently WIP

cms/static/sass/elements/_controls.scss

@@ -97,7 +97,7 @@
   color: $blue;
 
   &:hover, &:active {
-    background: $blue-l3;
+    background: $blue-l4;
     color: $blue-s2;
   }
 

cms/static/sass/elements/_forms.scss

@@ -8,11 +8,11 @@ input[type="password"],
 textarea.text {
   padding: 6px 8px 8px;
   @include box-sizing(border-box);
-  border: 1px solid $mediumGrey;
+  border: 1px solid $gray-l2;
   border-radius: 2px;
-  @include linear-gradient($lightGrey, tint($lightGrey, 90%));
-  background-color: $lightGrey;
-  @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+  @include linear-gradient($gray-l5, $white);
+  background-color: $gray-l5;
+  @include box-shadow(inset 0 1px 2px $shadow-l1);
   font-family: 'Open Sans', sans-serif;
   font-size: 11px;
   color: $baseFontColor;
@@ -21,7 +21,7 @@ textarea.text {
   &::-webkit-input-placeholder,
   &:-moz-placeholder,
   &:-ms-input-placeholder {
-      color: #979faf;
+      color: $gray-l2;
   }
 
   &:focus {
@@ -39,7 +39,7 @@ textarea.text {
    color: $gray-d2;
   }
 
-  input, textarea {
+  label, input, textarea {
     pointer-events: none;
   }
 }
@@ -61,8 +61,31 @@ form {
 
   .note {
     @include box-sizing(border-box);
-    padding: $baseline;
-    background: $gray-l4;
+
+    .title {
+
+    }
+
+    .copy {
+
+    }
+
+    // note with actions
+    &.has-actions {
+      @include clearfix();
+
+      .title {
+
+      }
+
+      .copy {
+
+      }
+
+      .list-actions {
+
+      }
+    }
   }
 
   .note-promotion {

cms/static/sass/views/_settings.scss

@@ -147,7 +147,7 @@ body.course.settings {
         }
 
         label {
-          @include font-size(14);
+          @extend .t-copy-sub1;
           @include transition(color, 0.15s, ease-in-out);
           margin: 0 0 ($baseline/4) 0;
           font-weight: 400;
@@ -243,12 +243,31 @@ body.course.settings {
 
       .list-input {
         @include clearfix();
+        padding: 0 ($baseline/2);
 
         .field {
           margin-bottom: 0;
         }
       }
 
+      // course details that should appear more like content than elements to change
+      .field.is-not-editable {
+
+        label {
+
+        }
+
+        input, textarea {
+          @extend .t-copy-lead1;
+          @include box-shadow(none);
+          border: none;
+          background: none;
+          padding: 0;
+          margin: 0;
+          font-weight: 600;
+        }
+      }
+
       #field-course-organization {
         float: left;
         width: flex-grid(2, 9);
@@ -265,6 +284,52 @@ body.course.settings {
         float: left;
         width: flex-grid(5, 9);
       }
+
+      // course link note
+      .note-promotion-courseURL {
+        @include box-shadow(0 1px 1px $shadow-l1);
+        @include border-radius(($baseline/5));
+        margin-top: ($baseline*1.5);
+        border: 1px solid $gray-l3;
+        padding: ($baseline/2) 0 0 0;
+
+        .title {
+          @extend .t-copy-sub1;
+          margin: 0 0 ($baseline/10) 0;
+          padding: 0 ($baseline/2);
+        }
+
+        .copy {
+          padding: 0 ($baseline/2) ($baseline/2) ($baseline/2);
+
+          .link-courseURL {
+            @extend .t-copy-lead1;
+
+            &:hover {
+
+            }
+          }
+        }
+
+        .list-actions {
+          @include box-shadow(inset 0 1px 1px $shadow-l1);
+          border-top: 1px solid $gray-l4;
+          padding:  ($baseline/2);
+          background: $gray-l5;
+
+          .action-primary {
+            @include blue-button();
+            @include font-size(13);
+
+            .icon {
+              @extend .t-icon;
+              @include font-size(16);
+              display: inline-block;
+              vertical-align: middle;
+            }
+          }
+        }
+      }
     }
 
     // specific fields - schedule

cms/templates/settings.html

@@ -67,20 +67,6 @@ from contentstore import utils
             <span class="tip">The nuts and bolts of your course</span>
           </header>
 
-          <div class="note note-promotion note-promotion-courseURL">
-            <h3 class="title">Your Course's Live URL</h3>
-            <div class="copy">
-              <p>Students can enroll in and access ${context_course.display_name_with_default} at: <a rel="external" href="${utils.get_lms_link_for_about_page(course_location)}" />${utils.get_lms_link_for_about_page(course_location)}</a></p>
-            </div>
-
-            <ul class="list-actions">
-              <li class="action-item">
-                <a href="" class="action action-primary"><i class="ss-icon icon ss-symbolicons-block icon icon-inline icon-announcement">&#xEC00;</i> Download Studio Documentation</a>
-                <span class="tip">How to use Studio to build your course</span>
-              </li>
-            </ul>
-          </div>
-
           <ol class="list-input">
             <li class="field text is-not-editable" id="field-course-organization">
               <label for="course-organization">Organization</label>
@@ -97,6 +83,19 @@ from contentstore import utils
               <input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-name" value="[Course Name]" readonly />
             </li>
           </ol>
+
+          <div class="note note-promotion note-promotion-courseURL has-actions">
+            <h3 class="title">Course URL (for student enrollment and access)</h3>
+            <div class="copy">
+              <p><a class="link-courseURL" rel="external" href="${utils.get_lms_link_for_about_page(course_location)}" />${utils.get_lms_link_for_about_page(course_location)}</a></p>
+            </div>
+
+            <ul class="list-actions">
+              <li class="action-item">
+                <a title="Send a note to students via email" href="mailto:john.doe@gmail.com?Subject=Enroll%20in%20COURSENAME&body=Hi,%20COURSENAME,%20provided%20by%20edX,%20is%20almost%20ready%20to%20begin.%20Please%20enroll%20for%20this%20course%20at%20${utils.get_lms_link_for_about_page(course_location)}." class="action action-primary"><i class="ss-icon icon ss-symbolicons-standard icon icon-inline icon-announcement">&#x2709;</i> Send an invitation to your students</a>
+              </li>
+            </ul>
+          </div>
         </section>
 
         <hr class="divide" />