From b1f070caeaa9ccdf1993c7dd9cbbc05ff59135f5 Mon Sep 17 00:00:00 2001 From: annagav Date: Tue, 17 Sep 2024 09:06:07 -0400 Subject: [PATCH] updating styles for dashboard dialogs (#2392) Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> --- frontend/public/scss/cards.scss | 13 -- frontend/public/scss/common.scss | 113 ++++++++++++++++++ frontend/public/scss/dashboard.scss | 4 - frontend/public/scss/layout.scss | 15 --- .../scss/product-page/product-details.scss | 34 ------ .../public/src/components/EnrolledItemCard.js | 91 ++++++++------ 6 files changed, 169 insertions(+), 101 deletions(-) diff --git a/frontend/public/scss/cards.scss b/frontend/public/scss/cards.scss index 1c4461efc9..734936ac15 100644 --- a/frontend/public/scss/cards.scss +++ b/frontend/public/scss/cards.scss @@ -334,19 +334,6 @@ div.std-card { } } -button.btn.btn-gradient-red-to-blue, a.btn.btn-gradient-red-to-blue { - color: white; - border: 1px solid $brand-darker-bg; - background: $brand-darker-bg !important; - transition: 0.25s; -} - -button.btn.btn-gradient-red-to-blue:hover, a.btn.btn-gradient-red-to-blue:hover { - border-color: $home-page-header-blue; - background: $home-page-header-blue !important; - color: white !important; -} - div.std-card-body, div.enrolled-item, div.cart-helptext { a:not(.btn) { color: $home-page-header-blue; diff --git a/frontend/public/scss/common.scss b/frontend/public/scss/common.scss index f1e2f0dc64..b534f321ed 100644 --- a/frontend/public/scss/common.scss +++ b/frontend/public/scss/common.scss @@ -276,3 +276,116 @@ button.btn-secondary.unstyled { margin: 0; } } + +.modal-dialog { + font-family: Inter; + .modal-header { + border-bottom: none; + .btn-close { + border-radius: 100px; + color: $home-page-header-blue; + background-color: $home-page-grey-lite; + opacity: 0.7; + font-size: 13px; + } + .btn-close:hover { + color: $brand-darker-bg; + opacity: 1; + } + } + .modal-content { + padding: 5px 14px; + font-size: 15px; +} + .modal-title { + font-family: Poppins, sans-serif; + font-weight: 700; + } + + } + .modal-subheader { + margin-top: -20px; + } + .float-container { + float: right; + margin-top: 30px; + + button { + margin-left: 16px; + font-family: Poppins; + font-size: 14px; + font-weight: 600; + line-height: 21px; + text-align: center; + padding: 10px 25px; + } + + button.cancel { + background-color: inherit; + color: inherit; + } + } + input[type=checkbox] { + accent-color: $brand-darker-bg; + width: 20px; + height: 20px; + } + label, input[type=checkbox] { + vertical-align: middle; + } + label { + font-size: 14px; + margin-left: 10px; + } + .callout { + margin-bottom: 20px; + margin-top: 30px; + font-size: 15px; + } + +button.btn.btn-gradient-red-to-blue, a.btn.btn-gradient-red-to-blue { + color: white; + border: 1px solid $brand-darker-bg; + background: $brand-darker-bg !important; + transition: 0.25s; +} + +button.btn.btn-gradient-red-to-blue:hover, a.btn.btn-gradient-red-to-blue:hover, button.btn.btn-gradient-white-to-blue:hover, a.btn.btn-gradient-white-to-blue:hover { + border-color: $home-page-header-blue; + background: $home-page-header-blue !important; + color: white !important; +} + +button.btn.btn-gradient-white-to-blue, a.btn.btn-gradient-white-to-blue { + color: $home-page-header-blue; + border: 1px solid $home-page-border-grey; + background: white; + transition: 0.25s; +} + +.callout { + flex-wrap: nowrap; + padding: 15px; + i.warning { + font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; + color: #B87A00; + padding-right: 10px; + width: fit-content; + padding-left: 0; + } + p { + font-family: Inter, sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 15.73px; + text-align: left; + color: $home-page-header-blue; + margin: 0; + flex-shrink: 1; + } + } + .callout-warning { + border: 1px solid rgba(255, 171, 0, 0.30); + border-left: 2px solid $warning; + background: #FFF3CC; + } diff --git a/frontend/public/scss/dashboard.scss b/frontend/public/scss/dashboard.scss index d670b3add5..3f863856db 100644 --- a/frontend/public/scss/dashboard.scss +++ b/frontend/public/scss/dashboard.scss @@ -341,10 +341,6 @@ $enrolled-passed-fg: #ffffff; color: $footer-blue-bg; } -.modal-title { - width: 500px; -} - .nav-drawer { position: fixed; z-index: 1000; diff --git a/frontend/public/scss/layout.scss b/frontend/public/scss/layout.scss index 36e0332e7b..22a53dd99c 100644 --- a/frontend/public/scss/layout.scss +++ b/frontend/public/scss/layout.scss @@ -74,21 +74,6 @@ body { } body.new-design { - .modal-title { - font-family: Poppins, sans-serif; - font-weight: 700; - } - - .modal-header { - .btn-close { - border-radius: 100px; - background: var(--Grey-Lite, #F0F5F7) url('data:image/svg+xml,'); - background-repeat: no-repeat; - background-position: center center; - background-size: 10px 10px; - } - } - select.form-control { background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss index df71fd10da..7467bfc129 100644 --- a/frontend/public/scss/product-page/product-details.scss +++ b/frontend/public/scss/product-page/product-details.scss @@ -329,33 +329,6 @@ body.new-design { margin: 0 0 20px 0; } - .callout { - flex-wrap: nowrap; - padding: 15px; - i.warning { - font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; - color: #B87A00; - padding-right: 10px; - width: fit-content; - padding-left: 0; - } - p { - font-family: Inter, sans-serif; - font-size: 13px; - font-weight: 400; - line-height: 15.73px; - text-align: left; - color: $home-page-header-blue; - margin: 0; - flex-shrink: 1; - } - } - .callout-warning { - border: 1px solid rgba(255, 171, 0, 0.30); - border-left: 2px solid $warning; - background: #FFF3CC; - } - .enrollment-info-icon { max-width: 18px; padding: 0; @@ -471,18 +444,11 @@ body.new-design { border-bottom: none; padding-bottom: 0; } - .modal-content { - padding: 5px 14px; - } } .upgrade-enrollment-modal { max-width: 750px; - .modal-content { - padding: 5px 14px; - } - .enroll-now-free { font-size: 16px; font-weight: 400; diff --git a/frontend/public/src/components/EnrolledItemCard.js b/frontend/public/src/components/EnrolledItemCard.js index b1401129ac..b17e1feb34 100644 --- a/frontend/public/src/components/EnrolledItemCard.js +++ b/frontend/public/src/components/EnrolledItemCard.js @@ -240,14 +240,24 @@ export class EnrolledItemCard extends React.Component< return ( this.toggleEmailSettingsModalVisibility()} > this.toggleEmailSettingsModalVisibility()}> - Email Settings for {enrollment.run.course_number} + Email Settings +
+ Update your email preferences for{" "} + {enrollment.run.course_number} +
+
+ error +

+ Unchecking the box will prevent you from receiving important + course updates and emails. +

+
{({ values }) => { return ( -
+
- {" "} - +
+ + +
) }} @@ -309,7 +325,6 @@ export class EnrolledItemCard extends React.Component< return ( this.toggleRunUnenrollmentModalVisibility()} role="dialog" @@ -342,16 +357,21 @@ export class EnrolledItemCard extends React.Component< for assistance.

) : null} - {" "} - +
+ + +
) @@ -363,7 +383,6 @@ export class EnrolledItemCard extends React.Component< return ( this.toggleProgramUnenrollmentModalVisibility()} role="dialog" @@ -383,18 +402,20 @@ export class EnrolledItemCard extends React.Component< Are you sure you wish to unenroll from {enrollment.program.title}? You will not be unenrolled from any courses within the program.

- {" "} - +
+ {" "} + +
)