DEPR-66 Remove pattern library on programs_details (#23416)

2020-05-01 09:39:51 -05:00
parent 92b67cac64
commit ce96d6c92d
11 changed files with 346 additions and 104 deletions
--- a/lms/djangoapps/learner_dashboard/views.py
+++ b/lms/djangoapps/learner_dashboard/views.py
@@ -43,7 +43,7 @@ def program_details(request, program_uuid):
        'show_dashboard_tabs': True,
        'nav_hidden': True,
        'disable_courseware_js': True,
-        'uses_pattern_library': True,
+        'uses_bootstrap': True,
    }

    return render_to_response('learner_dashboard/program_details.html', context)
--- a/lms/static/sass/_build-learner-dashboard.scss
+++ b/lms/static/sass/_build-learner-dashboard.scss
@@ -12,6 +12,4 @@
@import 'elements/progress-circle';

 // Various View Styling
-@import 'views/course-entitlements';
-@import 'views/program-details';
@import 'views/program-list';
--- a/lms/static/sass/bootstrap/_legacy.scss
+++ b/lms/static/sass/bootstrap/_legacy.scss
@@ -40,8 +40,7 @@ $grid-breakpoints-lg: 992px !default;
 // Wrap grids with grid-container.
@mixin grid-container() {
  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
@@ -109,3 +108,41 @@ $shadow-l1: rgba(0, 0, 0, 0.1) !default;
 $shadow-l2: rgba(0, 0, 0, 0.05) !default;
 $shadow-d1: rgba(0, 0, 0, 0.4) !default;
 $shadow-d2: rgba($black, 0.6) !default;
+
+$primary-dark: rgba(6, 86, 131, 100) !default;
+$primary-dark1: mix($black, $blue, 20%) !default;
+$primary-dark2: desaturate($blue, 15%) !default;
+$primary-base: rgba(0, 117, 180, 100) !default;
+$primary-accent: rgba(41, 145, 195, 100) !default;
+
+$gray-dark: rgba(17, 17, 17, 100) !default;
+$gray-base: rgba(65, 65, 65, 100) !default;
+$gray-light1: rgb(252, 252, 252) !default;
+$gray-light2: mix($white, $gray, 60%) !default;
+$gray-light3: mix($white, $gray, 80%) !default;
+
+// ----------------------------
+// #COLORS- Bootstrap-style
+// ----------------------------
+
+$state-success-text: $black !default;
+$state-success-bg: #dff0d8 !default;
+$state-success-border: darken($state-success-bg, 5%) !default;
+
+$state-info-text: #31708f !default;
+$state-info-text-link: #245269 !default;
+$state-info-bg: #d9edf7 !default;
+$state-info-border: darken($state-info-bg, 7%) !default;
+
+$state-warning-text: $black !default;
+$state-warning-bg: #fcf8e3 !default;
+$state-warning-border: darken($state-warning-bg, 5%) !default;
+
+$state-danger-text: $black !default;
+$state-danger-bg: #f2dede !default;
+$state-danger-border: darken($state-danger-bg, 5%) !default;
+
+// logo colors
+$micromasters-color: #005585 !default;
+$zebra-stripe-color: rgb(249, 250, 252) !default;
+$divider-color: rgb(226, 231, 236) !default;
--- a/lms/static/sass/bootstrap/elements/_banners.scss
+++ b/lms/static/sass/bootstrap/elements/_banners.scss
@@ -0,0 +1,127 @@
+$full-width-banner-img-height: 260px !default;
+$full-width-banner-img-width: 1140px !default;
+$full-width-banner-margin: 20px;
+
+.full-width-banner {
+  position: relative;
+
+  .banner-background-wrapper {
+    height: $full-width-banner-img-height;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    background: $black;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: $black;
+      opacity: 0.65;
+
+      @include media-breakpoint-up(md) {
+        opacity: 0.4;
+      }
+    }
+  }
+
+  .banner-background-image {
+    height: $full-width-banner-img-height;
+
+    @include media-breakpoint-up($full-width-banner-img-width) {
+      height: auto;
+      width: 100%;
+    }
+  }
+
+  .banner-content {
+    position: absolute;
+    top: 0;
+    left: $full-width-banner-margin;
+    right: $full-width-banner-margin;
+  }
+}
+
+.page-banner {
+  max-width: map-get($grid-breakpoints, xl);
+  margin: 0 auto;
+
+  .user-messages {
+    padding-top: $baseline;
+
+    // Hack: force override the global important rule
+    // that courseware links don't have an underline.
+    a:hover {
+      color: $link-color;
+      text-decoration: underline !important;
+    }
+
+    .user-messages-ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li {
+        margin: 5px 0;
+      }
+    }
+  }
+
+  .alert {
+    display: flex;
+    padding: $baseline;
+    border: 1px solid;
+
+    &:not(:last-child) {
+      margin-bottom: $baseline / 2;
+    }
+
+    .icon-alert {
+      @include margin-right($baseline);
+    }
+
+    .message-actions {
+      @include margin-left($baseline);
+    }
+
+    &.alert-info {
+      color: $state-info-text;
+      background-color: $state-info-bg;
+      border-color: $state-info-border;
+      box-shadow: none;
+      line-height: initial;
+
+      a,
+      a:visited,
+      .btn-link {
+        color: $state-info-text-link;
+        font-weight: bold;
+        border-color: transparent;
+      }
+    }
+
+    &.alert-success {
+      color: $state-success-text;
+      background-color: $state-success-bg;
+      border-color: $state-success-border;
+      box-shadow: none;
+    }
+
+    &.alert-warning {
+      color: $state-warning-text;
+      background-color: $state-warning-bg;
+      border-color: $state-warning-border;
+      box-shadow: none;
+    }
+
+    &.alert-danger {
+      color: $state-danger-text;
+      background-color: $state-danger-bg;
+      border-color: $state-danger-border;
+      box-shadow: none;
+    }
+  }
+}
--- a/lms/static/sass/bootstrap/elements/_progress-circle.scss
+++ b/lms/static/sass/bootstrap/elements/_progress-circle.scss
@@ -0,0 +1,67 @@
+$progress-title-color: $primary-dark1 !default;
+$progress-complete-color: $primary-dark2 !default;
+$progress-incomplete-color: $gray-light2 !default;
+$progress-complete-number-color: $primary-dark1 !default;
+$progress-incomplete-number-color: $gray-600 !default;
+$progress-number-label-color: $gray-base !default;
+
+.program-progress {
+  width: 300px;
+  margin: 0 auto 30px;
+
+  @include media-breakpoint-up(md) {
+    margin-left: 0;
+  }
+}
+
+.progress-heading {
+  color: $progress-title-color;
+  text-align: center;
+  margin-bottom: 0;
+  font: {
+    size: 1.1em;
+    weight: 700;
+  }
+}
+
+.progress-circle-wrapper {
+  position: relative;
+  margin-top: -20px;
+  width: 300px;
+  height: 300px;
+
+  .progress-label {
+    position: absolute;
+    width: 100%;
+    top: 92px;
+    text-align: center;
+  }
+
+  .numbers {
+    font-size: 3em;
+    color: $progress-incomplete-number-color;
+
+    .complete {
+      color: $progress-complete-number-color;
+    }
+  }
+
+  .label {
+    font: {
+      size: 1.1em;
+      weight: 600;
+    }
+
+    color: $progress-number-label-color;
+  }
+}
+
+.progress-circle {
+  .complete {
+    stroke: $progress-complete-color;
+  }
+
+  .incomplete {
+    stroke: $progress-incomplete-color;
+  }
+}
--- a/lms/static/sass/bootstrap/lms-main.scss
+++ b/lms/static/sass/bootstrap/lms-main.scss
@@ -18,6 +18,8 @@ $static-path: '../..';
@import 'course/layout/reset_deadlines';
@import 'shared/modal';
@import 'shared/help-tab';
+@import './elements/banners';
+@import './elements/progress-circle';

 // Features
