From b2ddea7a80bbb073c15e8b8bfbb9d446af20d8ed Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Wed, 4 Sep 2013 13:42:10 -0400
Subject: [PATCH] updated copy for vcert flow

---
 .../templates/course_modes/_contribution.html |  2 +-
 common/templates/course_modes/choose.html     | 30 ++++++----------
 lms/static/sass/views/_verification.scss      | 35 +++++++++++++++----
 .../verify_student/photo_verification.html    | 28 ++++++++-------
 .../verify_student/show_requirements.html     | 14 ++++----
 5 files changed, 62 insertions(+), 47 deletions(-)

diff --git a/common/templates/course_modes/_contribution.html b/common/templates/course_modes/_contribution.html
index 0294a842b2..238b9f081c 100644
--- a/common/templates/course_modes/_contribution.html
+++ b/common/templates/course_modes/_contribution.html
@@ -10,7 +10,7 @@
   </li>
   % endfor
 
-  <li class="field">
+  <li class="field contribution-option">
     <ul class="field-group field-group-other">
       <li class="contribution-option contribution-option-other1">
         <input type="radio" id="contribution-other" name="contribution" value="" ${'checked' if (chosen_price and chosen_price not in suggested_prices) else ''} />
diff --git a/common/templates/course_modes/choose.html b/common/templates/course_modes/choose.html
index 6198a9ff4f..c87687f9e7 100644
--- a/common/templates/course_modes/choose.html
+++ b/common/templates/course_modes/choose.html
@@ -96,7 +96,7 @@ $(document).ready(function() {
                   <dl class="list-faq">
                     <dt class="faq-question">${_("Why do I have to pay?")}</dt>
                     <dd class="faq-answer">
-                      <p>${_("Your payment helps cover the costs of verification. As a non-profit, edX  keeps these costs as low as possible, Your payment will also help edX with our mission to provide quality education to anyone.")}</p>
+                      <p>${_("As a not-for-profit, edX uses your contribution to support our mission to provide quality education to everyone around the world. While we have established a minimum fee, we ask that you contribute as much as you can.")}</p>
                     </dd>
 
                     <dt class="faq-question">${_("I'd like to pay more than the minimum.  Is my contribution tax deductible?")}</dt>
@@ -105,30 +105,20 @@ $(document).ready(function() {
                     </dd>
 
                     % if "honor" in modes:
-                    <dt class="faq-question">${_("What if I can't afford it?")}</dt>
+                    <dt class="faq-question">${_("What if I can't afford it or don't have the necessary equipment?")}</dt>
                     <dd class="faq-answer">
-                      <p>${_("If you cannot afford the minimum payment, you can always work towards a free  Honor Code Certificate of Achievement for this course.")}</p>
+                      <p>${_("If you can't afford the minimum fee, don't have a webcam, credit card, debit card or acceptable ID, you can audit the course for free. You may also elect to pursue an Honor Code certificate, but you will need to tell us why you would like the fee waived below. Then click the 'Select Certificate' button to complete your registration.")}</p>
 
-                      <p>${_("Enter $0 above and explain why you would like the fee waived below. Then click Select Certificate button to move on to the next step.")}</p>
-
-                      <ul class="fields">
-                        <li class="field field-explain">
-                          <label for="explain"><span class="sr">${_("Explain your situation: ")}</span>${_("Tell us why you need help paying for this course in 180 characters or more.")}</label>
-                          <textarea name="explain"></textarea>
-                        </li>
-                      </ul>
-                    </dd>
-
-                    <dt class="faq-question">${_("What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?")}</dt>
-
-                    <dd class="faq-answer">
-                      <p>${_("If you don't have a webcam, credit or debit card or acceptable ID, you can  opt to simply audit this course, or select to work towards a free Honor Code Certificate of Achievement for this course by checking the box below. Then  click the Select Certificate button to complete registration. We won't ask you to verify your identity.")}</p>
-
-                      <ul class="fields">
-                        <li class="field field-explain">
+                      <ul class="list-fields">
+                        <li class="field field-honor-code checkbox">
                           <input type="checkbox" name="honor-code" id="honor-code">
                           <label for="honor-code">${_("Select Honor Code Certificate")}</label>
                         </li>
+
+                        <li class="field field-explain">
+                          <label for="explain"><span class="sr">${_("Explain your situation: ")}</span>${_("Tell us why you would like the fee waived for this course in at least 180 characters.")}</label>
+                          <textarea name="explain"></textarea>
+                        </li>
                       </ul>
                     </dd>
                     % endif
diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 65f5eaea7f..96a6bbd878 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -148,7 +148,7 @@
       visibility: none;
       height: 0;
       opacity: 0.0;
-      overflow: scroll;
+      overflow-y: scroll;
     }
   }
 
@@ -162,7 +162,7 @@
 
     .expandable-area {
       visibility: visible;
-      height: ($baseline*12);
+      height: ($baseline*16);
       opacity: 1.0;
     }
   }
@@ -230,6 +230,14 @@
     letter-spacing: 0;
   }
 
