LMS: adds in collapse/expand UI for dashboard view upsell

lms/static/sass/multicourse/_dashboard.scss

@@ -523,7 +523,7 @@
       .message-copy,
       .message-copy .copy {
         @extend %t-copy-sub1;
-        margin: 0;
+        margin: 2px 0 0 0;
       }
 
       // CASE: expandable
@@ -532,15 +532,18 @@
         .wrapper-tip {
 
           .message-title, .message-copy {
-            @include transition(color 0.25s ease-in-out 0);
             margin-bottom: 0;
           }
 
+          .message-title .value, .message-copy {
+            @include transition(color 0.25s ease-in-out 0s);
+          }
+
           // STATE: hover
           &:hover {
             cursor: pointer;
 
-            .message-title, .message-copy {
+            .message-title .value, .message-copy, .ui-toggle-expansion {
               color: $link-color;
             }
           }
@@ -555,6 +558,11 @@
         // STATE: is expanded
         &.is-expanded {
 
+          .ui-toggle-expansion {
+            @include transform(rotate(0));
+            @include transform-origin(50% 50%);
+          }
+
           .wrapper-extended {
             display: block;
             opacity: 1.0;
@@ -573,6 +581,16 @@
           float: left;
         }
 
+        .ui-toggle-expansion {
+          @include transition(all 0.25s ease-in-out 0s);
+          @include transform(rotate(-90deg));
+          @include transform-origin(50% 50%);
+          @include font-size(21);
+          display: inline-block;
+          vertical-align: middle;
+          margin-right: ($baseline/4);
+        }
+
         .message-copy {
           float: right;
         }

lms/templates/dashboard/_dashboard_course_listing.html

@@ -65,7 +65,10 @@
         <div class="message message-upsell has-actions is-expandable is-shown">
 
             <div class="wrapper-tip">
-              <h4 class="message-title">${_("Challenge Yourself!")}</h4>
+              <h4 class="message-title">
+                <i class="icon-caret-down ui-toggle-expansion"></i>
+                <span class="value">${_("Challenge Yourself!")}</span>
+              </h4>
               <p class="message-copy">${_("Take this course as an ID-verified student.")}</p>
             </div>