@import 'features/bookmarks';
@@ -33,6 +35,8 @@ $static-path: '../..';
 // Individual Pages
@import "views/program-marketing-page";
@import "views/entitlement-support-page";
+@import "views/course-entitlements";
+@import "views/program-details";

 // Responsive Design
@import '../header';
--- a/lms/static/sass/elements/_banners.scss
+++ b/lms/static/sass/elements/_banners.scss
@@ -59,18 +59,17 @@ $full-width-banner-margin: 20px;
      text-decoration: underline !important;
    }

-  .user-messages-ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+    .user-messages-ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;

-    li {
-      margin: 5px 0;
+      li {
+        margin: 5px 0;
+      }
    }
  }

-  }
-
  .alert {
    display: flex;
    padding: $baseline;
--- a/lms/static/sass/views/_course-entitlements.scss
+++ b/lms/static/sass/views/_course-entitlements.scss
@@ -120,9 +120,8 @@
    padding-top: $baseline/2;

    .action-header,
-    .action-controls .session-select{
+    .action-controls .session-select {
      font-size: $font-size-sm;
-
    }
  }
 }
--- a/lms/static/sass/views/_program-details.scss
+++ b/lms/static/sass/views/_program-details.scss
@@ -4,7 +4,7 @@

 // +local variables/utilities:
 // ----------------------
