From d4e8034fcaab6576213f777282f8dcbcb3940f4b Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Thu, 22 Aug 2013 23:25:57 -0400
Subject: [PATCH] refinements on the verification html and sass

---
 lms/static/sass/views/_verification.scss      | 88 +++++++++----------
 lms/templates/verify_student/face_upload.html | 38 ++++----
 .../verify_student/photo_id_upload.html       |  2 +-
 .../verify_student/show_requirements.html     |  4 +-
 4 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 23395f4370..4e1651ca80 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -8,6 +8,16 @@ body.register.verification {
     font-family: 'Open Sans', sans-serif;
   }
 
+
+  dt {
+    margin-bottom: ($baseline*.75);
+  }
+
+  dd {
+    margin: 0;
+  }
+
+
   .content-wrapper {
     background: none repeat scroll 0 0 #F7F7F7;
   }
@@ -79,49 +89,6 @@ body.register.verification {
 
       &.block-cert {
         border-top: 5px solid #008801;
-
-        ul {
-          list-style-type: none;
-          margin: 0;
-          padding: 0;
-
-          li {
-            display: inline-block;
-            background-color: $light-gray;
-            padding: ($baseline/2) ($baseline*.75);
-            margin-right: ($baseline/4);
-            vertical-align: middle;
-
-            label {
-              font-style: normal;
-              font-family: 'Open Sans', sans-serif;
-              font-weight: 400;
-              vertical-align: middle;
-            }
-
-            &.other1 {
-              margin-right: -($baseline/4);
-              padding-right: ($baseline/4);
-            }
-            &.other2 {
-              padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
-            }
-
-            input {
-              vertical-align: middle;
-            }
-          }
-
-        }
-
-        dt {
-          margin-bottom: ($baseline*.75);
-        }
-
-        dd {
-          margin: 0;
-        }
-
       }
 
 
@@ -160,10 +127,43 @@ body.register.verification {
         font-size: 14px;
       }
     }
-
   }
 
 
