Merge pull request #12230 from edx/schen/ECOM-4272

ECOM-4272 Add the cosmetic changes to the program listing page

lms/static/js/spec/learner_dashboard/program_card_view_spec.js

@@ -56,7 +56,7 @@ define([
                 expect($cards).toBeDefined();
                 expect($cards.find('.title').html().trim()).toEqual(program.name);
                 expect($cards.find('.category span').html().trim()).toEqual('XSeries Program');
-                expect($cards.find('.organization').html().trim()).toEqual(program.organizations[0].display_name);
+                expect($cards.find('.organization').html().trim()).toEqual(program.organizations[0].key);
                 expect($cards.find('.card-link').attr('href')).toEqual(program.marketing_url);
             });
 

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

@@ -19,7 +19,7 @@
     left: 0;
     border: 0;
     z-index: 1;
-    opacity: 0.5;
+    opacity: 0.8;
     &:hover,
     &:focus{
       opacity: 1;
@@ -69,7 +69,7 @@
     }
     .title{
       font-size: em(24);
-      color: $gray-l1;
+      color: $gray-d2;
       margin-bottom: 10px;
       line-height: 1.2;
     }

lms/static/sass/shared/_header.scss

@@ -263,13 +263,16 @@ header.global {
     list-style: none;
     @include float(left);
     .tab-nav-item{
-      display: inline;
+      display: flex;
       margin: 0px;
+      text-transform: none;
+      @include float(left);
+      justify-content: center;
       .tab-nav-link{
         font-size: em(16);
         color: $gray;
-        padding: 26px 15px;
-        display: inline;
+        padding: 5px 25px 23px;
+        display: inline-block;
         &:hover,
         &:focus{
           border-bottom: 4px solid $courseware-border-bottom-color;
@@ -393,13 +396,16 @@ header.global-new {
   .nav-global {
     @include float(left);
     .tab-nav-item{
-      display: inline;
+      display: flex;
       margin: 0px;
+      text-transform: none;
+      @include float(left);
+      justify-content: center;
       .tab-nav-link{
         font-size: em(16);
         color: $gray;
-        display: inline;
-        padding: 25px 15px;
+        display: inline-block;
+        padding: 5px 25px 19px;
         &:hover,
         &:focus{
           border-bottom: 4px solid $courseware-border-bottom-color;

lms/templates/learner_dashboard/program_card.underscore

@@ -14,7 +14,7 @@
     <div class="meta-info">
         <div class="organization">
             <% _.each(organizations, function(org){ %>
-                <%- gettext(org.display_name) %>
+                <%- gettext(org.key) %>
             <% }); %>
         </div>
         <div class="category">