ECOM-4219 Add coming soon message styles to the course cards (#12890)

lms/static/js/spec/learner_dashboard/course_card_view_spec.js

@@ -108,8 +108,8 @@ define([
                 expect(view.$('.course-details .course-text .course-key').html()).toEqual(context.key);
                 expect(view.$('.course-details .course-text .run-period').length).toBe(0);
                 expect(view.$('.no-action-message').text().trim()).toBe('Coming Soon');
-                expect(view.$('.enroll-open-date').text().trim())
-                    .toBe(context.run_modes[0].enrollment_open_date);
+                expect(view.$('.enrollment-open-date').text().trim())
+                    .toEqual(context.run_modes[0].enrollment_open_date);
             });
 
             it('should render if enrollment_open_date is not provided', function(){

lms/static/sass/elements/_course-card.scss

@@ -15,7 +15,10 @@
     @include float(left);
 
     .header-img {
-      max-width: 191px;
+      max-width: 100%;
+      @include susy-media($bp-screen-sm) {
+        max-width: 191px;
+      }
     }
   }
 
@@ -55,16 +58,18 @@
     }
     .no-action-message{
       margin-bottom: $baseline/2;
-      color: palette(grayscale, black);
+      color: palette(grayscale, dark);
       font-size: font-size(large);
       text-align: center;
+      text-transform: uppercase;
+      margin-top: $baseline*2;
     }
     .enrollment-opens{
       text-align: center;
       margin-bottom: $baseline/2;
-    }
-    .enroll-open-date{
-      text-align: center;
+      .enrollment-open-date{
+         white-space: nowrap;
+      }
     }
     .run-select-container{
       margin-bottom: $baseline;

lms/templates/learner_dashboard/course_enroll.underscore

@@ -49,10 +49,10 @@
             <%- gettext('Coming Soon') %>
         </div>
         <div class="enrollment-opens">
-            <%- gettext('Enrollment Opens') %>
-        </div>
-        <div class="enroll-open-date">
-            <%- enrollment_open_date %>
+            <%- gettext('Enrollment Opens on') %>
+            <span class="enrollment-open-date">
+                <%- enrollment_open_date %>
+            </span>
         </div>
     <% } %>
 <% } %>