diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index bcfc8d09bf..9bd1274928 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -432,10 +432,6 @@ } } - .wrapper-msg-reverify { - - } - // ==================== // UI: inline messages @@ -632,6 +628,38 @@ // ==================== + // UI: reverification message + .wrapper-reverification { + border-bottom: ($baseline/10) solid $m-pink; + margin-bottom: $baseline; + padding-bottom: $baseline; + position: relative; + + .deco-arrow { + @include triangle($baseline, $m-pink, down); + position: absolute; + bottom: -($baseline); + left: 50%; + } + } + + .reverification { + + .message { + + .title { + @extend %hd-lv3; + color: $m-pink; + } + + .copy { + @extend %t-copy-sub1; + } + } + } + + // ==================== + // UI: slides .carousel { @@ -709,6 +737,10 @@ padding-bottom: 0; } } + + .help-item-emphasis { + @extend %t-weight4; + } } // help - faq @@ -1930,6 +1962,10 @@ // STATE: re-verifying .register.is-not-verified { + .help-item-emphasis { + color: $m-pink; + } + // progress indicator .progress-sts { width: 72%; @@ -2058,6 +2094,5 @@ margin-bottom: $baseline; } } ->>>>>>> LMS: adds in styling and base UI for reverification flow } } diff --git a/lms/templates/verify_student/photo_reverification.html b/lms/templates/verify_student/photo_reverification.html index 40bcc92c11..2b1bdaf920 100644 --- a/lms/templates/verify_student/photo_reverification.html +++ b/lms/templates/verify_student/photo_reverification.html @@ -53,21 +53,22 @@ %endif -
-
- -
-

${_("Please Resubmit Your Verification Information")}

-
-

${_("There was an error with your previous verification")}. ${_("In order proceed in the verified certificate of achievement track of your current courses, please complete the following steps.")}

-
-
-
-
-
+
+
+
+

${_("Please Resubmit Your Verification Information")}

+
+

${_("There was an error with your previous verification. In order proceed in the verified certificate of achievement track of your current courses, please complete the following steps.")}

+
+
+ + +
+
+

${_("Your Progress")}

@@ -241,10 +242,10 @@
  • ${_("Make sure your ID is well-lit")}
  • +
  • ${_("Acceptable IDs include drivers licenses, passports, or other goverment-issued IDs that include your name and photo")}
  • ${_("Check that there isn't any glare")}
  • ${_("Ensure that you can see your photo and read your name")}
  • ${_("Try to keep your fingers at the edge to avoid covering important information")}
  • -
  • ${_("Acceptable IDs include drivers licenses, passports, or other goverment-issued IDs that include your name and photo")}
  • ${_("Once in position, use the camera button")} () ${_("to capture your ID")}
  • ${_("Use the checkmark button")} () ${_("once you are happy with the photo")}