LMS: adding visual reinforcement of a user's enrollment type (per course) to Dashboard UI

LMS-1071

lms/static/sass/base/_variables.scss

@@ -227,6 +227,15 @@ $verified-color-lvl3: $m-green-l2;
 $verified-color-lvl4: $m-green-l3;
 $verified-color-lvl5: $m-green-l4;
 
+// STATE: honor code
+$honorcode-color-lvl1: rgb(50, 165, 217);
+$honorcode-color-lvl2: tint($honorcode-color-lvl1, 33%);
+
+// STATE: audit
+$audit-color-lvl1: $light-gray;
+$audit-color-lvl2: tint($audit-color-lvl1, 33%);
+
+
 // ====================
 
 // ACTIONS: general
@@ -307,6 +316,7 @@ $dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(2
 $dashboard-profile-header-color: transparent;
 $dashboard-profile-color: rgb(252,252,252);
 $dot-color: $light-gray;
+$dashboard-course-cover-border: $light-gray;
 
 // MISC: course assets
 $content-wrapper-bg: $white;
@@ -380,4 +390,3 @@ $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
 // SPLINT: colors
 
 $msg-bg: $action-primary-bg;
-

lms/static/sass/elements/_typography.scss

@@ -277,7 +277,7 @@
 }
 
 %copy-badge {
-  @extend %t-title8;
+  @extend %t-title9;
   @extend %t-weight3;
   border-radius: ($baseline/5);
   padding: ($baseline/2) $baseline;

lms/static/sass/multicourse/_dashboard.scss

@@ -374,15 +374,19 @@
 
       .cover {
         @include box-sizing(border-box);
+        @include transition(all 0.15s linear 0s);
+        overflow: hidden;
+        position: relative;
         float: left;
         height: 100%;
         max-height: 100%;
-        margin: 0px;
-        overflow: hidden;
-        position: relative;
-        @include transition(all 0.15s linear 0s);
         width: 200px;
         height: 120px;
+        margin: 0px;
+        border-radius: ($baseline/10);
+        border: 1px solid $dashboard-course-cover-border;
+        border-bottom: 4px solid $dashboard-course-cover-border;
+        padding: ($baseline/10);
 
         img {
           width: 100%;
@@ -491,28 +495,43 @@
         }
       }
 
+      // "enrolled as" status
+      .sts-enrollment {
+        position: absolute;
+        top: 105px;
+        left: 0;
+        display: inline-block;
+        text-align: center;
+        width: 200px;
+
+        .label {
+          @extend %text-sr;
+        }
+
+        .sts-enrollment-value {
+          @extend %ui-depth1;
+          @extend %copy-badge;
+          border-radius: 0;
+          padding: ($baseline/4) ($baseline/2) ($baseline/4) ($baseline/2);
+        }
+      }
+
       // ====================
 
-      // STATE: course mode - verified
+      // CASE: "enrolled as" status - verified
       &.verified {
-        @extend %ui-depth2;
-        position: relative;
 
+        // changes to cover
         .cover {
-          border-radius: ($baseline/10);
-          border: 1px solid $verified-color-lvl3;
-          border-bottom: 4px solid $verified-color-lvl3;
+          border-color: $verified-color-lvl3;
           padding: ($baseline/10);
         }
 
         // course enrollment status message
         .sts-enrollment {
-          display: inline-block;
           position: absolute;
-          top: 105px;
           left: 55px;
-          bottom: ($baseline/2);
-          text-align: center;
+          width: auto;
 
           .label {
             @extend %text-sr;
@@ -526,16 +545,46 @@
             top: -10px;
           }
 
+          // status message
           .sts-enrollment-value {
-            @extend %ui-depth1;
-            @extend %copy-badge;
-            border-radius: 0;
             padding: ($baseline/4) ($baseline/2) ($baseline/4) $baseline;
             background: $verified-color-lvl3;
-            color: $white;
+            color: tint($verified-color-lvl1, 85%);
           }
         }
       }
+
+      // CASE: "enrolled as" status - honor code
+      &.honor {
+
+        // changes to cover
+        .cover {
+          border-color: $honorcode-color-lvl2;
+          padding: ($baseline/10);
+        }
+
+        // status message
+        .sts-enrollment-value {
+          background: $honorcode-color-lvl1;
+          color: tint($honorcode-color-lvl1, 85%);
+        }
+      }
+
+      // CASE: "enrolled as" status - auditing
+      &.audit {
+
+        // changes to cover
+        .cover {
+          border-color: $audit-color-lvl2;
+          padding: ($baseline/10);
+        }
+
+        // status message
+        .sts-enrollment-value {
+          background: $audit-color-lvl1;
+          color: shade($audit-color-lvl1, 33%);
+        }
+      }
     }
 
     // ====================

lms/templates/dashboard/_dashboard_course_listing.html

@@ -11,7 +11,7 @@
   cert_name_short = course.cert_name_short
   if cert_name_short == "":
     cert_name_short = settings.CERT_NAME_SHORT
-  
+
   cert_name_long = course.cert_name_long
   if cert_name_long == "":
     cert_name_long = settings.CERT_NAME_LONG
@@ -37,11 +37,21 @@
     % endif
 
     % if enrollment.mode == "verified":
-      <span class="sts-enrollment">
+      <span class="sts-enrollment" title="${_("You're enrolled as a verified student")}">
         <span class="label">${_("Enrolled as: ")}</span>
         <img class="deco-graphic" src="${static.url('images/vcert-ribbon-s.png')}" alt="ID Verified Ribbon/Badge" />
         <span class="sts-enrollment-value">${_("ID Verified")}</span>
       </span>
+    % elif enrollment.mode == "honor":
+      <span class="sts-enrollment" title="${_("You're enrolled as an honor code student")}">
+        <span class="label">${_("Enrolled as: ")}</span>
+        <span class="sts-enrollment-value">${_("Honor Code")}</span>
+      </span>
+    % elif enrollment.mode == "audit":
+      <span class="sts-enrollment" title="${_("You're auditing this course")}>
+        <span class="label">${_("Enrolled as: ")}</span>
+        <span class="sts-enrollment-value">${_("Auditing")}</span>
+      </span>
     % endif
 
     <section class="info">