added notification styles for re-verification and general on LMS

lms/static/sass/base/_variables.scss

@@ -224,6 +224,15 @@ $error-color: $error-red;
 $warning-color: $m-pink;
 $confirm-color: $m-green;
 
+// Notifications
+$notify-banner-bg1: rgb(56,56,56);
+$notify-banner-bg2: rgb(136,136,136);
+$notify-banner-bg3: rgb(223,223,223);
+
+$alert-color: rgb(212, 64, 64); //rich red
+$warning-color: rgb(237, 189, 60); //rich yellow
+$success-color: rgb(37, 184, 90); //rich green
+
 // ====================
 
 // MISC: visual horizontal rules

lms/static/sass/elements/_system-feedback.scss

@@ -5,11 +5,12 @@
 
 // UI : message
 .wrapper-msg {
-  box-shadow: 0 0 5px $action-primary-shadow inset;
-  margin-bottom: ($baseline*1.5);
+  box-shadow: 0 0 5px $shadow-d1 inset;
+  margin-bottom: ($baseline/4);
   padding: $baseline ($baseline*1.5);
-  background: $action-primary-bg;
+  background: $notify-banner-bg1;
 
+  // basic object
   .msg {
     @include clearfix();
     max-width: grid-width(12);
@@ -25,24 +26,23 @@
   }
 
   .msg-content {
-    width: flex-grid(10,12);
 
     .title {
       @extend %t-title5;
       @extend %t-weight4;
       margin-bottom: ($baseline/4);
-      color: $white;
+      color: inherit;
       text-transform: none;
       letter-spacing: 0;
     }
 
     .copy {
       @extend %t-copy-sub1;
-      color: $white;
+      color: inherit;
 
       p { // nasty reset
         @extend %t-copy-sub1;
-        color: $white;
+        color: inherit;
       }
     }
   }
@@ -57,6 +57,7 @@
       width: flex-grid(2,12);
       display: inline-block;
       vertical-align: middle;
+      text-align: right;
 
       .action-primary {
         @extend %btn-primary-green;
@@ -64,7 +65,65 @@
     }
   }
 
+  .is-dismissable {
+
+    .msg-content {
+      width: flex-grid(11,12);
+    }
+
+    .action-dismiss {
+      width: flex-grid(1,12);
+      display: inline-block;
+      vertical-align: top;
+      text-align: right;
+
+      .button-dismiss {  //ugly reset on button element
+        @extend %t-icon4;
+        background: none;
+        box-shadow: none;
+        border: none;
+        text-shadow: none;
+        color: inherit;
+      }
+    }
+  }
+
+  // object variations
+  &.urgency-high {
+    background: $notify-banner-bg1;
 
+    .msg {
+      color: $white;
+    }
+  }
+
+  &.urgency-mid {
+    background: $notify-banner-bg2;
+
+    .msg {
+      color: $white;
+    }
+  }
+
+  &.urgency-low {
+    background: $notify-banner-bg3;
+
+    .msg {
+      color: $black;
+    }
+  }
+
+  &.alert {
+    border-top: 3px solid $alert-color;
+  }
+
+  &.warning {
+    border-top: 3px solid $warning-color;
+  }
+
+  &.success {
+    border-top: 3px solid $success-color;
+  }
 }
 
 // prompts

lms/static/sass/multicourse/_dashboard.scss

@@ -133,6 +133,51 @@
           }
         }
       }
