diff --git a/common/templates/course_modes/choose.html b/common/templates/course_modes/choose.html
index 738728042b..5aa65a04d7 100644
--- a/common/templates/course_modes/choose.html
+++ b/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">
${_("Register for {} | Choose Your Track").format(course_name)} %block>
<%block name="js_extra">
@@ -48,7 +48,10 @@ $(document).ready(function() {
+
+ %if not upgrade:
${_("Select your track:")}
+ %endif
% endif
- % if "audit" in modes:
-
- ${_("or")}
-
-
-
-
${_("Audit This Course")}
-
-
${_("Sign up to audit this course for free and track your own progress.")}
-
-
+ %if not upgrade:
-
-
- % endif
+ % if "audit" in modes:
+
+ ${_("or")}
+
+
+
+
${_("Audit This Course")}
+
+
${_("Sign up to audit this course for free and track your own progress.")}
+
+
+
+
+
+ % endif
+
+ %endif
diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 589c45f7d3..ece257b7ee 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/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);
+ }
+}
diff --git a/lms/templates/verify_student/_verification_header.html b/lms/templates/verify_student/_verification_header.html
index 4870a59c49..0f4878221d 100644
--- a/lms/templates/verify_student/_verification_header.html
+++ b/lms/templates/verify_student/_verification_header.html
@@ -2,7 +2,11 @@