LMS: revises UI states for verification status in dashboard view

lms/static/sass/elements/_controls.scss

@@ -84,6 +84,23 @@
   }
 }
 
+// blue primary error color
+%btn-primary-error {
+  @extend %btn-primary;
+  box-shadow: 0 2px 1px 0 shade($error-color, 25%);
+  background: shade($error-color, 25%);
+  color: $white;
+
+  &:hover, &:active {
+    background: $error-color;
+    color: $white;
+  }
+
+  &.disabled, &[disabled] {
+    box-shadow: none;
+  }
+}
+
 // blue primary button
 %btn-primary-blue {
   @extend %btn-primary;

lms/static/sass/elements/_typography.scss

@@ -271,11 +271,7 @@
 %copy-link {
   border-bottom: 1px dotted transparent;
 
-<<<<<<< HEAD
   &:hover, &:active, &:focus {
-=======
-  &:hover, &:active {
->>>>>>> LMS: revises semantics and styling for dashboard messages
     border-color: $link-color-d1;
   }
 }

lms/static/sass/multicourse/_dashboard.scss

@@ -787,6 +787,111 @@
   }
 
   // status - verification
+  .status-verification {
+
+    .status-title {
+      margin: 0 0 ($baseline/4) 26px;
+    }
+
+    .status-data {
+      margin: 0 0 ($baseline/2) 26px;
+      width: 80%;
+    }
+
+    .status-data-message {
+      @extend %t-copy-sub1;
+      @extend %t-weight4;
+      margin-bottom: ($baseline/2);
+    }
+
+    .list-actions {
+      @extend %ui-no-list;
+
+      .action {
+        @extend %t-weight4;
+        display: block;
+        @include font-size(14);
+      }
+    }
+
+    .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;
+      }
+
+      .deco-arrow {
+        @include triangle(($baseline/2), $m-gray-d3, up);
+        position: absolute;
+        left: 45%;
+        top: -($baseline/2);
+      }
+    }
+
+    // CASE: is denied
+    &.is-denied {
+
+      .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;
+        display: block;
+        @include font-size(14);
+      }
+
+      .deco-arrow {
+        @include triangle(($baseline/2), $error-color, up);
+      }
+    }
+
+    // CASE: is accepted
+    &.is-accepted {
+
+      .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);
+      }
+    }
+
+    // CASE: is pending
+    &.is-pending {
+
+      .status-data-message {
+        color: $m-gray-d3;
+        border-bottom-color: $m-gray-l4;
+      }
+
+      .status-note {
+        color: $m-gray-l1;
+        border-top-color: $m-gray-d3;
+      }
+    }
+  }
+
+  // status - verification
   .status--verification {
 
     .data {

lms/templates/dashboard/_dashboard_status_verification.html

@@ -8,20 +8,51 @@
 <%namespace name='static' file='../static_content.html'/>
 
 %if verification_status == 'denied':
-<li class="status status--verification is-denied">
-  <span class="title"><div class="icon"></div>${_("Verification Status")}</span><span class="data">${verification_msg}</span>
+<li class="status status-verification is-denied">
+  <span class="title status-title">${_("ID-Verification Status")}</span>
 
-  <ul class="list--nav">
-    <li class="nav__item nav__item--reverify">
-      <a href="${reverse('verify_student_reverify')}" class="action">${_("Please submit new verification photos.")}</a>
+  <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">${_("Re-verify Yourself")}</a>
     </li>
-  </ul>
+    </ul>
+
+    <div class="status-note">
+      <span class="deco-arrow"></span>
 
-  <div class="msg msg--warning">
-    <h3 class="msg__title">${_("Please Note:")}</h3>
-    <div class="msg__copy">
-      <p>${_("If you fail to pass a verification attempt before the course ends, you will not receive a verified certificate.")}</p>
+      <p>${_("If you fail to pass a verification attempt before your course ends, you will not receive a verified certificate.")}</p>
     </div>
   </div>
 </li>
 %endif
+
+<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 until October 31, 2013")}</p>
+    </div>
+  </div>
+</li>
+
+<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, submitted on October 29, 2013, is pending.")}</p>
+    </div>
+  </div>
+</li>