-$btn-color-primary: palette(primary, dark);
+$btn-color-primary: $primary-dark;

 .program-details {
  .content-wrapper {
@@ -44,7 +44,7 @@ $btn-color-primary: palette(primary, dark);
  .breadcrumb-wrapper {
    padding: $full-width-banner-margin;

-    @media (min-width: $bp-screen-xl) {
+    @include media-breakpoint-up(xl) {
      padding-left: 0;
    }
  }
@@ -60,21 +60,21 @@ $btn-color-primary: palette(primary, dark);
    position: relative;
    font-size: font-size(x-small);
    line-height: line-height(x-small);
-    color: palette(grayscale, dark);
+    color: $gray-dark;

    &.active {
-      color: palette(grayscale, dark);
+      color: $gray-dark;
    }
  }

  .crumb-link {
    font-size: inherit;
    line-height: inherit;
-    color: palette(primary, base);
+    color: $primary-base;

    &:hover,
    &:focus {
-      color: palette(grayscale, black);
+      color: $gray-dark;
      text-decoration: underline;
    }
  }
@@ -102,7 +102,7 @@ $btn-color-primary: palette(primary, dark);

 .program-details-wrapper {
  .program-details-header {
-    background-color: $light-gray4;
+    background-color: $gray-light1;
    display: flex;
    color: black;
    font-family: 'Open Sans';
@@ -110,7 +110,7 @@ $btn-color-primary: palette(primary, dark);
    flex-wrap: wrap;
    padding: 40px 10px 35px;

-    @media (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(md) {
      padding: {
        left: 30px;
        right: 30px;
@@ -127,7 +127,7 @@ $btn-color-primary: palette(primary, dark);
    .hd-1 {
      font-size: 1.5em;

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        font-size: 2.375em;
      }
    }
@@ -143,8 +143,10 @@ $btn-color-primary: palette(primary, dark);
      }

      /* IE11 CSS styles */
-      @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-        height: 50px;
+      @include media-breakpoint-up(md) {
+        @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
+          height: 50px;
+        }
      }
    }

@@ -152,7 +154,7 @@ $btn-color-primary: palette(primary, dark);
      fill: $micromasters-color;
      width: 200px;

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        width: 250px;
      }
    }
@@ -161,7 +163,7 @@ $btn-color-primary: palette(primary, dark);
      fill: xseries-color;
      width: 150px;

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        width: 200px;
      }
    }
@@ -170,7 +172,7 @@ $btn-color-primary: palette(primary, dark);
      fill: $professional-certificate-color;
      width: 250px;

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        width: 300px;
      }
    }
@@ -179,11 +181,11 @@ $btn-color-primary: palette(primary, dark);
      margin: 0;
      display: block;

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        width: 70%;
      }

-      @media (min-width: $bp-screen-lg) {
+      @include media-breakpoint-up(lg) {
        width: 75%;
      }

@@ -197,24 +199,24 @@ $btn-color-primary: palette(primary, dark);
      text-align: center;
      display: flex;

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        display: block;
      }

      .heading {
        font-family: $font-family-sans-serif;
        font-weight: bold;
-        color: palette(primary, dark);
+        color: $primary-dark;
        font-size: 0.9375em;
        margin-top: auto;
        margin-bottom: auto;

-        @media (min-width: $bp-screen-md) {
+        @include media-breakpoint-up(md) {
          @include margin-right(10px 0 0 0);
        }
      }

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        margin: initial;
        width: 30%;

@@ -226,7 +228,7 @@ $btn-color-primary: palette(primary, dark);
        }
      }

