Merge pull request #8343 from edx/frances/fix/dashboard-button-styles

Modernize the dashboard button styles

lms/static/sass/base/_variables.scss

@@ -278,6 +278,8 @@ $honorcode-color-lvl2: tint($honorcode-color-lvl1, 33%);
 $audit-color-lvl1: $light-gray;
 $audit-color-lvl2: tint($audit-color-lvl1, 33%);
 
+// STATE: credit
+$credit-color-base: rgb(244,195,0); // accessible with black text
 
 // ====================
 

lms/static/sass/elements/_controls.scss

@@ -285,6 +285,60 @@
   }
 }
 
+// imitating the pattern library
+// starts with overrides
+%btn-pl-default-base {
+  @include box-sizing(border-box);
+  @extend %t-copy-base;
+  letter-spacing: 0; // reset letterspacing from elsewhere
+  @extend %btn-primary;
+  border: 1px solid darken($action-primary-bg,10%);
+  border-radius: 3px;
+  padding: ($baseline/2) $baseline;
+  background-color: $action-primary-fg;
+  color: darken($action-primary-bg,10%);
+  text-align: center;
+
+  &:hover,
+  &:focus {
+    border: 1px solid transparent;
+    background-color: $action-primary-bg;
+    color: $action-primary-fg;
+    text-decoration: none;
+  }
+}
+
+%btn-pl-primary-base {
+  @extend %btn-pl-default-base;
+  background-color: darken($action-primary-bg,10%);
+  color: $action-primary-fg;
+}
+
+%btn-pl-green-base {
+  @extend %btn-pl-default-base;
+  background-color: darken($green-d1,10%);
+  color: $action-primary-fg;
+
+  &:hover,
+  &:focus {
+    border: 1px solid transparent;
+    background-color: $green-d1;
+  }
+}
+
+%btn-pl-yellow-base {
+  @extend %btn-pl-default-base;
+  border: 1px solid transparent;
+  background-color: $credit-color-base;
+  color: $base-font-color;
+
+  &:hover,
+  &:focus {
+    border: 1px solid darken($credit-color-base,10%);
+    background-color: lighten($credit-color-base,20%);
+  }
+}
+
 // ====================
 
   // application: canned actions

lms/static/sass/multicourse/_dashboard.scss

@@ -511,25 +511,11 @@
       }
 
       .enter-course {
-        @include button(simple, $button-color);
-        @include box-sizing(border-box);
-        border-radius: 3px;
+        @extend %btn-pl-primary-base;
         @include float(right);
-        font: normal 15px/1.6rem $sans-serif;
-        letter-spacing: 0;
-        text-align: center;
 
         &.archived {
-          @include button(simple, $button-archive-color);
-          font: normal 15px/1.6rem $sans-serif;
-
-          &:hover, &:focus {
-            text-decoration: none;
-          }
-        }
-
-        &:hover, &:focus {
-          text-decoration: none;
+          @extend %btn-pl-default-base;
         }
       }
     }
@@ -898,15 +884,8 @@
             position: relative;
 
             .cta {
-              @include button(simple, $green-d1);
-              @include box-sizing(border-box);
+              @extend %btn-pl-green-base;
               @include float(right);
-              border-radius: 3px;
-              display: block;
-              font: normal 15px/1.6rem $sans-serif;
-              letter-spacing: 0;
-              padding: 6px 32px 7px;
-              text-align: center;
             }
           }
         }