+  .checkbox label {
+    display: inline-block;
+  }
+
+  input[type="checkbox"] {
+    width: auto;
+  }
+
   //  reset: lists
   .list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group {
     @extend .ui-no-list;
@@ -601,6 +609,7 @@
 
           // help - general list
           .list-help {
+            margin-top: ($baseline/2);
 
             .help-item {
               margin-bottom: ($baseline/4);
@@ -879,6 +888,7 @@
   .cam {
 
     .placeholder-cam {
+      position: relative;
       width: 95%;
       height: 375px;
       margin: ($baseline/2) auto;
@@ -886,13 +896,23 @@
 
       // placeholders
       .placeholder-art {
-        opacity: 0.5;
+        opacity: 0.7;
+        z-index: 100;
+
+        .copy {
+          position: absolute;
+          top: 40%;
+          margin: 0 40px;
+          text-align: center;
+        }
       }
 
       // previously defined in HTML
       video, canvas {
+        position: relative;
         display: block;
         @include size(100% 100%);
+        z-index: 500;
       }
     }
 
@@ -1397,17 +1417,18 @@
       .req-activate {
         float: left;
         text-align: center;
-        border-color: $m-pink-l4;
+        border-color: $m-pink-l3;
 
         .title {
           @extend .t-title4;
           @extend .t-weight4;
-          border-bottom-color: $m-pink-l4;
-          background: $m-pink-l5;
+          border-bottom-color: $m-pink-l3;
+          background: tint($m-pink, 95%);
+          color: $m-pink;
         }
 
         .placeholder-art {
-          background: $m-pink-l4;
+          background: $m-pink-l1;
         }
 
         .copy-super {
diff --git a/lms/templates/verify_student/photo_verification.html b/lms/templates/verify_student/photo_verification.html
index b5d1381ecd..0b43f4298d 100644
--- a/lms/templates/verify_student/photo_verification.html
+++ b/lms/templates/verify_student/photo_verification.html
@@ -79,6 +79,7 @@
                   <div class="placeholder-cam" id="face_capture_div">
 
                     <div class="placeholder-art">
+                      <p class="copy">Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission</p>
                     </div>
 
                     <video id="face_video" autoplay></video><br/>
@@ -128,7 +129,7 @@
                     <div class="copy">
                       <dl class="list-faq">
                         <dt class="faq-question">${_("Why do you need my photo?")}</dt>
-                        <dd class="faq-answer">${_("We need your photo to confirm that you are you.")}</dd>
+                        <dd class="faq-answer">${_("As part of the verification process, we need your photo to confirm that you are you.")}</dd>
 
                         <dt class="faq-question">${_("What do you do with this picture?")}</dt>
                         <dd class="faq-answer">${_("We only use it to verify your identity.  It is not displayed anywhere.")}</dd>
@@ -155,7 +156,7 @@
             <div class="idphoto view">
               <h3 class="title">${_("Show Us Your ID")}</h3>
               <div class="instruction">
-                <p>${_("Use your webcam to take a picture of your face so we can match it with the picture on your ID.")}</p>
+                <p>${_("Use your webcam to take a picture of your ID so we can match it with your photo and the name on your account.")}</p>
               </div>
 
               <div class="wrapper-task">
@@ -163,6 +164,7 @@
                   <div class="placeholder-cam" id="photo_id_capture_div">
 
                     <div class="placeholder-art">
+                      <p class="copy">Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission</p>
                     </div>
 
                     <video id="photo_id_video" autoplay></video><br/>
@@ -193,15 +195,16 @@
                 </div>
 
                 <div class="wrapper-help">
-                  <div class="help help-task photo-tips facetips">
+                  <div class="help help-task photo-tips idtips">
                     <h4 class="title">${_("Tips on taking a successful photo")}</h4>
 
                     <div class="copy">
-                      <ul>
-                        <li>${_("Make sure your ID is well-lit")}</li>
-                        <li>${_("Check that there isn't any glare")}</li>
-                        <li>${_("Ensure that you can see your photo and read your name")}</li>
-                        <li>${_("Try to keep your fingers at the edge to avoid covering important information")}</li>
+                      <ul class="list-help">
+                        <li class="help-item">${_("Make sure your ID is well-lit")}</li>
+                        <li class="help-item">${_("Check that there isn't any glare")}</li>
+                        <li class="help-item">${_("Ensure that you can see your photo and read your name")}</li>
+                        <li class="help-item">${_("Try to keep your fingers at the edge to avoid covering important information")}</li>
+                        <li class="help-item">${_("Acceptable IDs include drivers licenses, passports, or other goverment-issued IDs that include your name and photo")}</li>
                       </ul>
                     </div>
                   </div>
@@ -249,7 +252,7 @@
                     <div class="copy">
                       <!-- FIXME: not sure how to handle variables w/in translation context -->
                       ${_("Contact {platform_name}").format(platform_name=settings.PLATFORM_NAME)}
-                      <p>${_("Make sure your full name on your edX account, {}, matches your ID. We will also use this as the name on your certificate.").format(user_full_name)}</p>
+                      <p>${_("Make sure your full name on your edX account ({}) matches your ID. We will also use this as the name on your certificate.").format(user_full_name)}</p>
                     </div>
 
                     <ul class="list-actions">
@@ -263,7 +266,7 @@
                     <h4 class="title">${_("Review the Photos You've Taken")}</h4>
 
                     <div class="copy">
-                      <p>${_("Curabitur blandit tempus porttitor. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.")}</p>
+                      <p>${_("Please review the photos below and verify that they meet the requirements listed below.")}</p>
                     </div>
 
                     <ol class="wrapper-photos">
@@ -291,8 +294,9 @@
                          <h5 class="title">${_("The photo above needs to meet the following requirements:")}</h5>
                          <ul class="list-help list-tips copy">
                            <li class="tip">${_("Be readable (not too far away, no glare)")}</li>
-                           <li class="tip">${_("Show your name")}</li>
-                           <li class="tip">${_("Match the photo of your face and your name above")}</li>
+                           <li class="tip">${_("Show your full name")}</li>
+                           <li class="tip">${_("The photo on your ID matches the photo of your face")}</li>
+                           <li class="tip">${_("The name on your ID matches the name on your account above")}</li>
                          </ul>
                        </div>
                       </li>
diff --git a/lms/templates/verify_student/show_requirements.html b/lms/templates/verify_student/show_requirements.html
index 0188149cfc..3afc63822a 100644
--- a/lms/templates/verify_student/show_requirements.html
+++ b/lms/templates/verify_student/show_requirements.html
@@ -10,9 +10,9 @@
   <div class=" msg msg-activate">
     <i class="msg-icon icon-warning-sign"></i>
     <div class="msg-content">
-      <h3 class="title">${_("You need to activate your account before proceeding")}</h3>
+      <h3 class="title">${_("You need to activate your edX account before proceeding")}</h3>
       <div class="copy">
-        <p>${_("Please check your email for further instructions on verifying your new account.")}</p>
+        <p>${_("Please check your email for further instructions on activating your new account.")}</p>
       </div>
     </div>
   </div>
@@ -74,7 +74,7 @@
         <h3 class="title">${_("What You Will Need to Register")}</h3>
 
         <div class="instruction">
-          <p>${_("There are a few things you will need to register as an ID verified student:")}</p>
+          <p>${_("There are three things you will need to register as an ID verified student:")}</p>
         </div>
 
         <ul class="list-reqs ${"account-not-activated" if is_not_active else ""}">
@@ -88,7 +88,7 @@
             <div class="copy">
               <p>
                 <span class="copy-super">${_("Check Your Email")}</span>
-                <span class="copy-sub">${_("Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum")}.</span>
+                <span class="copy-sub">${_("you need an active edX account before registering - check your email for instructions")}</span>
               </p>
             </div>
           </li>
@@ -104,7 +104,7 @@
             <div class="copy">
               <p>
                 <span class="copy-super">${_("A photo identification document")}</span>
-                <span class="copy-sub">${_("a drivers license, passport, student ID, or other ID with your name and picture on it")}</span>
+                <span class="copy-sub">${_("a drivers license, passport, or other goverment-issued ID with your name and picture on it")}</span>
               </p>
             </div>
           </li>
@@ -118,7 +118,7 @@
             <div class="copy">
               <p>
                 <span class="copy-super">${_("A webcam and a modern browser")}</span>
-                <span class="copy-sub">${_("Firefox, Chrome, or Opera")}</span>
+                <span class="copy-sub">${_("Firefox, Chrome, Safari, IE9+")}</span>
               </p>
             </div>
           </li>
@@ -132,7 +132,7 @@
             <div class="copy">
               <p>
                 <span class="copy-super">${_("A major credit or debit card")}</span>
-                <span class="copy-sub">${_("Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club")}</span>
+                <span class="copy-sub">${_("Visa, Master Card, American Express, Discover, Diners Club, JCB with Discover logo")}</span>
               </p>
             </div>
           </li>