diff --git a/frontend/public/scss/home-page/home-page-contact-row.scss b/frontend/public/scss/home-page/home-page-contact-row.scss
index eb37c10fd4..daf0e25ac6 100644
--- 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
index 4c2fc3d0b7..0bbb9a04bb 100644
--- 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
index 22a53dd99c..b51bdefba4 100644
--- 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,
');
background-repeat: no-repeat;
diff --git a/frontend/public/scss/meta-product-page.scss b/frontend/public/scss/meta-product-page.scss
deleted file mode 100644
index 8cc38973f7..0000000000
--- a/frontend/public/scss/meta-product-page.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "variables";
-@import "~bootstrap/scss/bootstrap-utilities";
-
-@import "product-page/user-menu";
-@import "product-page/product-details";
-@import "product-page/product-faculty-members";
-
-body.new-design {
- background: white;
-}
diff --git a/frontend/public/scss/product-details.scss b/frontend/public/scss/product-details.scss
deleted file mode 100644
index aa0e8f6e59..0000000000
--- a/frontend/public/scss/product-details.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-// sass-lint:disable mixins-before-declarations
-
-.product-page {
-
- @include media-breakpoint-down(sm) {
- h2 {
- font-size: 20px;
- line-height: 20px;
- }
-
- h3 {
- font-size: 20px;
- line-height: 26px;
- }
- }
-}
-
-.upgrade-enrollment-modal { // This should be renamed as it's used across different modals
- max-width: 550px;
-
- a {
- text-decoration: underline;
- }
-
- .cancel-link {
- margin: 20px 0;
- }
-
- .enroll-now-free {
- text-decoration: underline;
- box-shadow: none;
- font-weight: bold;
- border: none;
- }
-
- form {
- margin-bottom: 20px;
- }
-
- .cancel-link button {
- text-align: left;
- }
-}
-
-.financial-assistance-link {
- height: 22px;
- font-size: 18px;
- font-weight: bold;
- letter-spacing: 0;
- line-height: 20px;
- text-align: center;
- text-decoration: underline;
- margin-bottom: 0;
-
- &:hover{
- text-decoration: none !important;
- }
-
- a {
- color: black;
-
- &:hover{
- color: $brand-darker-bg;
- text-decoration: none !important;
- }
- }
-}
-
-.popover-header {
- text-align: center;
- background: $white;
-}
-
-.date-link {
- color: $link-blue !important;
- text-decoration: underline;
- background-color: transparent;
- border: none;
-}
diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss
index 7467bfc129..d6af5ddb22 100644
--- 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
index 4b79989d79..814cfca8be 100644
--- 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;
}
}
}
diff --git a/frontend/public/scss/product-page/program-courses.scss b/frontend/public/scss/product-page/program-courses.scss
index 4ea4311c2b..9c22acef13 100644
--- a/frontend/public/scss/product-page/program-courses.scss
+++ b/frontend/public/scss/product-page/program-courses.scss
@@ -1,151 +1,150 @@
// sass-lint:disable mixins-before-declarations
-body.new-design {
- .badge.badge-dark {
- font-weight: 400;
- color: white;
- background-color: black;
- }
-
- p.program-type-badge {
- margin-bottom: 0;
- }
- .badge-program-type {
- padding-left: 15px;
- padding-right: 15px;
- }
+.badge.badge-dark {
+ font-weight: 400;
+ color: white;
+ background-color: black;
+}
- .program-courses-container {
- width: 100%;
- margin: 0 0 35px;
+p.program-type-badge {
+ margin-bottom: 0;
+}
- h2 {
- margin: 0 0 35px;
+.badge-program-type {
+ padding-left: 15px;
+ padding-right: 15px;
+}
- @include media-breakpoint-down(sm) {
- margin: 0 0 27px;
- }
- }
+.program-courses-container {
+ width: 100%;
+ margin: 0 0 35px;
- h2.electives-title {
- margin-top: 35px;
- }
+ h2 {
+ margin: 0 0 35px;
- ul {
- display: flex;
- margin: 0;
- padding: 0;
- flex-flow: row wrap;
- justify-content: left;
+ @include media-breakpoint-down(sm) {
+ margin: 0 0 27px;
}
+ }
- li {
- @include media-breakpoint-down(md) {
- width: calc(100% - 44px);
- }
-
- width: 273px;
- margin: 0 0 15px 0;
- list-style: none;
- display: inline;
+ h2.electives-title {
+ margin-top: 35px;
+ }
- .program-course-card {
- padding: 0 0 15px 0;
- overflow: hidden;
- border-radius: 5px;
- box-shadow: 0px 2px 3px 0px rgb(18, 38, 49, 0.15);
- max-width: 243px;
- max-height: 222px;
- height: 222px;
- width: 243px;
- transition: .25s;
- cursor: pointer;
+ ul {
+ display: flex;
+ margin: 0;
+ padding: 0;
+ flex-flow: row wrap;
+ justify-content: left;
+ }
- .image {
- position: relative;
- display: flex;
- img {
- max-width: 243px;
- max-height: 136px;
- height: 136px;
- width: 243px;
- object-fit: cover;
- object-position: center;
- @include media-breakpoint-down(sm) {
- display: block;
- float: none;
- margin: 0 auto 10px;
- }
- }
+ li {
+ @include media-breakpoint-down(md) {
+ width: calc(100% - 44px);
+ }
- .overlay {
- max-width: 243px;
- max-height: 136px;
- height: 136px;
- object-fit: cover;
- object-position: center;
- z-index: 101;
- background: black;
- transition: .25s;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- position: absolute;
- opacity: .5;
+ width: 273px;
+ margin: 0 0 15px 0;
+ list-style: none;
+ display: inline;
+
+ .program-course-card {
+ padding: 0 0 15px 0;
+ overflow: hidden;
+ border-radius: 5px;
+ box-shadow: 0px 2px 3px 0px rgb(18, 38, 49, 0.15);
+ max-width: 243px;
+ max-height: 222px;
+ height: 222px;
+ width: 243px;
+ transition: .25s;
+ cursor: pointer;
+
+ .image {
+ position: relative;
+ display: flex;
+ img {
+ max-width: 243px;
+ max-height: 136px;
+ height: 136px;
+ width: 243px;
+ object-fit: cover;
+ object-position: center;
+ @include media-breakpoint-down(sm) {
+ display: block;
+ float: none;
+ margin: 0 auto 10px;
}
+ }
+ .overlay {
+ max-width: 243px;
+ max-height: 136px;
+ height: 136px;
+ object-fit: cover;
+ object-position: center;
+ z-index: 101;
+ background: black;
+ transition: .25s;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ position: absolute;
+ opacity: .5;
}
+ }
- .program-course-card-info {
- overflow: hidden;
- padding: 15px;
- .start-date {
- font-weight: 400;
- font-size: 12px;
- line-height: 14px;
- color: #58585A;
- margin-bottom: 0.5rem;
- transition: $product-page-hover-time;
- }
+ .program-course-card-info {
+ overflow: hidden;
+ padding: 15px;
+
+ .start-date {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ color: #58585A;
+ margin-bottom: 0.5rem;
+ transition: $product-page-hover-time;
+ }
- h3 {
- font-size: 14px;
- font-weight: 600;
- line-height: 16px;
- color: #58585A;
- transition: $product-page-hover-time;
- }
+ h3 {
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 16px;
+ color: #58585A;
+ transition: $product-page-hover-time;
}
+ }
- &:hover {
- .program-course-card-info {
- .start-date {
- color: #03152D;
- }
- }
+ &:hover {
+ .program-course-card-info {
.start-date {
color: #03152D;
}
+ }
+ .start-date {
+ color: #03152D;
+ }
- h3 {
- color: #03152D;
- }
- .image {
- .overlay {
- opacity: 0;
- }
+ h3 {
+ color: #03152D;
+ }
+ .image {
+ .overlay {
+ opacity: 0;
}
}
}
+ }
- .program-course-card-link {
- text-decoration: none;
- display: block;
- width: fit-content;
- }
+ .program-course-card-link {
+ text-decoration: none;
+ display: block;
+ width: fit-content;
}
}
}
diff --git a/frontend/public/scss/product-page/user-menu.scss b/frontend/public/scss/product-page/user-menu.scss
deleted file mode 100644
index fe8cd50faa..0000000000
--- a/frontend/public/scss/product-page/user-menu.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// sass-lint:disable mixins-before-declarations
-
-body.new-design {
- .user-menu .dropdown-menu .show {
- z-index: 2000;
- }
-}
diff --git a/frontend/public/scss/top-app-bar.scss b/frontend/public/scss/top-app-bar.scss
index dc1eb15ad8..68bc50c034 100644
--- a/frontend/public/scss/top-app-bar.scss
+++ b/frontend/public/scss/top-app-bar.scss
@@ -1,24 +1,6 @@
// sass-lint:disable mixins-before-declarations
// old design
-header.site-header {
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
- background-color: $white;
-
- .navbar {
- display: flex;
- justify-content: space-between;
- padding: 0;
-
- @include media-breakpoint-down(md) {
- position: static;
- }
- }
-
- .nowrap {
- flex-wrap: unset;
- }
-}
.user-menu-overlay {
display: none;
@@ -122,7 +104,7 @@ header.site-header {
}
}
-header.site-header.new-design {
+header.site-header {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
background-color: $white;
font-family: Inter;
diff --git a/frontend/public/src/components/CourseProductDetailEnroll.js b/frontend/public/src/components/CourseProductDetailEnroll.js
index 2b60a942b7..56d69cfbef 100644
--- a/frontend/public/src/components/CourseProductDetailEnroll.js
+++ b/frontend/public/src/components/CourseProductDetailEnroll.js
@@ -338,7 +338,7 @@ export class CourseProductDetailEnroll extends React.Component<