Fix program listing and detail page styling

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

@@ -100,13 +100,13 @@
 
   .cta-primary {
     display: inline-block;
-    background-color: palette(success, back);
-    border-color: palette(success, accent);
+    background-color: palette(success, text);
+    border-color: palette(success, text);
 
     &:active,
     &:focus,
     &:hover {
-      background-color: palette(success, back);
+      background-color: palette(success, accent);
       border-color: palette(success, accent);
     }
   }

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

@@ -146,7 +146,7 @@
 
   .progress {
     height: 5px;
-    background: palette(grayscale, x-back);
+    background: palette(grayscale, back);
 
     .bar {
       @include float(left);
@@ -154,11 +154,11 @@
       position: relative;
 
       &.complete {
-        background: palette(success, back);
+        background: palette(success, accent);
       }
 
       &.in-progress {
-        background: palette(warning, back);
+        background: palette(warning, accent);
       }
     }
   }

lms/static/sass/shared-v2/_variables.scss

 // LMS variables
 
 $lms-gray: palette(grayscale, base);
-$lms-background-color: palette(grayscale, x-back);  // Why is the Pattern Library default background different?
+$lms-background-color: rgb(252, 252, 252);  // Correct shade of grey not available in the Pattern Library
 $lms-container-background-color: $white;
 $lms-border-color: palette(grayscale, back);
 $lms-label-color: palette(grayscale, black);

lms/static/sass/views/_program-list.scss

@@ -22,7 +22,6 @@
   .aside {
     padding: $baseline;
     margin-bottom: $baseline;
-    background-color: $body-bg;
     box-sizing: border-box;
     border: 1px solid $border-color-l3;
   }
@@ -30,7 +29,7 @@
   .program-advertise {
     clear: both;
 
-    .btn-neutral {
+    .new-programs-btn {
       width: 100%;
       text-align: center;
       padding: 10px;

lms/templates/learner_dashboard/certificate_status.underscore

@@ -7,6 +7,6 @@
     <a href="<%- certificate_url %>" class="btn-brand cta-secondary">
         <% // safe-lint: disable=underscore-not-escaped %>
         <span class="certificate-icon blue-certificate-icon" aria-hidden="true"><%= certificateSvg %></span>
-        <%- gettext('View/Share Certificate') %>
+        <%- gettext('View Certificate') %>
     </a>
 </div>

lms/templates/learner_dashboard/course_enroll.underscore

 <% if (is_enrolled) { %>
     <div class="enrollment-info"><%- gettext('enrolled') %></div>
     <% if (is_enrollment_open || is_course_ended) { %>
-        <a href="<%- course_url %>" class="btn-neutral btn view-course-link">
+        <a href="<%- course_url %>" class="btn view-course-link">
             <% if (is_enrollment_open) { %>
                 <%- gettext('View Course') %>
             <% } else if (is_course_ended) { %>

lms/templates/learner_dashboard/empty_programs_list.underscore

 <section class="empty-programs-message">
     <h2 class="hd-3"><%- gettext('You are not enrolled in any programs yet.') %></h2>
-    <a class="btn-neutral" href="<%- marketingUrl %>">
+    <a class="btn-brand" href="<%- marketingUrl %>">
         <span class="icon fa fa-search" aria-hidden="true"></span>
         <span><%- gettext('Explore Programs') %></span>
     </a>

lms/templates/learner_dashboard/explore_new_programs.underscore

@@ -2,7 +2,7 @@
     <%- gettext('Browse recently launched courses and see what\'s new in your favorite subjects') %>
 </div>
 <div class="ad-link">
-    <a href="<%- marketingUrl %>" class="btn-neutral">
+    <a href="<%- marketingUrl %>" class="btn new-programs-btn">
         <span class="icon fa fa-search" aria-hidden="true"></span>
         <span><%- gettext('Explore New Programs') %></span>
     </a>