dashboard program styling tweaks

lms/static/js/fixtures/dashboard/dashboard.html

@@ -76,7 +76,7 @@
                 <div class="message message-upsell has-actions is-shown">
                     <div class="wrapper-extended">
                         <p class="message-copy" align="justify">
-                            <b class="message-copy-bold">Pursue a Certificate of Achievement to highlight the knowledge and skills you gain in this course.</b>
+                            <b class="message-copy-bold">Pursue a Certificate of Achievement in this course.</b>
                             <br>
                             It's official. It's easily shareable. It's a proven motivator to complete the course.
                             <br>
@@ -145,7 +145,7 @@
                 <div class="message message-upsell has-actions is-shown">
                     <div class="wrapper-extended">
                         <p class="message-copy" align="justify">
-                            <b class="message-copy-bold">Pursue a Certificate of Achievement to highlight the knowledge and skills you gain in this course.</b>
+                            <b class="message-copy-bold">Pursue a Certificate of Achievement in this course.</b>
                             <br>
                             It's official. It's easily shareable. It's a proven motivator to complete the course.
                             <br>

lms/static/sass/multicourse/_dashboard.scss

@@ -12,7 +12,7 @@
 
   // Contains main course card listings
   .main-container {
-    @include padding($baseline*2, $baseline, $baseline, $baseline*2);
+    padding: $baseline;
 
     flex-grow: 8;
     order: 1;
@@ -90,7 +90,7 @@
 
               width: 100%;
               position: relative;
-              bottom: 15px;
+              bottom: 20px;
               display: inline-block;
               text-align: center;
 
@@ -154,6 +154,7 @@
 
               display: block;
               padding: 0;
+              margin-top: $baseline;
 
               [class*="info-"] {
                 color: $gray-d1;
@@ -397,7 +398,6 @@
           // changes to cover
           .wrapper-course-image .cover {
             border-color: $professional-color-lvl3;
-            padding: ($baseline/10);
           }
 
           // course enrollment status message
@@ -419,7 +419,6 @@
           // changes to cover
           .wrapper-course-image .cover {
             border-color: $verified-color-lvl1;
-            padding: ($baseline/10);
           }
 
           // course enrollment status message
@@ -451,7 +450,6 @@
           // changes to cover
           .wrapper-course-image .cover {
             border-color: $honorcode-color-lvl2;
-            padding: ($baseline/10);
           }
 
           // status message
@@ -466,7 +464,6 @@
           // changes to cover
           .wrapper-course-image .cover {
             border-color: $audit-color-lvl2;
-            padding: ($baseline/10);
           }
 
           // status message
@@ -485,7 +482,7 @@
 
   // Secondary functionality
   .side-container {
-    @include padding($baseline*2, $baseline*2, $baseline, $baseline);
+    padding: $baseline;
 
     max-width: $baseline*20;
     min-width: $baseline*20;
@@ -1015,22 +1012,20 @@
 
     &.message-related-programs {
       background: none;
-      padding: $baseline/2;
+      padding: $baseline/2 $baseline;
       margin-bottom: 0;
 
       .related-programs-preface {
         @include float(left);
-
-        font-weight: bold;
       }
 
-      ul {
+      .related-program-list {
         display: inline;
         padding: 0;
         margin: 0;
       }
 
-      li {
+      .related-program-listitem {
         @include float(left);
 
         display: inline;
@@ -1131,7 +1126,7 @@
 // status - verification
 .status-verification {
   list-style: none;
-  padding: $baseline/2;
+  padding: $baseline;
 
   .status-title {
     margin: 0 0 ($baseline/4) 0;

lms/templates/dashboard/_dashboard_course_listing.html

@@ -270,9 +270,9 @@ from util.course import get_link_for_about_page, get_encoded_course_sharing_utm_
       % if related_programs:
       <div class="message message-related-programs is-shown">
         <span class="related-programs-preface" tabindex="0">${_('Related Programs')}:</span>
-        <ul>
+        <ul class="related-program-list">
           % for program in related_programs:
-          <li>
+          <li class="related-program-listitem">
             <span class="category-icon ${program['type'].lower()}-icon" aria-hidden="true"></span>
             <span><a href="${program['detail_url']}">${u'{title} {type}'.format(title=program['title'], type=program['type'])}</a></span>
           </li>
@@ -364,7 +364,7 @@ from util.course import get_link_for_about_page, get_encoded_course_sharing_utm_
             <div class="wrapper-extended">
               <p class="message-copy" align="justify">
                 <b class="message-copy-bold">
-                  ${_("Pursue a {cert_name_long} to highlight the knowledge and skills you gain in this course.").format(cert_name_long=cert_name_long)}
+                  ${_("Pursue a {cert_name_long} in this course.").format(cert_name_long=cert_name_long)}
                 </b><br>
                   ${Text(_("It's official. It's easily shareable. "
                       "It's a proven motivator to complete the course. {line_break}"