LMS: preps track selection view for upgrade cases

common/templates/course_modes/choose.html

@@ -2,7 +2,7 @@
 <%! from django.core.urlresolvers import reverse %>
 <%inherit file="../main.html" />
 
-<%block name="bodyclass">register verification-process step-select-track</%block>
+<%block name="bodyclass">register verification-process step-select-track ${'is-upgrading' if upgrade else ''}</%block>
 <%block name="title"><title>${_("Register for {} | Choose Your Track").format(course_name)}</title></%block>
 
 <%block name="js_extra">
@@ -48,7 +48,10 @@ $(document).ready(function() {
 
     <div class="wrapper-register-choose wrapper-content-main">
       <article class="register-choose content-main">
+
+        %if not upgrade:
         <h3 class="title">${_("Select your track:")}</h3>
+        %endif
 
         <form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
 
@@ -133,25 +136,29 @@ $(document).ready(function() {
           </div>
           % endif
 
-          % if "audit" in modes:
-          <span class="deco-divider">
-            <span class="copy">${_("or")}</span>
-          </span>
-          <div class="register-choice register-choice-audit">
-            <div class="wrapper-copy">
-              <h4 class="title">${_("Audit This Course")}</h4>
-              <div class="copy">
-                <p>${_("Sign up to audit this course for free and track your own progress.")}</p>
-              </div>
-            </div>
+          %if not upgrade:
 
-            <ul class="list-actions">
-              <li class="action action-select">
-                <input type="submit" name="mode" value="Select Audit" />
-              </li>
-            </ul>
-          </div>
-          % endif
+            % if "audit" in modes:
+            <span class="deco-divider">
+              <span class="copy">${_("or")}</span>
+            </span>
+            <div class="register-choice register-choice-audit">
+              <div class="wrapper-copy">
+                <h4 class="title">${_("Audit This Course")}</h4>
+                <div class="copy">
+                  <p>${_("Sign up to audit this course for free and track your own progress.")}</p>
+                </div>
+              </div>
+
+              <ul class="list-actions">
+                <li class="action action-select">
+                  <input type="submit" name="mode" value="Select Audit" />
+                </li>
+              </ul>
+            </div>
+            % endif
+
+          %endif
 
           <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
         </form>

lms/static/sass/views/_verification.scss

@@ -1,6 +1,95 @@
 // lms - views - verification flow
 // ====================
 
+// MISC: extends - type
+// application: canned headings
+%hd-lv1 {
+  @extend %t-title1;
+  @extend %t-weight1;
+  color: $m-gray-d4;
+  margin: 0 0 ($baseline*2) 0;
+}
+
+%hd-lv2 {
+  @extend %t-title4;
+  @extend %t-weight1;
+  margin: 0 0 ($baseline*0.75) 0;
+  border-bottom: 1px solid $m-gray-l4;
+  padding-bottom: ($baseline/2);
+  color: $m-gray-d4;
+}
+
+%hd-lv3 {
+  @extend %t-title6;
+  @extend %t-weight4;
+  margin: 0 0 ($baseline/4) 0;
+  color: $m-gray-d4;
+}
+
+%hd-lv4 {
+  @extend %t-title6;
+  @extend %t-weight2;
+  margin: 0 0 $baseline 0;
+  color: $m-gray-d4;
+}
+
+%hd-lv5 {
+  @extend %t-title7;
+  @extend %t-weight4;
+  margin: 0 0 ($baseline/4) 0;
+  color: $m-gray-d4;
+}
+
+// application: canned copy
+%copy-base {
+  @extend %t-copy-base;
+  color: $m-gray-d2;
+}
+
+%copy-lead1 {
+  @extend %t-copy-lead2;
+  color: $m-gray;
+}
+
+%copy-detail {
+  @extend %t-copy-sub1;
+  @extend %t-weight3;
+  color: $m-gray-d1;
+}
+
+%copy-metadata {
+  @extend %t-copy-sub2;
+  color: $m-gray-d1;
+
+
+  %copy-metadata-value {
+    @extend %t-weight2;
+  }
+
+  %copy-metadata-value {
+    @extend %t-weight4;
+  }
+}
+
+// application: canned links
+%copy-link {
+  border-bottom: 1px dotted transparent;
+
+  &:hover, &:active {
+    border-color: $link-color-d1;
+  }
+}
+
+%copy-badge {
+  @extend %t-title8;
+  @extend %t-weight5;
+  border-radius: ($baseline/5);
+  padding: ($baseline/2) $baseline;
+  text-transform: uppercase;
+}
+
+// ====================
+
 // MISC: extends - button
 %btn-verify-primary {
   @extend %btn-primary-green;
@@ -72,7 +161,7 @@
 // ====================
 
 // VIEW: all verification steps
-.register.verification-process {
+.verification-process {
 
   // reset: box-sizing (making things so right its scary)
   * {
@@ -388,11 +477,12 @@
 
       .sts-label {
         @extend %t-title7;
+        @extend %t-weight4;
         display: block;
         margin-bottom: ($baseline/2);
         border-bottom: ($baseline/10) solid $m-gray-l4;
         padding-bottom: ($baseline/2);
-        color: $m-gray;
+        color: $m-gray-d1;
       }
 
       .sts-course {
@@ -1816,3 +1906,11 @@
     width: 32% !important;
   }
 }
+
+// STATE: upgrading registration type
+.register.is-upgrading {
+
+  .form-register-choose {
+    margin-top: ($baseline*2);
+  }
+}

lms/templates/verify_student/_verification_header.html

@@ -2,7 +2,11 @@
 
 <header class="page-header">
   <h2 class="title">
-    <span class="sts-label">${_("You are registering for")}</span>
+    %if upgrade:
+      <span class="sts-label">${_("You are upgrading your registration for")}</span>
+    %else:
+      <span class="sts-label">${_("You are registering for")}</span>
+    %endif
 
     <span class="wrapper-sts">
       <span class="sts-course">

lms/templates/verify_student/_verification_support.html

@@ -18,7 +18,7 @@
       </li>
 
       <li class="help-item help-item-technical">
-        <h3 class="title">${_("Having Technical Trouble?")}</h3>
+        <h3 class="title">${_("Technical Requirements")}</h3>
         <div class="copy">
           <p>${_("Please make sure your browser is updated to the {strong_start}{a_start}most recent version possible{a_end}{strong_end}. Also, please make sure your {strong_start}web cam is plugged in, turned on, and allowed to function in your web browser (commonly adjustable in your browser settings).{strong_end}").format(a_start='<a rel="external" href="http://browsehappy.com/">', a_end="</a>", strong_start="<strong>", strong_end="</strong>")}</p>
         </div>