+
+      .reverify-status-list {
+        padding: 0 0 0 9px;
+
+        .status-item {
+          @extend %t-copy-sub2;
+          margin-bottom: 7px;
+          border-bottom: 0;
+          padding: 0;
+
+          [class^="icon-"] {
+            display: inline-block;
+            vertical-align: top;
+            margin: ($baseline/10) ($baseline/4) 0 0;
+          }
+
+          &.is-open [class^="icon-"] {
+            color: $action-primary-bg;
+          }
+
+          &.is-pending [class^="icon-"] {
+            color: $warning-color;
+          }
+
+          &.is-approved [class^="icon-"] {
+            color: $success-color;
+          }
+
+          &.is-denied [class^="icon-"] {
+            color: $alert-color;
+          }
+
+          .label {
+            @extend %text-sr;
+          }
+
+          .course-name {
+            display: inline-block;
+            vertical-align: top;
+            width: 80%;
+            color: inherit;
+            line-height: 1.4;
+          }
+        }
+      }
     }
 
     .news-carousel {

lms/static/sass/views/_verification.scss

@@ -1832,8 +1832,9 @@
       }
 
       .reverification-list {
+        margin-right: ($baseline*1.5);
+        padding: 0;
         list-style-type: none;
-        padding: 0 $baseline;
 
         .item {
           box-shadow: 0 2px 5px 0 $shadow-l1 inset;
@@ -1841,7 +1842,15 @@
           border: 1px solid $m-gray-t2;
 
           &.complete {
-            border: 1px solid $verified-color-lvl1;
+            border: 1px solid $verified-color-lvl3;
+
+            .course-info {
+              opacity: .5;
+
+              .course-name {
+                font-weight: normal;
+              }
+            }
 
             .reverify-status {
               border-top: 1px solid $light-gray;
@@ -1852,7 +1861,15 @@
           }
 
           &.failed {
-            border: 1px solid $danger-red;
+            border: 1px solid $error-red;
+
+            .course-info {
+              opacity: .5;
+
+              .course-name {
+                font-weight: normal;
+              }
+            }
 
             .reverify-status {
               border-top: 1px solid $light-gray;
@@ -1914,6 +1931,13 @@
     }
 
     // step-photos
+    &.step-photos {
+
+      .block-photo .title {
+        @extend %t-title4;
+        color: $m-blue-d1;
+      }
+
       .wrapper-task {
         @include clearfix();
         width: flex-grid(12,12);
@@ -2070,7 +2094,6 @@
         }
       }
 
-
       .review-task {
         margin-bottom: ($baseline*1.5);
         padding: ($baseline*0.75) $baseline;
@@ -2099,6 +2122,7 @@
       // individual task - name
       .review-task-name {
         @include clearfix();
+        border: 1px solid $light-gray;
 
         .copy {
           float: left;
@@ -2182,6 +2206,7 @@
       }
 
     }
+  }
 
 
 

lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html

@@ -2,8 +2,9 @@
 <%! from django.core.urlresolvers import reverse %>
 <!--TODO replace this with something a clever deisgn person approves of-->
 <!--TODO replace this with a shiny loopy thing to actually print out all courses-->
+
 % if reverifications["must_reverify"]:
-<div class="wrapper-msg">
+<div class="wrapper-msg urgency-high">
   <div class="msg msg-reverify has-actions">
       <div class="msg-content">
         <h2 class="title">${_("You need to re-verify to continue")}</h2>
@@ -27,8 +28,8 @@
 %endif
 
 %if reverifications["denied"]:
-<div class="wrapper-msg">
-  <div class="msg msg-reverify has-actions">
+<div class="wrapper-msg urgency-low">
+  <div class="msg msg-reverify is-dismissable">
       <div class="msg-content">
         <h2 class="title">${_("Your re-verification failed")}</h2>
         % for course_id, course_name, course_number, date, status in reverifications["denied"]:
@@ -38,6 +39,9 @@
           </p>
         </div>
       </div>
+      <div class="action-dismiss">
+        <button class="button-dismiss"><i class="icon-remove-sign"></i> <span class="sr">Dismiss</span></button>
+      </div>
     </div>
   </div>
 </div>

lms/templates/dashboard/_dashboard_reverification_sidebar.html

@@ -2,31 +2,36 @@
 <%! from django.core.urlresolvers import reverse %>
 <!--TODO replace this with something a clever deisgn person approves of-->
 <!--TODO replace this with a shiny loopy thing to actually print out all courses-->
+
 % if reverifications["must_reverify"] or reverifications["pending"] or reverifications["denied"] or reverifications["approved"]:
+<li class="status status-verification is-accepted">
+  <span class="title status-title">${_("Re-verification now open for:")}</span>
+
+    <ul class="reverify-status-list">
 
-    <h2 class="title">${_("Re-verification now open for")}</h2>
     % if reverifications["must_reverify"]:
         % for course_id, course_name, course_number, date, status in reverifications["must_reverify"]:
-            ${_('Must Reverify: <strong>{course_name}</strong>').format(course_name=course_name)}
+            <li class="status-item is-open">${_('<i class="icon-circle"></i><span class="label">Re-verify now:</span> <span class="course-name"><a href="">{course_name}</span></a>').format(course_name=course_name)}</li>
         % endfor
     %endif
 
     % if reverifications["pending"]:
         % for course_id, course_name, course_number, date, status in reverifications["pending"]:
-            ${_('Denied: <strong>{course_name}</strong>').format(course_name=course_name)}
+            <li class="status-item is-pending">${_('<i class="icon-circle"></i><span class="label">Pending:</span> <span class="course-name"><a href="">{course_name}</span></a>').format(course_name=course_name)}</li>
         % endfor
     %endif
 
     % if reverifications["denied"]:
         % for course_id, course_name, course_number, date, status in reverifications["denied"]:
-            ${_('Denied: <strong>{course_name}</strong>').format(course_name=course_name)}
+            <li class="status-item is-denied">${_('<i class="icon-remove-sign"></i><span class="label">Denied:</span> <span class="course-name"><a href="">{course_name}</span></a>').format(course_name=course_name)}</li>
         % endfor
     %endif
 
     % if reverifications["approved"]:
         % for course_id, course_name, course_number, date, status in reverifications["approved"]:
-            ${_('Denied: <strong>{course_name}</strong>').format(course_name=course_name)}
+            <li class="status-item is-approved">${_('<i class="icon-ok"></i><span class="label">Approved:</span> <span class="course-name"><a href="">{course_name}</span></a>').format(course_name=course_name)}</li>
         % endfor
     %endif
-
+    </ul>
+</li>
 %endif