adjusting style and html for re-verification on lms

lms/static/sass/views/_verification.scss

@@ -1799,23 +1799,46 @@
   &.midcourse-reverification-process {
 
     // step-dash
+
+    .content-main > .title {
+      @extend %t-title7;
+      display: block;
+      font-weight: 600;
+      color: $m-gray;
+    }
+
     .action-reverify {
-      @extend %btn-verify-primary;
+      //@extend %btn-verify-primary;
       padding: ($baseline/2) ($baseline*0.75);
     }
 
-    .reverification-table {
-      width: 100%;
+    .reverification-list {
+      list-style-type: none;
 
-      th {
-        display: none;
+      .item {
+        display: inline-block;
+        width: 48%;
+        box-shadow: 0 2px 5px 2px $shadow-l1;
+        margin: ($baseline*.75) ($baseline*.75) ($baseline*.75) 0;
+        border: 1px solid $m-gray-t2;
+
+        &.complete {
+          border: 1px solid $verified-color-lvl1;
+        }
+
+        &.failed {
+          border: 1px solid $error-color;
+        }
       }
 
-      th,
-      td {
-        padding: ($baseline/2) 0;
-        text-align: left;
-        border-bottom: 1px solid $light-gray;
+      .course-info {
+        margin-bottom: ($baseline/2);
+        padding: ($baseline/2) ($baseline*.75);
+      }
+
+      .reverify-status {
+        background-color: $light-gray;
+        padding: ($baseline/2) ($baseline*.75);
       }
 
       .course-name {
@@ -1827,12 +1850,15 @@
       .deadline {
         @extend %copy-detail;
         display: block;
+        margin-top: ($baseline/4);
       }
     }
 
 
     .wrapper-reverification-help {
-      margin-top: $baseline*2;
+      margin-top: $baseline;
+      border-top: 1px solid $light-gray;
+      padding-top: ($baseline*1.5);
 
       .faq-item {
         display: inline-block;

lms/templates/verify_student/midcourse_reverify_dash.html

@@ -14,35 +14,29 @@
     <div class="wrapper-content-main">
       <article class="content-main">
 
-        <h2 class="title">You are re-verifying your identity</h2>
+        <h2 class="title">You are in the Verified track</h2>
 
         <div class="copy">
           <p>You currently need to re-verify for the following course:</p>
 
-          <table class="reverification-table">
-          <tr>
-          <th>Course and Reverification window</th>
-          <th>Status</th>
-          </tr>
-
+          <ul class="reverification-list">
           % for course_id, course_name, course_number, date, status in reverify_course_data:
-            <tr>
-            	<td>
-                <span class="course-name">${course_name} (HKS211.1x)</span>
-                <span class="deadline">Re-verify by <strong>${date}</strong></span>
-              </td>
-              <td>
+            <li class="item">
+                <div class="course-info">
+                  <h3 class="course-name">${course_name} (${course_number})</h3>
+                  <p class="deadline">Re-verify by <strong>${date}</strong></p>
+                </div>
+
             		% if status == "must_reverify":
-                  <a class="btn action-primary action-reverify" href="${reverse('verify_student_midcourse_reverify', kwargs={'course_id': course_id})}">Re-verify for HKS211.1x</a>
+                  <p class="reverify-status"><a class="btn action-primary action-reverify" href="${reverse('verify_student_midcourse_reverify', kwargs={'course_id': course_id})}">Re-verify for ${course_number}</a></p>
             		% elif status == "completed":
             		  Completed
             		% elif status == "failed":
             		  Failed
             		% endif
-              </td>
-            </tr>
+            </li>
           % endfor
-          </table>
+          </ul>
         </div>
 
         <div class="wrapper-reverification-help list-faq">