diff --git a/lms/static/images/icon-id.png b/lms/static/images/icon-id.png new file mode 100644 index 0000000000..c740799681 Binary files /dev/null and b/lms/static/images/icon-id.png differ diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index b052f84d94..f5f162b411 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -13,6 +13,7 @@ body.register.verification-process { // reset: typography - copy p, ol, ul, dl, input, select, textarea { font-family: $f-sans-serif; + @extend .t-copy-base; } // reset: copy/text @@ -211,15 +212,6 @@ body.register.verification-process { color: #ccc; &.current { - color: #000; - - .number { - border: 4px solid #000; - color: #000; - } - } - - &.done { color: #008801; .number { @@ -227,6 +219,15 @@ body.register.verification-process { color: #008801; } } + + &.done { + color: #777; + + .number { + border: 4px solid #777; + color: #777; + } + } } .number { @@ -382,10 +383,11 @@ body.register.verification-process { } .reqs { - margin: $baseline; + margin: $baseline $baseline ($baseline*1.5) $baseline; } .req { + height: 13em; width: 27%; display: inline-block; margin-right: 1%; @@ -394,16 +396,17 @@ body.register.verification-process { text-align: center; vertical-align: top; - // for placement only - .placeholder-art { - height: 150px; + [class^="icon-"] { + display: block; width: 150px; margin: $baseline auto; - background-color: #eee; + font-size: 75px; - i { - font-size: 24px; + &.icon-id { + background: transparent url('../images/icon-id.png') no-repeat center center; + height: 70px; } + } } @@ -467,9 +470,10 @@ body.register.verification-process { &.step-photos { // TEMP: for dev placement only - .placeholder-cam, - .placeholder-photo { - height: 300px; + .wrapper-cam, + .wrapper-photo { + height: 375px; + width: 500px; background-color: #eee; position: relative; @@ -486,7 +490,7 @@ body.register.verification-process { background-color: $white; .title { - font-weight: bold; + @extend .t-title4; } .wrapper-up, @@ -495,7 +499,7 @@ body.register.verification-process { } .cam { - width: 45%; + width: 500px; float: left; padding-right: $baseline; } @@ -509,6 +513,7 @@ body.register.verification-process { margin: 0; padding: ($baseline*.25) ($baseline*.75); list-style-type: none; + height: 60px; .control { display: inline-block; @@ -518,7 +523,10 @@ body.register.verification-process { display: block; background-color: $blue; color: $white; - border: none; + border: 3px solid #1A74A0; + border-radius: 40px; + padding: 10px 5px; + text-align: center; i { padding: ($baseline*.25) ($baseline*.5); @@ -571,23 +579,21 @@ body.register.verification-process { } .photo-tips { + @extend .t-copy-sub1; width: 45%; float: left; - ul { - margin: 0; - padding: 0; - list-style-type: none; + .title { + @extend .t-title5; + border-bottom: 1px solid #ddd; + padding-bottom: ($baseline/4); + font-weight: bold; } - li { - margin-bottom: $baseline; - } } .next-step { - width: 45%; - float: right; + margin-top: $baseline; .tip { margin-top: $baseline; @@ -599,8 +605,13 @@ body.register.verification-process { } .review-photo { - width: 45%; + width: 500px; float: left; + + .title { + @extend .t-title5; + margin-top: $baseline; + } } #review-facephoto { diff --git a/lms/templates/footer.html b/lms/templates/footer.html index 9c94e5751e..f0414c7a8f 100644 --- a/lms/templates/footer.html +++ b/lms/templates/footer.html @@ -37,7 +37,7 @@
- +

${_("{platform_name} is a non-profit created by founding partners {Harvard} and {MIT} whose mission is to bring the best of higher education to students of all ages anywhere in the world, wherever there is Internet access. {platform_name}'s free online MOOCs are interactive and subjects include computer science, public health, and artificial intelligence.").format(platform_name="EdX", Harvard="Harvard", MIT="MIT")}

diff --git a/lms/templates/verify_student/photo_verification.html b/lms/templates/verify_student/photo_verification.html index 41fb0ef7ad..d3ff5ae83a 100644 --- a/lms/templates/verify_student/photo_verification.html +++ b/lms/templates/verify_student/photo_verification.html @@ -194,8 +194,8 @@
-
-
+
+
@@ -216,19 +216,16 @@
-

Tips on taking a successful photo

+

Tips on taking a successful photo

    -
  • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    • -
  • Maecenas faucibus mollis interdum.
    • -
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
    • -
  • Cras mattis consectetur purus sit amet fermentum.
    • +
  • Make sure your face is well-lit
    • +
  • Be sure your entire face is inside the frame
    • +
  • Can we match the photo you took with the one on your ID?
    • +
  • Click the checkmark once you are happy with the photo
-
-
-
-
-

Common Questions

+ +

Common Questions

Why do you need my photo?
We need your photo to confirm that you are you.
@@ -236,7 +233,12 @@
What do you do with this picture?
We only use it to verify your identity. It is not displayed anywhere.
+ +
+
+ +

@@ -255,8 +257,8 @@

-
-
+
+
@@ -276,32 +278,29 @@
-

Tips on taking a successful photo

+

Tips on taking a successful photo

    -
  • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    • -
  • Maecenas faucibus mollis interdum.
    • -
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
    • -
  • Cras mattis consectetur purus sit amet fermentum.
    • +
  • Make sure your ID is well-lit
    • +
  • 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
+ +

Common Questions

+
+
Why do you need a photo of my ID?
+
We need to match your ID with your photo and name to confirm that you are you.
+ +
What do you do with this picture?
+
We encrypt it and send it to our secure authorization service for review. We use the highest levels of security and do not save the photo or information anywhere once the match has been completed.
+
+
-
-

Common Questions

-
-
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
-
Aenean eu leo quam.
-
Pellentesque ornare sem lacinia quam venenatis vestibulum.
-
Maecenas faucibus mollis interdum.
-
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Vestibulum id ligula porta felis euismod semper.
-
-
-

@@ -325,11 +324,11 @@

-
- +
+
-

The photo above needs to meet the following requirements:

+

The photo above needs to meet the following requirements:

  • Be well lit
  • Show your whole face
    • @@ -338,18 +337,21 @@
-
- +
+
-

The photo above needs to meet the following requirements:

+

The photo above needs to meet the following requirements:

  • Be readable (not too far away, no glare)
  • Show your name
  • Match the photo of your face and your name above
+ +
+

Photos don't meet the requirements? Retake the photos.

@@ -382,10 +384,10 @@
+
-

Photos don't meet the requirements? Retake the photos.

@@ -394,7 +396,7 @@

-

Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.

+

Once you verify your details match the requirements,
you can move on to step 4, payment on our secure server.

diff --git a/lms/templates/verify_student/show_requirements.html b/lms/templates/verify_student/show_requirements.html index 2731bac71e..ce8715764e 100644 --- a/lms/templates/verify_student/show_requirements.html +++ b/lms/templates/verify_student/show_requirements.html @@ -36,19 +36,19 @@

Identification

-
+

A photo identification document a drivers license, passport, student ID, or other ID with your name and picture on it

Webcam

-
+

A webcam and a modern browser Firefox, Chrome, or Opera

Credit or Debit Card

-
+

A major credit or debit card Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club