-      @media (min-width: $bp-screen-lg) {
+      @include media-breakpoint-up(lg) {
        width: 25%;
      }
    }
@@ -237,7 +239,7 @@ $btn-color-primary: palette(primary, dark);
    margin-bottom: 30px;
    padding: 30px 10px;

-    @media (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(md) {
      @include float(left);
      padding: {
        left: 30px;
@@ -248,7 +250,7 @@ $btn-color-primary: palette(primary, dark);
      position: relative;
    }

-    @media (min-width: $bp-screen-lg) {
+    @include media-breakpoint-up(lg) {
      width: calc(100% - 510px);
      max-width: 700px;
    }
@@ -261,7 +263,7 @@ $btn-color-primary: palette(primary, dark);
  .course-list-heading {
    font-family: $font-family-sans-serif;
    font-weight: bold;
-    color: palette(primary, dark);
+    color: $primary-dark;
    font-size: 0.9375em;
    line-height: normal;
    padding-bottom: 5px;
@@ -287,7 +289,7 @@ $btn-color-primary: palette(primary, dark);
      font-size: 0.9375em;
      width: 310px;

-      @media (min-width: $bp-screen-sm) {
+      @include media-breakpoint-up(sm) {
        width: auto;
      }

@@ -312,7 +314,7 @@ $btn-color-primary: palette(primary, dark);
      font-family: $font-family-sans-serif;
      font-weight: 600;
      font-size: 1.3em;
-      color: palette(grayscale, base);
+      color: $gray-base;
      margin-bottom: 5px;
      line-height: normal;
    }
@@ -326,6 +328,7 @@ $btn-color-primary: palette(primary, dark);
    .view-course-button {
      background: $btn-color-primary;
      border-color: $btn-color-primary;
+      color: $white;
      height: 37px;
      padding: 7px 18.5px 0;
      width: auto;
@@ -335,11 +338,13 @@ $btn-color-primary: palette(primary, dark);
      margin-top: 5px;

      /* IE11 CSS styles */
-      @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-        @include float(right);
+      @include media-breakpoint-up(lg) {
+        @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
+          @include float(right);
+        }
      }

-      @media (min-width: $bp-screen-lg) {
+      @include media-breakpoint-up(lg) {
        margin-top: 0;
      }
    }
@@ -347,20 +352,22 @@ $btn-color-primary: palette(primary, dark);
    .enroll-button {
      width: 100%;

-      @media (min-width: $bp-screen-sm) {
+      @include media-breakpoint-up(sm) {
        width: initial;
        margin-bottom: 0;
        margin-top: 17px;
      }

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        width: initial;
        margin-top: 0;
        margin-bottom: 0;
      }

-      button, .enroll-course-button {
+      button,
+      .enroll-course-button {
        background-color: $btn-color-primary;
+        color: $white;
        height: 37px;
        width: 128px;
        padding: 0;
@@ -374,8 +381,10 @@ $btn-color-primary: palette(primary, dark);
        }

        /* IE11 CSS styles */
-        @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-          @include float(right);
+        @include media-breakpoint-up(md) {
+          @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
+            @include float(right);
+          }
        }
      }

@@ -390,17 +399,17 @@ $btn-color-primary: palette(primary, dark);
      font-family: $font-family-sans-serif;
      font-weight: bold;
      font-size: 0.9375em;
-      color: palette(grayscale, base);
+      color: $gray-base;
      margin-top: 6px;
      display: block;

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        display: inline;
      }
    }

    .run-select-container {
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        margin-top: 8px;
        display: flex;
        flex-wrap: wrap;
@@ -415,23 +424,26 @@ $btn-color-primary: palette(primary, dark);
  }

  .upgrade-button {
-    background: palette(success, text);
-    border-color: palette(success, text);
+    background: theme-color("success");
+    border-color: theme-color("success");
+    color: $white;
    border-radius: 0;
    padding: 7px;
    text-align: center;
    font-size: 0.9375em;

    /* IE11 CSS styles */
-    @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      @include float(right);
+    @include media-breakpoint-up(md) {
+      @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        @include float(right);
+      }
    }

    &.complete-program {
      margin: 10px 15px 10px 5px;
      align-self: flex-start;

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        align-self: flex-end;
      }

@@ -446,7 +458,7 @@ $btn-color-primary: palette(primary, dark);
    width: 100%;
    padding: 15px;

-    @media (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(md) {
      height: auto;
    }

@@ -455,7 +467,7 @@ $btn-color-primary: palette(primary, dark);
      flex-direction: column;
      justify-content: space-between;

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        flex-wrap: wrap;
      }
    }
@@ -472,7 +484,7 @@ $btn-color-primary: palette(primary, dark);
      width: 100%;
      float: none;

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        display: table-cell;
        vertical-align: top;
        float: left;
@@ -484,25 +496,25 @@ $btn-color-primary: palette(primary, dark);
        margin: 0;

        .course-title-link,
-        .course-title-link:visited{
-          color: palette(primary, base);
+        .course-title-link:visited {
+          color: $primary-base;
          text-decoration: underline;
        }
      }

      .run-period,
      .info-expires-at {
-        color: palette(grayscale, base);
+        color: $gray-base;
        font-size: 0.9375em;
      }

      .course-text .enrolled {
-        color: palette(grayscale, base);
+        color: $gray-base;
      }
    }

    .course-meta-container {
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        display: table;
        width: 100%;
      }
