Remove new-design styles | Cleaning up duplicated styles (#2394)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
mitodl · Sep 18, 2024 · 87097a8 · 87097a8
1 parent a1cb092
commit 87097a8
Show file tree

Hide file tree

Showing 13 changed files with 222 additions and 319 deletions.
diff --git a/cms/templates/home_page.html b/cms/templates/home_page.html
@@ -5,7 +5,6 @@
 
 {% block title %}{{ site_name }}{% endblock %}
 
-{% block bodyclass %}new-design{% endblock %}
 
 {% block content %}
   <div class="home-page-hero-row d-flex justify-content-md-center align-items-md-center">

diff --git a/frontend/public/scss/home-page/home-page-contact-row.scss b/frontend/public/scss/home-page/home-page-contact-row.scss
@@ -1,4 +1,4 @@
-body.new-design {
+body {
   background: white;
 }
 

diff --git a/frontend/public/scss/home-page/home-page-hero.scss b/frontend/public/scss/home-page/home-page-hero.scss
@@ -1,4 +1,4 @@
-body.new-design {
+body {
     background: white;
 }
 .home-page-hero-row {

diff --git a/frontend/public/scss/layout.scss b/frontend/public/scss/layout.scss
@@ -21,7 +21,6 @@
 @import "expandable";
 @import "dashboard";
 @import "home";
-@import "product-details";
 @import "cart";
 @import "receipt";
 @import "certificates/certificate";
@@ -31,7 +30,6 @@
 @import "home-page/featured-product-cards";
 @import "home-page/home-page-hero";
 @import "home-page/home-page-video-component";
-@import "product-page/user-menu";
 @import "product-page/product-details";
 @import "product-page/product-faculty-members";
 @import "home-page/home-page-contact-row";
@@ -40,7 +38,6 @@
 @import "banner";
 
 body {
-  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 0;
   color: #000000;
   background: $body-bg;
@@ -71,9 +68,7 @@ body {
     padding-top: 50px;
     padding-bottom: 50px;
   }
-}
 
-body.new-design {
   select.form-control {
     background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.41 3.8147e-06L6 4.58L10.59 3.8147e-06L12 1.41L6 7.41L0 1.41L1.41 3.8147e-06Z" fill="%23344055"/></svg>');
     background-repeat: no-repeat;

diff --git a/frontend/public/scss/meta-product-page.scss b/frontend/public/scss/meta-product-page.scss
diff --git a/frontend/public/scss/product-details.scss b/frontend/public/scss/product-details.scss
diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss
@@ -2,6 +2,7 @@
 
 body.new-design {
   font-family: Inter;
+  background: white;
 
   h2 {
     font-family: Poppins;
@@ -18,6 +19,18 @@ body.new-design {
     margin-top: 1.5rem;
     background-color: white;
 
+     @include media-breakpoint-down(sm) {
+        h2 {
+          font-size: 20px;
+          line-height: 20px;
+        }
+
+        h3 {
+          font-size: 20px;
+          line-height: 26px;
+        }
+      }
+
     .row.align-center {
       @include media-breakpoint-down(md) {
           justify-content: center !important;
@@ -448,10 +461,18 @@ body.new-design {
 
   .upgrade-enrollment-modal {
     max-width: 750px;
-
+    .cancel-link {
+      margin: 20px 0;
+    }
+    .cancel-link button {
+      text-align: left;
+    }
     .enroll-now-free {
       font-size: 16px;
       font-weight: 400;
+      text-decoration: underline;
+      box-shadow: none;
+      border: none;
     }
     .enroll-now-free:focus-visible {
       border-radius: 0;
@@ -491,6 +512,10 @@ body.new-design {
       padding-left: 33px;
       line-height: 24px;
     }
+    a {
+    text-decoration: underline;
+  }
+
   }
 
   div.date-selector-button-bar {
@@ -739,35 +764,37 @@ body.new-design {
   .financial-assistance-link {
     text-align: left;
     font-size: 16px;
+    height: 22px;
+    font-weight: bold;
+    letter-spacing: 0;
+    line-height: 20px;
+    text-decoration: underline;
+    margin-bottom: 0;
+
+    &:hover{
+      text-decoration: none !important;
+    }
 
     a {
+      color: black;
       font-weight: 400;
+
+      &:hover{
+        color: $brand-darker-bg;
+        text-decoration: none !important;
+      }
     }
   }
 }
 
-@media screen and (max-width: 768px) {
-  body.new-design {
-    div.certificate-pricing-row {
-      div.certificate-pricing {
-        margin-bottom: 15px !important;
-      }
-
-      div.enroll-and-pay {
-        padding-left: 0px;
-        padding-right: 0px;
-      }
-    }
+.popover-header {
+  text-align: center;
+  background: $white;
+}
 
-    div.upgrade-options-row {
-      div {
-        width: 100%;
-        text-align: center;
-        p {
-          text-align: center;
-        }
-        margin-bottom: 12px;
-      }
-    }
-  }
+.date-link {
+  color: $link-blue !important;
+  text-decoration: underline;
+  background-color: transparent;
+  border: none;
 }
diff --git a/frontend/public/scss/product-page/product-faculty-members.scss b/frontend/public/scss/product-page/product-faculty-members.scss
@@ -1,70 +1,67 @@
 // sass-lint:disable mixins-before-declarations
 
-body.new-design {
+.faculty-section {
+  margin: 0 0 35px;
 
-  .faculty-section {
+  h2 {
     margin: 0 0 35px;
 
-    h2 {
-      margin: 0 0 35px;
-
-      @include media-breakpoint-down(sm) {
-        margin: 0 0 27px;
-      }
+    @include media-breakpoint-down(sm) {
+      margin: 0 0 27px;
     }
+  }
 
-    .faculty-members {
-      li {
-        width: calc(50% - 20px);
-        margin: 0 10px 10px;
-        min-width: 275px;
+  .faculty-members {
+    li {
+      width: calc(50% - 20px);
+      margin: 0 10px 10px;
+      min-width: 275px;
 
-        img {
-          border-radius: 5px;
-          object-position: 50% 0;
-          margin: 0 15px 0 0;
-          float: left;
-          height: 110px;
-          width: 110px;
-          object-fit: cover;
+      img {
+        border-radius: 5px;
+        object-position: 50% 0;
+        margin: 0 15px 0 0;
+        float: left;
+        height: 110px;
+        width: 110px;
+        object-fit: cover;
 
-          @include media-breakpoint-down(sm) {
-            display: block;
-            float: none;
-          }
+        @include media-breakpoint-down(sm) {
+          display: block;
+          float: none;
         }
       }
-      .member-card {
-        padding: 15px;
-        border-radius: 4px !important;
-        box-shadow: 0 1px 0 0 rgb(0 0 0 / 12%);
-        display: flex;
+    }
+    .member-card {
+      padding: 15px;
+      border-radius: 4px !important;
+      box-shadow: 0 1px 0 0 rgb(0 0 0 / 12%);
+      display: flex;
 
-        .member-info {
-          overflow: hidden;
-          margin: 0;
-          display: flow-root;
+      .member-info {
+        overflow: hidden;
+        margin: 0;
+        display: flow-root;
 
-          button {
-            font-size: 16px;
-            font-weight: 700;
-            line-height: normal;
-            border: 0;
-            background-color: white;
-            padding: 0 0 8px 0;
-            text-align: left;
+        button {
+          font-size: 16px;
+          font-weight: 700;
+          line-height: normal;
+          border: 0;
+          background-color: white;
+          padding: 0 0 8px 0;
+          text-align: left;
 
-            &:hover {
-            color: $brand-button-bg;
-            }
+          &:hover {
+          color: $brand-button-bg;
           }
+        }
 
-          .title {
-            font-size: 13px;
-            font-weight: 400;
-            line-height: normal;
-            margin-bottom: 0;
-          }
+        .title {
+          font-size: 13px;
+          font-weight: 400;
+          line-height: normal;
+          margin-bottom: 0;
         }
       }
     }