Merge pull request #7950 from edx/clintonb/update-verify-now

Updated Take Photo page to include verification requirements

lms/static/sass/views/_verification.scss

@@ -619,6 +619,44 @@
       }
     }
 
+    @mixin help {
+      margin-bottom: ($baseline*1.5);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .title {
+        @extend %hd-lv3;
+      }
+
+      .copy {
+        @extend %copy-detail;
+      }
+    }
+
+    .requirements {
+      margin-bottom: 10px;
+      @include outer-container;
+
+      .title {
+        @extend %hd-lv3;
+        margin-bottom: 10px;
+      }
+
+      .requirement {
+        @include help();
+
+        border: 1px solid #e5e5e5;
+        border-top: 5px solid #f4d78a;
+        padding: 10px;
+        box-shadow: 1px 1px 3px #888888;
+
+        // TODO Determine why this is not responsive.
+        @include span-columns(6);
+      }
+    }
+
     .wrapper-task {
       @include clearfix();
       width: flex-grid(12,12);
@@ -630,19 +668,7 @@
         padding: 0 $baseline;
 
         .help {
-          margin-bottom: ($baseline*1.5);
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-
-          .title {
-            @extend %hd-lv3;
-          }
-
-          .copy {
-            @extend %copy-detail;
-          }
+          @include help();
 
           .example {
             color: $m-gray-l2;
@@ -670,6 +696,10 @@
             }
           }
 
+          .copy-extra {
+            color: $black;
+          }
+
           // help - faq
           .list-faq {
             margin-bottom: $baseline;
@@ -2415,9 +2445,22 @@
 }
 
 // UI: photo reverification heading
-h1.photo_verification {
+h2.photo_verification {
   @extend %t-title1;
   text-align: left;
+  text-transform: none;
+}
+
+.facephoto.view {
+  .wrapper-task {
+    #facecam {
+      float: left;
+    }
+
+    .wrapper-help {
+      float: right;
+    }
+  }
 }
 
 // ====================