@@ -513,14 +525,14 @@ $btn-color-primary: palette(primary, dark);
    }

    .course-actions {
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        width: 100%;
        text-align: right;
        float: right;
      }

      .course-enroll-view {
-        @media (min-width: $bp-screen-md) {
+        @include media-breakpoint-up(md) {
          text-align: right;
        }
      }
@@ -533,14 +545,14 @@ $btn-color-primary: palette(primary, dark);

    .final-grade {
      .grade-header {
-        color: palette(grayscale, base);
+        color: $gray-base;
        font-weight: bold;
      }

      .grade-display {
        padding-right: 15px;
        font-size: 1.5em;
-        color: palette(primary, accent);
+        color: $primary-accent;
      }
    }

@@ -551,7 +563,7 @@ $btn-color-primary: palette(primary, dark);
        width: 100%;
        margin: 5px 0;

-        @media (min-width: $bp-screen-md) {
+        @include media-breakpoint-up(md) {
          margin-left: auto;
          width: initial;
        }
@@ -561,11 +573,11 @@ $btn-color-primary: palette(primary, dark);
        padding-top: 0;
        width: initial;

-        @media (min-width: $bp-screen-sm) {
+        @include media-breakpoint-up(sm) {
          width: 300px;
        }

-        @media (min-width: $bp-screen-md) {
+        @include media-breakpoint-up(md) {
          width: initial;
        }

@@ -573,36 +585,35 @@ $btn-color-primary: palette(primary, dark);
          font-family: $font-family-sans-serif;
          font-weight: bold;
          font-size: 0.9375em;
-          color: palette(grayscale, base);
+          color: $gray-base;
          display: block;

-          @media (min-width: $bp-screen-sm) {
+          @include media-breakpoint-up(sm) {
            display: inline;
          }
        }

        .price {
-          color: palette(success, text);
+          color: theme-color("success");
          font-weight: bold;
        }
      }
-
    }

    .certificate-status {
      .fa-check-circle {
-        color: palette(success, text);
+        color: theme-color("success");
      }

      .card-msg {
        font-family: $font-family-sans-serif;
        font-weight: bold;
        font-size: 0.9375em;
-        color: palette(grayscale, base);
+        color: $gray-base;
      }

      .certificate-status-msg {
-        color: palette(grayscale, base);
+        color: $gray-base;
        font-size: 0.9375em;
      }
    }
@@ -612,12 +623,12 @@ $btn-color-primary: palette(primary, dark);
      padding-top: 5px;
      width: 300px;

-      @media (min-width: $bp-screen-sm) {
+      @include media-breakpoint-up(sm) {
        padding-top: 10px;
        width: 500px;
      }

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        width: initial;
      }
    }
@@ -625,7 +636,7 @@ $btn-color-primary: palette(primary, dark);
    .expired-icon {
      @include float(left);

-      color: palette(primary, dark);
+      color: $primary-dark;
    }

    .expired-text {
@@ -650,7 +661,7 @@ $btn-color-primary: palette(primary, dark);
    font-size: 0.9375em;
    width: $baseline*15.5;

-    @media (min-width: $bp-screen-sm) {
+    @include media-breakpoint-up(sm) {
      width: auto;
    }

@@ -662,7 +673,7 @@ $btn-color-primary: palette(primary, dark);
  .divider-heading {
    font-family: $font-family-sans-serif;
    font-weight: bold;
-    color: palette(primary, dark);
+    color: $primary-dark;
    font-size: 0.9375em;
    line-height: normal;
    padding-bottom: $baseline*0.25;
@@ -686,11 +697,12 @@ $btn-color-primary: palette(primary, dark);
    @include margin-left($baseline*0.75);

    width: $baseline*15.5;
-    border-bottom: 1px solid $gray-l4;
+    border-bottom: 1px solid $gray-light3;

-    @media (min-width: $bp-screen-sm) {
-        width: auto;
+    @include media-breakpoint-up(sm) {
+      width: auto;
    }
+
    .pathway-info {
      margin: 15px 0;
      font-size: 0.9375em;
@@ -707,7 +719,7 @@ $btn-color-primary: palette(primary, dark);
    border-bottom: none;
  }

-  @media (min-width: $bp-screen-md) {
+  @include media-breakpoint-up(md) {
    @include float(right);

    width: $baseline*15;
@@ -715,7 +727,7 @@ $btn-color-primary: palette(primary, dark);
    position: relative;
  }

-  @media (min-width: $bp-screen-lg) {
+  @include media-breakpoint-up(lg) {
    width: $baseline*22.5;

    .program-progress {
@@ -731,11 +743,11 @@ $btn-color-primary: palette(primary, dark);
 .certificate-heading {
  margin-bottom: 10px;

-  @media (min-width: $bp-screen-md) {
+  @include media-breakpoint-up(md) {
    @include margin-right(30px);
  }

-  @media (min-width: $bp-screen-lg) {
+  @include media-breakpoint-up(lg) {
    @include margin-left(10px);
    @include margin-right(0);
  }
@@ -748,7 +760,7 @@ $btn-color-primary: palette(primary, dark);
  &:focus,
  &:hover {
    .program-cert {
-      border-color: $blue-d1;
+      border-color: $primary-dark1;
    }
  }
 }
@@ -757,11 +769,11 @@ $btn-color-primary: palette(primary, dark);
  width: 100%;
  border: 1px solid $divider-color;

-  @media (min-width: $bp-screen-md) {
+  @include media-breakpoint-up(md) {
    width: calc(100% - 30px);
  }

-  @media (min-width: $bp-screen-lg) {
+  @include media-breakpoint-up(lg) {
    width: 100%;
  }
 }
@@ -779,7 +791,7 @@ $btn-color-primary: palette(primary, dark);
    .image-link {
      flex: 0 0 100px;

-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
        flex: 0 0 120px;
      }
    }
@@ -794,11 +806,11 @@ $btn-color-primary: palette(primary, dark);
      weight: 600;
    }

-    @media (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(md) {
      font-size: 0.9em;
    }

-    @media (min-width: $bp-screen-lg) {
+    @include media-breakpoint-up(lg) {
      font-size: 1.1em;
    }

@@ -806,21 +818,21 @@ $btn-color-primary: palette(primary, dark);
    &:focus,
    &:hover {
      .sample-cert {
-        border-color: $blue-d1;
+        border-color: $primary-dark1;
      }
    }
  }

  .sample-cert {
    width: 120px;
-    border: 3px solid $gray-l3;
+    border: 3px solid $gray-light2;
    border-radius: 5px;

-    @media (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(md) {
      width: 100px;
    }

-    @media (min-width: $bp-screen-lg) {
+    @include media-breakpoint-up(lg) {
      width: 120px;
    }
  }
--- a/lms/static/sass/views/_program-list.scss
+++ b/lms/static/sass/views/_program-list.scss
@@ -37,7 +37,6 @@
      width: 100%;
      text-align: center;
      padding: 10px;
-
    }

    .advertise-message {
--- a/lms/templates/learner_dashboard/program_details.html
+++ b/lms/templates/learner_dashboard/program_details.html
@@ -1,5 +1,5 @@
-## Override the default styles_version to the Pattern Library version (version 2)
-<%! main_css = "style-learner-dashboard" %>
+
+<%! main_css = "css/bootstrap/lms-main.css" %>

 <%page expression_filter="h"/>
 <%inherit file="../main.html" />