Verification: adds in browser support links, icon-based button help tips, and…

Verification: adds in browser support links, icon-based button help tips, and technical support help info

lms/static/sass/views/_verification.scss

@@ -372,6 +372,10 @@
     .copy {
       @extend .copy-detail;
     }
+
+    strong {
+      color: $m-gray-d4;
+    }
   }
 
   // ====================
@@ -695,6 +699,10 @@
             @extend .copy-detail;
           }
 
+          .example {
+            color: $m-gray-l2;
+          }
+
           // help - general list
           .list-help {
             margin-top: ($baseline/2);
@@ -1636,6 +1644,11 @@
 
   // VIEW: review photos
   &.step-review {
+
+    .help-item-technical {
+      display: none;
+    }
+
     .modal.edit-name .submit input {
       color: #fff;
     }
@@ -1655,7 +1668,6 @@
           border: none;
         }
       }
-
     }
 
     .nav-wizard {
@@ -1733,6 +1745,10 @@
   // VIEW: confirmation/receipt
   &.step-confirmation {
 
+    .help-item-technical {
+      display: none;
+    }
+
     // progress nav
     .progress .progress-step {
 

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 functional{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>

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>