LMS: adding rendering/styling support for initial professional ed course types on student dashboard

lms/static/sass/base/_variables.scss

@@ -227,6 +227,13 @@ $verified-color-lvl3: $m-green-l2;
 $verified-color-lvl4: $m-green-l3;
 $verified-color-lvl5: $m-green-l4;
 
+// STATE: professional ed
+$professional-color-lvl1: $m-pink;
+$professional-color-lvl2: $m-pink-l1;
+$professional-color-lvl3: $m-pink-l2;
+$professional-color-lvl4: $m-pink-l3;
+$professional-color-lvl5: $m-pink-l4;
+
 // STATE: honor code
 $honorcode-color-lvl1: rgb(50, 165, 217);
 $honorcode-color-lvl2: tint($honorcode-color-lvl1, 33%);

lms/static/sass/multicourse/_dashboard.scss

@@ -495,6 +495,33 @@
 
       // ====================
 
+      // CASE: "enrolled as" status - professional ed
+      &.professional {
+
+        // changes to cover
+        .cover {
+          border-color: $professional-color-lvl3;
+          padding: ($baseline/10);
+        }
+
+        // course enrollment status message
+        .sts-enrollment {
+          position: absolute;
+          left: 30px;
+          width: auto;
+
+          .label {
+            @extend %text-sr;
+          }
+
+          // status message
+          .sts-enrollment-value {
+            background: $professional-color-lvl3;
+            color: tint($professional-color-lvl1, 95%);
+          }
+        }
+      }
+
       // CASE: "enrolled as" status - verified
       &.verified {
 

lms/templates/dashboard/_dashboard_course_listing.html

@@ -56,6 +56,11 @@
             <span class="label">${_("Enrolled as: ")}</span>
             <span class="sts-enrollment-value">${_("Auditing")}</span>
           </span>
+        % elif enrollment.mode == "professional":
+          <span class="sts-enrollment" title="${_("You're enrolled as a professional education student")}">
+          <span class="label">${_("Enrolled as: ")}</span>
+          <span class="sts-enrollment-value">${_("Professional Ed")}</span>
+        </span>
         % endif
     % endif