Merge pull request #998 from edx/talbs/verification-copytweaks

Verification: Copy/Light UI Pre-Launch Edits

common/templates/course_modes/choose.html

@@ -82,7 +82,7 @@ $(document).ready(function() {
                   <dl class="list-faq">
                     <dt class="faq-question">${_("Why do I have to pay?")}</dt>
                     <dd class="faq-answer">
-                      <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>
+                      <p>${_("As a not-for-profit, edX uses your contribution to support our mission to provide quality education to everyone around the world, and to improve learning through research. 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>
@@ -93,7 +93,7 @@ $(document).ready(function() {
                     % if "honor" in modes:
                     <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 can't afford the minimum fee or don't meet the requirements, 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>${_("If you can't afford the minimum fee or don't meet the requirements, you can audit the course or elect to pursue an honor code certificate at no cost. If you would like to pursue the honor code certificate, please check the honor code certificate box, tell us why you can't pursue the verified certificate below, and then click the 'Select Certificate' button to complete your registration.")}</p>
 
                       <ul class="list-fields">
                         <li class="field field-honor-code checkbox">
@@ -102,7 +102,7 @@ $(document).ready(function() {
                         </li>
 
                         <li class="field field-explain">
-                          <label for="explain"><span class="sr">${_("Explain your situation: ")}</span>${_("Please write a few sentences about why you would like the fee waived for this course")}</label>
+                          <label for="explain"><span class="sr">${_("Explain your situation: ")}</span>${_("Please write a few sentences about why you'd like to opt out of the paid verified certificate to pursue the honor code certificate:")}</label>
                           <textarea name="explain"></textarea>
                         </li>
                       </ul>

lms/static/sass/views/_verification.scss

@@ -372,6 +372,10 @@
     .copy {
       @extend .copy-detail;
     }
+
+    strong {
+      color: $m-gray-d2;
+    }
   }
 
   // ====================
@@ -695,6 +699,10 @@
             @extend .copy-detail;
           }
 
+          .example {
+            color: $m-gray-l2;
+          }
+
           // help - general list
           .list-help {
             margin-top: ($baseline/2);
@@ -1406,6 +1414,10 @@
   // VIEW: requirements
   &.step-requirements {
 
+    .help-item-technical {
+      display: none;
+    }
+
     // progress nav
     .progress .progress-step {
 
@@ -1636,6 +1648,11 @@
 
   // VIEW: review photos
   &.step-review {
+
+    .help-item-technical {
+      display: none;
+    }
+
     .modal.edit-name .submit input {
       color: #fff;
     }
@@ -1655,22 +1672,38 @@
           border: none;
         }
       }
-
     }
 
     .nav-wizard {
 
-      .help-inline {
-        width: flex-grid(4,12);
-        margin-top: 0
+      .prompt-verify {
+        float: left;
+        width: flex-grid(6,12);
+        margin: 0 flex-gutter() 0 0;
+
+        .title {
+          @extend .hd-lv4;
+          margin-bottom: ($baseline/4);
+        }
+
+        .copy {
+          @extend .t-copy-sub1;
+          @extend .t-weight3;
+        }
+
+        .list-actions {
+          margin-top: ($baseline/2);
+        }
+
+        .action-verify label  {
+          @extend .t-copy-sub1;
+        }
       }
 
       .wizard-steps {
-        float: right;
-        width: flex-grid(8,12);
+        margin-top: ($baseline/2);
 
         .wizard-step {
-          width: flex-grid(4,8);
           margin-right: flex-gutter();
           display: inline-block;
           vertical-align: middle;
@@ -1681,13 +1714,6 @@
         }
       }
 
-      .step-match {
-
-        label {
-          @extend .t-copy-sub1;
-        }
-      }
-
       .step-proceed {
 
       }
@@ -1733,6 +1759,10 @@
   // VIEW: confirmation/receipt
   &.step-confirmation {
 
+    .help-item-technical {
+      display: none;
+    }
+
     // progress nav
     .progress .progress-step {
 

lms/templates/shoppingcart/verified_cert_receipt.html

@@ -100,7 +100,7 @@
                   <tr>
                     <th scope="col" >${_("Course")}</th>
                     <th scope="col" >${_("Status")}</th>
-                    <th scope="col" >${_("Options")}</th>
+                    <th scope="col" ><span class="sr">${_("Options")}</span></th>
                   </tr>
                 </thead>
 
@@ -113,9 +113,8 @@
                     </td>
                     <td class="options">
                       %if course_has_started:
-                          ${_("Starts: {start_date}").format(start_date=course_start_date_text)}
+                          <a class="action action-course" href="${reverse('course_root', kwargs={'course_id': item.course_id})}">${_("Go to Course")}</a>
                       %else:
-                      <a class="action action-course" href="${reverse('course_root', kwargs={'course_id': item.course_id})}">${_("Go to Course")}</a>
                       %endif
                     </td>
                   </tr>

lms/templates/verify_student/_verification_support.html

@@ -3,19 +3,26 @@
 <div class="wrapper-content-supplementary">
   <aside class="content-supplementary">
     <ul class="list-help">
-      <li class="help-item">
+      <li class="help-item help-item-questions">
         <h3 class="title">${_("Have questions?")}</h3>
         <div class="copy">
             <p>${_("Please read {a_start}our FAQs to view common questions about our certificates{a_end}.").format(a_start='<a rel="external" href="'+ marketing_link('WHAT_IS_VERIFIED_CERT') + '">', a_end="</a>")}</p>
         </div>
       </li>
 
-      <li class="help-item">
+      <li class="help-item help-item-coldfeet">
         <h3 class="title">${_("Change your mind?")}</h3>
         <div class="copy">
           <p>${_("You can always {a_start} audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="/course_modes/choose/' + course_id + '">', a_end="</a>")}</p>
         </div>
       </li>
+
+      <li class="help-item help-item-technical">
+        <h3 class="title">${_("Having Technical Trouble?")}</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>
+      </li>
     </ul>
   </aside>
 </div> <!-- /wrapper-content-supplementary -->

lms/templates/verify_student/photo_verification.html

@@ -155,7 +155,8 @@
                         <li class="help-item">${_("Make sure your face is well-lit")}</li>
                         <li class="help-item">${_("Be sure your entire face is inside the frame")}</li>
                         <li class="help-item">${_("Can we match the photo you took with the one on your ID?")}</li>
-                        <li class="help-item">${_("Click the checkmark once you are happy with the photo")}</li>
+                        <li class="help-item">${_("Once in position, use the camera button")} <span class="example">(<i class="icon-camera"></i>)</span> ${_("to capture your picture")}</li>
+                        <li class="help-item">${_("Use the checkmark button")} <span class="example">(<i class="icon-ok"></i>)</span> ${_("once you are happy with the photo")}</li>
                       </ul>
                     </div>
                   </div>
@@ -244,7 +245,8 @@
                         <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>
-                        <li class="help-item">${_("Click the checkmark once you are happy with the photo")}</li>
+                        <li class="help-item">${_("Once in position, use the camera button")} <span class="example">(<i class="icon-camera"></i>)</span> ${_("to capture your ID")}</li>
+                        <li class="help-item">${_("Use the checkmark button")} <span class="example">(<i class="icon-ok"></i>)</span> ${_("once you are happy with the photo")}</li>
                       </ul>
                     </div>
                   </div>
@@ -367,13 +369,20 @@
               </div>
 
               <nav class="nav-wizard">
-                <span class="help help-inline">${_("Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.")}</span>
+                <div class="prompt-verify">
+                  <h3 class="title">Before proceeding, please confirm that your details match</h3>
+
+                   <p class="copy"> ${_("Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.")}</p>
+
+                  <ul class="list-actions">
+                    <li class="action action-verify">
+                      <input type="checkbox" name="match" id="confirm_pics_good" />
+                      <label for="confirm_pics_good">${_("Yes! My details all match.")}</label>
+                    </li>
+                  </ul>
+                </div>
 
                 <ol class="wizard-steps">
-                  <li class="wizard-step step-match">
-                    <input type="checkbox" name="match" id="confirm_pics_good" />
-                    <label for="confirm_pics_good">${_("Yes! My details all match.")}</label>
-                  </li>
                   <li class="wizard-step step-proceed">
                     <form id="pay_form" method="post" action="${purchase_endpoint}">
                       <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">

lms/templates/verify_student/show_requirements.html

@@ -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, or other goverment-issued ID with your name and picture on it")}</span>
+                <span class="copy-sub">${_("a drivers license, passport, or other goverment or school-issued ID with your name and picture on it")}</span>
               </p>
             </div>
           </li>
@@ -117,8 +117,18 @@
 
             <div class="copy">
               <p>
+                <%
+                  browser_links = {
+                    "ff_a_start": '<a rel="{rel}" href="{url}">'.format(url="https://www.mozilla.org/en-US/firefox/new/", rel="external"),
+                    "chrome_a_start": '<a rel="{rel}" href="{url}">'.format(url="https://www.google.com/intl/en/chrome/browser/", rel="external"),
+                    "safari_a_start": '<a rel="{rel}" href="{url}">'.format(url="http://www.apple.com/safari/", rel="external"),
+                    "ie_a_start": '<a rel="{rel}" href="{url}">'.format(url="http://windows.microsoft.com/en-us/internet-explorer/download-ie", rel="external"),
+                    "a_end": '</a>'
+                  }
+                %>
                 <span class="copy-super">${_("A webcam and a modern browser")}</span>
-                <span class="copy-sub">${_("Firefox, Chrome, Safari, IE9+")}</span>
+                <span class="copy-sub"><strong>${_("{ff_a_start}Firefox{a_end}, {chrome_a_start}Chrome{a_end}, {safari_a_start}Safari{a_end}, {ie_a_start}IE9+{a_end}").format(**browser_links)}</strong> - ${_("Please make sure your browser is updated to the most recent version possible")}
+                </span>
               </p>
             </div>
           </li>