Merge pull request #12403 from edx/tasawer/story/ecom-3729-update-verification-status-area

Update student verification area

lms/static/sass/multicourse/_dashboard.scss

@@ -114,12 +114,6 @@
           margin-bottom: ($baseline*0.75);
           padding-bottom: 17px;
 
-          &:last-child {
-            border-bottom: none;
-            margin-bottom: 0;
-            padding-bottom: 0;
-          }
-
           &:hover, &:focus {
             .title .icon {
               opacity: 1.0;
@@ -227,6 +221,12 @@
       // status
       .status {
 
+        @include clearfix();
+        box-sizing: border-box;
+        padding: $baseline;
+        background-color: $body-bg;
+        border: 1px solid $border-color-l3;
+
         .list--nav {
           margin: ($baseline/2) 0 0 0;
           padding: 0;
@@ -1278,10 +1278,6 @@
   .status-note {
     @extend %t-copy-sub2;
     position: relative;
-    margin-top: $baseline;
-    border-top: 1px solid $black-t0;
-    padding-top: ($baseline/2);
-
     p {
       @extend %t-copy-sub2;
     }
@@ -1296,17 +1292,13 @@
 
   // CASE: is denied
   &.is-denied {
+    border-top: 3px solid $red !important;
 
     .status-data-message {
       color: $error-color;
       border-bottom-color: rgba($error-color, 0.25);
     }
 
-    .status-note {
-      color: desaturate($error-color, 65%);
-      border-top-color: rgba($error-color, 0.25);
-    }
-
     .action-reverify {
       @extend %btn-primary-error;
       @extend %t-weight4;
@@ -1314,6 +1306,10 @@
       @include font-size(14);
     }
 
+    .btn-reverify {
+      margin-top: ($baseline/2);
+    }
+
     .deco-arrow {
       @include triangle(($baseline/2), $error-color, up);
     }
@@ -1321,17 +1317,13 @@
 
   // CASE: is accepted
   &.is-accepted {
+    border-top: 3px solid $green !important;
 
     .status-data-message {
       color: $verified-color-lvl1;
       border-bottom-color: $verified-color-lvl4;
     }
 
-    .status-note {
-      color: $m-gray-l1;
-      border-top-color: $verified-color-lvl4;
-    }
-
     .deco-arrow {
       @include triangle(($baseline/2), $verified-color-lvl4, up);
     }
@@ -1344,11 +1336,6 @@
       color: $m-gray-d3;
       border-bottom-color: $m-gray-l4;
     }
-
-    .status-note {
-      color: $m-gray-l1;
-      border-top-color: $m-gray-d3;
-    }
   }
 }
 

lms/templates/dashboard/_dashboard_status_verification.html

@@ -6,58 +6,25 @@ from django.core.urlresolvers import reverse
 %>
 
 %if verification_status == 'approved':
-<li class="status status-verification is-accepted">
-  <span class="title status-title">${_("ID Verification Status")}</span>
-
-  <div class="status-data">
-    <span class="status-data-message">${_("Reviewed and Verified")}</span>
-
-    <div class="status-note">
-      <span class="deco-arrow"></span>
-
-      <p>${_("Your verification status is good for one year after submission.")}</p>
-    </div>
-  </div>
-</li>
+    <li class="status status-verification is-accepted">
+        <span class="title status-title">${_("Verification Status: Approved")}</span>
+        <p class="status-note">${_("Your edX Verification is reviewed and approved. Your verification status is good for one year after submission.")}</p>
+    </li>
 %endif
 
 %if verification_status == 'pending':
-<li class="status status-verification is-pending">
-  <span class="title status-title">${_("ID Verification Status")}</span>
-
-  <div class="status-data">
-    <span class="status-data-message">${_("Pending")}</span>
-
-    <div class="status-note">
-      <span class="deco-arrow"></span>
-
-      <p>${_("Your verification photos have been submitted and will be reviewed shortly.")}</p>
-    </div>
-  </div>
-</li>
-
+    <li class="status status-verification is-pending">
+        <span class="title status-title">${_("Verification Status: Pending")}</span>
+        <p class="status-note">${_("Your edX Verification is pending. Your verification photos have been submitted and will be reviewed shortly.")}</p>
+    </li>
 %endif
 
 %if verification_status in ['must_reverify', 'expired']:
-<li class="status status-verification is-denied">
-<span class="title status-title">${_("{platform_name} Verification Status").format(platform_name=static.get_platform_name())}</span>
-
-  <div class="status-data">
-    <span class="status-data-message">${verification_msg}</span>
-
-    <ul class="list-actions">
-    <li class="action-item action-item-reverify">
-      <a href="${reverse('verify_student_reverify')}" class="action action-reverify">${_("Resubmit Verification")}</a>
+    <li class="status status-verification is-denied">
+        <span class="title status-title">${_("Verification Status: Expired")}</span>
+        <p class="status-note">${_("Your edX Verification has expired. To receive a verified certificate, you have to submit a new photo of yourself and your government-issued photo ID before the course ends.")}</p>
+        <div class="btn-reverify">
+            <a href="${reverse('verify_student_reverify')}" class="action action-reverify">${_("Resubmit Verification")}</a>
+        </div>
     </li>
-    </ul>
-
-    <div class="status-note">
-      <span class="deco-arrow"></span>
-
-      <p>${_("To receive a verified certificate, you have to submit a new photo of yourself and your government-issued photo ID before the course ends.")}</p>
-    </div>
-  </div>
-</li>
 %endif
-
-