From e69df65510ff901102249a79ae1249536390e0bb Mon Sep 17 00:00:00 2001 From: Anna Date: Tue, 17 Sep 2024 10:51:16 -0400 Subject: [PATCH 1/4] Remove new-design styles | Cleaning up duplicated styles --- cms/templates/home_page.html | 1 - .../scss/home-page/home-page-contact-row.scss | 2 +- .../public/scss/home-page/home-page-hero.scss | 2 +- frontend/public/scss/layout.scss | 2 -- frontend/public/scss/meta-product-page.scss | 2 +- frontend/public/scss/top-app-bar.scss | 20 +------------------ frontend/public/src/components/TopBar.js | 2 +- 7 files changed, 5 insertions(+), 26 deletions(-) diff --git a/cms/templates/home_page.html b/cms/templates/home_page.html index d7cd1fbc23..6cbba814c7 100644 --- 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 %}
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..d5e21f90f7 100644 --- a/frontend/public/scss/layout.scss +++ b/frontend/public/scss/layout.scss @@ -71,9 +71,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 index 8cc38973f7..de7e0b17c1 100644 --- a/frontend/public/scss/meta-product-page.scss +++ b/frontend/public/scss/meta-product-page.scss @@ -5,6 +5,6 @@ @import "product-page/product-details"; @import "product-page/product-faculty-members"; -body.new-design { +body { background: white; } 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/TopBar.js b/frontend/public/src/components/TopBar.js index 789e7a2db6..4bc6166e79 100644 --- a/frontend/public/src/components/TopBar.js +++ b/frontend/public/src/components/TopBar.js @@ -29,7 +29,7 @@ const TopBar = ({ currentUser }: Props) => { }, []) return ( -
+
{showComponent ? ( ) : null} From 13d09c8bbfc9cb38185711498e7097482c8b02a4 Mon Sep 17 00:00:00 2001 From: Anna Date: Tue, 17 Sep 2024 14:45:42 -0400 Subject: [PATCH 2/4] Product page --- frontend/public/scss/layout.scss | 2 - frontend/public/scss/meta-product-page.scss | 1 - frontend/public/scss/product-details.scss | 42 ------------------- .../scss/product-page/product-details.scss | 27 +++++++++++- .../public/scss/product-page/user-menu.scss | 7 ---- 5 files changed, 26 insertions(+), 53 deletions(-) delete mode 100644 frontend/public/scss/product-page/user-menu.scss diff --git a/frontend/public/scss/layout.scss b/frontend/public/scss/layout.scss index d5e21f90f7..f93431dfd9 100644 --- a/frontend/public/scss/layout.scss +++ b/frontend/public/scss/layout.scss @@ -31,7 +31,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 +39,6 @@ @import "banner"; body { - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; color: #000000; background: $body-bg; diff --git a/frontend/public/scss/meta-product-page.scss b/frontend/public/scss/meta-product-page.scss index de7e0b17c1..62c0184fdd 100644 --- a/frontend/public/scss/meta-product-page.scss +++ b/frontend/public/scss/meta-product-page.scss @@ -1,7 +1,6 @@ @import "variables"; @import "~bootstrap/scss/bootstrap-utilities"; -@import "product-page/user-menu"; @import "product-page/product-details"; @import "product-page/product-faculty-members"; diff --git a/frontend/public/scss/product-details.scss b/frontend/public/scss/product-details.scss index aa0e8f6e59..9e06f36d53 100644 --- a/frontend/public/scss/product-details.scss +++ b/frontend/public/scss/product-details.scss @@ -1,47 +1,5 @@ // 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; diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss index 7467bfc129..dde689173e 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 { 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; - } -} From 511e510aed5f12ad50d80664174f2580e2632905 Mon Sep 17 00:00:00 2001 From: Anna Date: Wed, 18 Sep 2024 15:42:35 -0400 Subject: [PATCH 3/4] removing more --- frontend/public/scss/layout.scss | 1 - frontend/public/scss/meta-product-page.scss | 9 - frontend/public/scss/product-details.scss | 37 --- .../scss/product-page/product-details.scss | 48 ++-- .../product-page/product-faculty-members.scss | 100 ++++---- .../scss/product-page/program-courses.scss | 238 +++++++++--------- .../components/CourseProductDetailEnroll.js | 2 +- 7 files changed, 194 insertions(+), 241 deletions(-) delete mode 100644 frontend/public/scss/meta-product-page.scss delete mode 100644 frontend/public/scss/product-details.scss diff --git a/frontend/public/scss/layout.scss b/frontend/public/scss/layout.scss index f93431dfd9..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"; diff --git a/frontend/public/scss/meta-product-page.scss b/frontend/public/scss/meta-product-page.scss deleted file mode 100644 index 62c0184fdd..0000000000 --- a/frontend/public/scss/meta-product-page.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "variables"; -@import "~bootstrap/scss/bootstrap-utilities"; - -@import "product-page/product-details"; -@import "product-page/product-faculty-members"; - -body { - background: white; -} diff --git a/frontend/public/scss/product-details.scss b/frontend/public/scss/product-details.scss deleted file mode 100644 index 9e06f36d53..0000000000 --- a/frontend/public/scss/product-details.scss +++ /dev/null @@ -1,37 +0,0 @@ -// sass-lint:disable mixins-before-declarations - -.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 dde689173e..d6af5ddb22 100644 --- a/frontend/public/scss/product-page/product-details.scss +++ b/frontend/public/scss/product-page/product-details.scss @@ -764,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..2ac1e6a0c8 100644 --- a/frontend/public/scss/product-page/product-faculty-members.scss +++ b/frontend/public/scss/product-page/product-faculty-members.scss @@ -1,72 +1,70 @@ // 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..807843a1b5 100644 --- a/frontend/public/scss/product-page/program-courses.scss +++ b/frontend/public/scss/product-page/program-courses.scss @@ -1,151 +1,151 @@ // 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/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<

-
+
Date: Wed, 18 Sep 2024 19:43:01 +0000 Subject: [PATCH 4/4] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- frontend/public/scss/product-page/product-faculty-members.scss | 1 - frontend/public/scss/product-page/program-courses.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/frontend/public/scss/product-page/product-faculty-members.scss b/frontend/public/scss/product-page/product-faculty-members.scss index 2ac1e6a0c8..814cfca8be 100644 --- a/frontend/public/scss/product-page/product-faculty-members.scss +++ b/frontend/public/scss/product-page/product-faculty-members.scss @@ -67,4 +67,3 @@ } } } - diff --git a/frontend/public/scss/product-page/program-courses.scss b/frontend/public/scss/product-page/program-courses.scss index 807843a1b5..9c22acef13 100644 --- a/frontend/public/scss/product-page/program-courses.scss +++ b/frontend/public/scss/product-page/program-courses.scss @@ -148,4 +148,3 @@ p.program-type-badge { } } } -