+  .pay-options {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: inline-block;
+      background-color: $light-gray;
+      padding: ($baseline/2) ($baseline*.75);
+      margin-right: ($baseline/4);
+      vertical-align: middle;
+
+      label {
+        font-style: normal;
+        font-family: 'Open Sans', sans-serif;
+        font-weight: 400;
+        vertical-align: middle;
+      }
+
+      &.other1 {
+        margin-right: -($baseline/4);
+        padding-right: ($baseline/4);
+      }
+      &.other2 {
+        padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
+      }
+
+      input {
+        vertical-align: middle;
+      }
+    }
+
+  }
+
  .m-btn-primary {
 
     a {
diff --git a/lms/templates/verify_student/face_upload.html b/lms/templates/verify_student/face_upload.html
index 9451e211bf..95b8b30d34 100644
--- a/lms/templates/verify_student/face_upload.html
+++ b/lms/templates/verify_student/face_upload.html
@@ -37,7 +37,7 @@ $(document).ready(function() {
 
 
   <section class="wrapper carousel"  data-transition="slide">
-    <div id="wrapper-facephoto" class="block-photo">
+    <div id="wrapper-facephoto" class="block block-photo">
       <h3 class="title">Take Your Photo</h3>
       <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
 
@@ -93,7 +93,9 @@ $(document).ready(function() {
         <div class="actions">
           <ul>
             <li class="action action-next">
-              <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
+              <p class="m-btn-primary">
+                <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
+              </p>
               <p class="tips">Once you verify your photo looks good, you can move on to step 2.</p>
             </li>
           </ul>
@@ -104,7 +106,7 @@ $(document).ready(function() {
 
 
 
-    <div id="wrapper-idphoto" class="block-photo">
+    <div id="wrapper-idphoto" class="block block-photo">
       <h3 class="title">Take Your Photo</h3>
       <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
 
@@ -163,7 +165,9 @@ $(document).ready(function() {
         <div class="actions">
           <ul>
             <li class="action action-next">
-              <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
+              <p class="m-btn-primary">
+                <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
+              </p>
               <p class="tips">Once you verify your ID photo looks good, you can move on to step 3.</p>
             </li>
           </ul>
@@ -174,7 +178,7 @@ $(document).ready(function() {
 
 
 
-    <div id="wrapper-review" class="block-photo">
+    <div id="wrapper-review" class="block block-photo">
       <h3 class="title">Verify Your Submission</h3>
       <p>Make sure we can verify your identity with the photos and information below.</p>
 
@@ -219,24 +223,24 @@ $(document).ready(function() {
 
         <dl>
           <dt>
-            The contribution you selected for this course is (in USD):
+            Select your contribution for this course:
           </dt>
           <dd>
-            <ul>
+            <ul class="pay-options">
               <li>
-                <input type="radio" name="contribution-25" id="contribution"> <label for="contribution-25">$25</label>
+                <input type="radio" id="contribution-25" name="contribution"> <label for="contribution-25">$25 USD</label>
               </li>
               <li>
-                <input type="radio" name="contribution-50" id="contribution"> <label for="contribution-50">$50</label>
+                <input type="radio" id="contribution-50" name="contribution"> <label for="contribution-50">$50 USD</label>
               </li>
               <li>
-                <input type="radio" name="contribution-100" id="contribution"> <label for="contribution-100">$100</label>
+                <input type="radio" id="contribution-100" name="contribution"> <label for="contribution-100">$100 USD</label>
               </li>
-              <li>
-                <input type="radio" name="contribution-other" id="contribution"> <label for="contribution-other">Other</label>
+              <li class="other1">
+                <input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other"><span class="sr">Other</span></label>
               </li>
-              <li>
-                <label for="contribution-other-amt">Other Amount</label> <input type="text" name="contribution-other" id="contribution-other-amt">
+              <li class="other2">
+                <label for="contribution-other-amt"><span class="sr">Other Amount</span> $</label> <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt">
               </li>
             </ul>
           </dd>
@@ -254,7 +258,7 @@ $(document).ready(function() {
       <div class="actions">
         <ul>
           <li class="action action-next">
-            <a href="#">Go to Step 4: Secure Payment</a>
+            <p  class="m-btn-primary"><a href="#">Go to Step 4: Secure Payment</a></p>
             <p class="tips">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
           </li>
         </ul>
@@ -265,8 +269,8 @@ $(document).ready(function() {
 
 
   <section class="support">
-    <p>More questions? <a rel="external" href="">Check out our FAQs.</a></p>
-    <p>Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
+    <p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
+    <p class="tip">Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
   </section>
 
 
diff --git a/lms/templates/verify_student/photo_id_upload.html b/lms/templates/verify_student/photo_id_upload.html
index e0149bfbc4..22f8c89ab2 100644
--- a/lms/templates/verify_student/photo_id_upload.html
+++ b/lms/templates/verify_student/photo_id_upload.html
@@ -59,7 +59,7 @@ $(document).ready(function() {
             Select your contribution for this course:
           </dt>
           <dd>
-            <ul>
+            <ul class="pay-options">
               <li>
                 <input type="radio" id="contribution-25" name="contribution"> <label for="contribution-25">$25 USD</label>
               </li>
diff --git a/lms/templates/verify_student/show_requirements.html b/lms/templates/verify_student/show_requirements.html
index 80d4658a72..5d27a8e684 100644
--- a/lms/templates/verify_student/show_requirements.html
+++ b/lms/templates/verify_student/show_requirements.html
@@ -79,8 +79,8 @@
 </section>
 
   <section class="support">
-    <p>More questions? <a rel="external" href="">Check out our FAQs.</a></p>
-    <p>Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
+    <p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
+    <p class="tip">Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
   </section>
 
 </div>