From 8ffe8881c8b8c5e9d07e0334c7540ccc8ea3617c Mon Sep 17 00:00:00 2001 From: James Kachel Date: Wed, 20 Mar 2024 12:19:46 -0500 Subject: [PATCH] Updates to ancillary pages (#2119) --- .../flexible_pricing_request_form.html | 202 +++++---- frontend/public/scss/auth.scss | 62 --- frontend/public/scss/cards.scss | 392 ++++++++++++++++++ frontend/public/scss/cart.scss | 58 ++- frontend/public/scss/dashboard.scss | 108 ++++- frontend/public/scss/layout.scss | 3 +- frontend/public/scss/learner-records.scss | 168 ++++++-- frontend/public/scss/order-history.scss | 50 ++- .../scss/product-page/product-details.scss | 4 +- frontend/public/scss/variables.scss | 7 + .../public/src/components/CartItemCard.js | 33 +- .../src/components/EnrolledCourseList.js | 17 +- .../public/src/components/EnrolledItemCard.js | 67 +-- .../src/components/EnrolledItemCard_test.js | 2 +- .../src/components/GetCertificateButton.js | 5 +- .../public/src/components/OrderSummaryCard.js | 116 ++---- .../components/forms/AddlProfileFieldsForm.js | 2 +- .../src/components/forms/ApplyCouponForm.js | 76 ++-- .../src/components/forms/ChangeEmailForm.js | 22 +- .../components/forms/ChangePasswordForm.js | 29 +- .../src/components/forms/EditProfileForm.js | 2 +- .../public/src/components/forms/EmailForm.js | 33 +- .../src/components/forms/EmailForm_test.js | 1 - .../src/components/forms/LoginPasswordForm.js | 6 +- .../src/components/forms/ProfileFormFields.js | 326 +++++++-------- .../components/forms/RegisterDetailsForm.js | 18 +- .../src/components/forms/RegisterEmailForm.js | 24 +- .../src/components/forms/ResetPasswordForm.js | 15 +- .../public/src/components/input/CardLabel.js | 68 +++ frontend/public/src/constants.js | 6 +- .../src/containers/pages/DashboardPage.js | 96 +++-- .../src/containers/pages/checkout/CartPage.js | 69 +-- .../containers/pages/checkout/OrderHistory.js | 109 ++--- .../containers/pages/login/LoginEmailPage.js | 22 +- .../login/LoginForgotPasswordConfirmPage.js | 8 +- .../pages/login/LoginForgotPasswordPage.js | 125 +++--- .../login/LoginForgotPasswordPage_test.js | 2 +- .../pages/login/LoginPasswordPage.js | 6 +- .../pages/profile/EditProfilePage.js | 27 +- .../pages/records/LearnerRecordsPage.js | 292 +++++++------ .../register/RegisterAdditionalDetailsPage.js | 67 ++- .../pages/register/RegisterConfirmPage.js | 4 +- .../register/RegisterConfirmPage_test.js | 2 +- .../pages/register/RegisterConfirmSentPage.js | 88 ++-- .../register/RegisterConfirmSentPage_test.js | 4 +- .../pages/register/RegisterDetailsPage.js | 22 +- .../pages/register/RegisterEmailPage.js | 8 +- .../pages/settings/AccountSettingsPage.js | 32 +- .../pages/settings/EmailConfirmPage.js | 4 +- .../pages/settings/EmailConfirmPage_test.js | 2 +- frontend/public/src/lib/courseApi.js | 2 +- main/settings.py | 1 + main/templates/footer.html | 66 --- main/urls.py | 1 + static/images/checkbox-checked.svg | 7 + 55 files changed, 1826 insertions(+), 1162 deletions(-) create mode 100644 frontend/public/scss/cards.scss create mode 100644 frontend/public/src/components/input/CardLabel.js create mode 100644 static/images/checkbox-checked.svg diff --git a/cms/templates/flexiblepricing/flexible_pricing_request_form.html b/cms/templates/flexiblepricing/flexible_pricing_request_form.html index 323ace3be9..95c3fbce07 100644 --- a/cms/templates/flexiblepricing/flexible_pricing_request_form.html +++ b/cms/templates/flexiblepricing/flexible_pricing_request_form.html @@ -1,97 +1,124 @@ {% extends "base.html" %} + {% load wagtailcore_tags %} +{% load static wagtail_img_src feature_img_src %} {% block title %}{{ site_name }} | {{ page.title }}{% endblock %} {% block content %} -
-
+
+ + {% if user.is_authenticated %}{# is logged in #} {% if prior_request is None or prior_request.is_reset %}{# has submission #} -
-

{{ page.title|richtext }}

- {{ page.intro|richtext }} -
-
-
-
-

Tell us about your income

-
- {% csrf_token %} -
- - {%if form.fields.your_income.required %}*{% endif %} - - {% for error in form.your_income.errors %} - - {% endfor %} -
-
- - {%if form.fields.income_currency.required %}*{% endif %} - The currency you’re paid in. - - {% for error in form.income_currency.errors %} - - {% endfor %} -
-
- - I testify that the income I reported is true and accurate. I am aware that I may be asked to verify the reported income with documentation. -
-
- -
-
+
+
+
+ {{ page.intro|richtext }} +
+
+
+
+
+

Tell us about your income

+
+ {% csrf_token %} +
+ + {%if form.fields.your_income.required %}{% endif %} + + {% for error in form.your_income.errors %} + + {% endfor %} +
+
+ + + + {% for error in form.income_currency.errors %} + + {% endfor %} +
+
+ + I testify that the income I reported is true and accurate. I am aware that I may be asked to verify the reported income with documentation. +
+
+ +
+
+
+
{% else %} {% if prior_request.is_approved %}{# request status #} - {% if prior_request.tier.discount.amount == 0 %}{# discount amount text #} -
- {{ page.application_approved_no_discount_text|richtext }} -
- {% else %} -
- {{ page.application_approved_text|richtext }} -
- {% endif %}{# end discount amount text #} - - {% if page.selected_course %} - {% if product %}{# product and unexpired course run exist #} -
- - -
+
+
+
+ {% if prior_request.tier.discount.amount == 0 %}{# discount amount text #} + {{ page.application_approved_no_discount_text|richtext }} {% else %} - - Course details + {{ page.application_approved_text|richtext }} + {% endif %}{# end discount amount text #} + + {% if page.selected_course %} + {% if product %}{# product and unexpired course run exist #} +
+ + +
+ {% else %} + + Course details + + {% endif %} + {% elif page.selected_program %} + + Go to Dashboard {% endif %} - {% elif page.selected_program %} - - Go to Dashboard - - {% endif %} +
+
+
+ {% elif prior_request.is_denied %} -
- {{ page.application_denied_text|richtext }} +
+
+
+ {{ page.application_denied_text|richtext }} +
+
{% else %} -
- {{ page.application_processing_text|richtext }} +
+
+
+ {{ page.application_processing_text|richtext }} +
+
{% endif %}{# request status #} {% endif %}{# has submission #} @@ -99,22 +126,19 @@

Tell us about your income

{{ page.guest_text|richtext }} {% endif %} {# is logged in #}
-
-{% endblock %} - -{% block scripts %} - -{% endblock %} \ No newline at end of file + }); + + }); + +{% endblock %} diff --git a/frontend/public/scss/auth.scss b/frontend/public/scss/auth.scss index 691ce0622f..3f0326dcd9 100644 --- a/frontend/public/scss/auth.scss +++ b/frontend/public/scss/auth.scss @@ -154,68 +154,6 @@ } -.auth-form { - .form-control { - font-size: inherit; - font-weight: inherit; - } - - .form-error { - font-size: 1rem; - font-weight: 400; - } - - .errored { - border: 2px solid $red; - } - - .submit-row { - margin-top: 25px; - } - - .error-label { - color: red; - } - - .col { - align-self: flex-start; - } - - .form-control:focus { - border-color: $success; - box-shadow: 0 0 0 1px $success; - } - - label { - font-weight: normal !important; - justify-content: space-between; - - div { - font-weight: inherit !important; - } - - .subtitle { - color: $label-subtitle; - font-size: 14px; - } - } - - .required { - color: $brand-button-bg; - } - - .label-secondary { - padding-top: 10px; - font-size: 14px; - } -} - -.registration-page .auth-form { - .row-inner { - margin-top: 20px; - } -} - .additional-street { cursor: pointer; color: $light-blue; diff --git a/frontend/public/scss/cards.scss b/frontend/public/scss/cards.scss new file mode 100644 index 0000000000..cc4d999dbb --- /dev/null +++ b/frontend/public/scss/cards.scss @@ -0,0 +1,392 @@ +div.std-page-header { + display: flex; + width: 100%; + padding: 0 60px; + align-items: flex-start; + background: $home-page-header-blue; + box-shadow: 0px 15px 25px 0px rgba(3, 21, 45, 0.25); + + h1 { + margin: 0; + color: white; + font-family: Poppins; + font-size: 28px; + font-style: normal; + font-weight: 700; + line-height: normal; + padding: 18px 0; + } +} + +div.std-page-header + div.std-page-body { + padding-top: 40px !important; +} + +div.std-card { + display: flex; + padding: 0; + flex-direction: column; + align-items: flex-start; + + border-radius: 5px; + background: #FFF; + margin-bottom: 30px; + + /* Dropshadow */ + box-shadow: $card-drop-shadow; + + &.std-card-auth { + width: 535px; + } + + &.std-card-finasst { + width: 90%; + margin: 0 auto 40px; + } + + div.std-card-body { + margin: 30px; + padding: 0; + align-self: stretch; + width: auto; + + div, h1, h2, h3, h4, h5, h6, p, a:not(.btn), button, ul, li { + color: #000; + font-size: 14px; + font-family: Inter; + font-style: normal; + line-height: 16px; + margin: 0; + padding: 0; + } + + + h1, h2 { + font-size: 25px; + font-weight: 600; + margin-bottom: 25px; + line-height: 25px; + } + + h3 { + font-size: 25px; + font-weight: 600; + margin-bottom: 25px; + line-height: 25px; + } + + h5 { + font-size: 18px; + font-weight: 600; + margin-bottom: 20px; + line-height: 18px; + } + + hr { + margin: 26px 0 30px 0; + + border-bottom: 1px solid $home-page-border-grey; + } + + p, li { + line-height: 22px; + } + + p, input { + padding: 0; + margin: 0; + margin-bottom: 10px; + } + + input:active, input:focus, input:hover, select:active, select:focus, select:hover { + border: 1px solid $home-page-header-blue !important; + box-shadow: none !important; + } + + ul { + list-style: none; + padding: 0; + margin-top: -20px; + margin-bottom: 20px; + padding-bottom: 4px; + border-bottom: 1px solid $home-page-border-grey; + } + + li { + margin-left: 20px; + margin-bottom: 20px; + } + + div { + gap: 10px; + align-self: stretch; + padding-bottom: 0; + margin-bottom: 30px; + } + + div:last-child { + margin-bottom: 0; + } + + div.profile-student-type div.form-check { + margin-bottom: 10px; + } + + div.form-group { + label { + color: $footer-blue-bg; + font-family: Inter; + font-size: 14px; + line-height: 18px; /* 128.571% */ + margin-bottom: 10px; + + &.label-helptext { + margin-bottom: 10px; + } + } + + input, select { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + height: 45px; + align-self: stretch; + border-radius: 5px; + border: 1px solid $home-page-border-grey; + background: #FFF; + } + + span.required { + color: $brand-darker-bg; + } + + &.checkbox-long-label { + display: flex; + + input[type=checkbox], span { + display: block; + } + + span { + font-size: 14px; + } + } + } + + div.small-gap { + margin-bottom: 10px !important; + + div.col, div.col-6, div.col-5, div.col-4, div.col-3, div.col-2, div.col-1 { + margin-bottom: 0 !important; + } + } + + div.submit-row { + padding-top: 20px; + } + + button { + width: 100%; + font-size: 20px; + + display: inline-flex; + padding: 20px 40px; + flex-direction: column; + justify-content: center; + align-items: center; + + border-radius: 5px; + background: $brand-button-bg; + color: white; + } + + form { + width: 100%; + gap: 30px; + } + + input { + padding: 17px 15px 18px; + } + + input[type=checkbox] { + width: 20px !important; + height: 20px !important; + flex-shrink: 0; + border-radius: 3px; + margin-right: 10px; + padding: 0; + } + + input[type=checkbox]:checked { + border: 1px solid $brand-darker-bg; + background: $brand-darker-bg; + background-image: url('/static/images/checkbox-checked.svg'); + background-repeat: no-repeat; + background-position: center; + } + + &.edit-profile-page, &.create-account-page, &.my-account-page, &.financial-assistance-page, &.checkout-page { + div.form-group { + margin-bottom: 16px; + } + + div.form-check { + margin-bottom: 10px; + } + + label.label-helptext { + display: flex; + flex-direction: row; + align-items: top; + justify-items: stretch; + margin-bottom: 0; + + div { + width: auto; + margin-bottom: 0; + } + + div.subtitle { + text-align: right; + margin-left: auto; + color: $helptext-grey; + text-align: right; + font-size: 12px; + font-weight: 400; + line-height: 18px; /* 150% */ + } + } + } + + &.my-account-page, &.financial-assistance-page { + label.label-helptext { + margin-bottom: 10px; + } + } + + &.financial-assistance-page { + a.btn { + margin: 20px 0 0 0; + font-family: "Inter", sans-serif; + font-size: 20px; + } + } + + &.checkout-page { + h3, div { + margin-bottom: 20px; + } + + h5 { + margin-bottom: 0; + } + + div.order-pricing-info{ + padding: 10px 0px 0px 0px; + + border-bottom: 1px solid $home-page-border-grey; + + div { + font-size: 16px; + margin-bottom: 15px; + + div { + margin-bottom: 0; + line-height: 18px; + } + } + } + + div.coupon-info { + line-height: 20px; + } + + div.coupon-form { + div.form-group, input { + margin-bottom: 0; + } + + button.btn-apply-coupon { + padding: 12px 20px !important; + width: auto; + font-weight: 600; + } + } + + button.btn-place-order#place-order-button { + width: 100%; + font-weight: 700; + font-size: 20px !important; + } + } + + button.flexible-price-certificate-btn { + width: auto; + } + + + } +} + +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; +} + +div.std-card-body, div.enrolled-item, div.cart-helptext { + a:not(.btn) { + color: $home-page-header-blue; + + &:hover { + color: $brand-darker-bg !important; + } + } +} + + +@media only screen and (min-width: 768px) { + div.std-page-header { + position: sticky; + top: 0; + z-index: 500; + } +} + +@media only screen and (max-width: 767px) { + div.std-card { + &.std-card-auth { + width: 100%; + } + + div.std-card-body { + &.edit-profile-page, &.create-account-page, &.my-account-page, &.financial-assistance-page, &.checkout-page { + label.label-helptext { + display: flex; + flex-direction: column !important; + align-items: top; + justify-items: stretch; + margin-bottom: 0; + + div { + width: 100%; + margin-bottom: 0; + } + + div.subtitle { + text-align: left; + } + } + } + } + } +} + diff --git a/frontend/public/scss/cart.scss b/frontend/public/scss/cart.scss index 6a2d2ea2ac..74ac1c7bb2 100644 --- a/frontend/public/scss/cart.scss +++ b/frontend/public/scss/cart.scss @@ -1,5 +1,21 @@ +.std-page-body.cart { + font-family: "Inter", sans-serif; + + .row { + .col.summary-cards { + width: 424px !important; + margin: 0; + margin-left: 24px; + } + + .col.enrollment-items { + margin: 0; + } + } +} + .btn-primary.btn-halfsize { - padding: .35rem 1.5rem; + padding: .35rem 1.5rem; font-size: 14px; line-height: 1.5rem; border: 2px solid #a31f34 @@ -14,7 +30,9 @@ } .cart-text-smaller { - font-size: 80%; + font-size: 13px; + line-height: 35px; + margin-bottom: 0 !important; } .order-summary-total { @@ -26,4 +44,40 @@ a.history-paginators { padding-left: .25rem; padding-right: .25rem; +} + +div.cart-helptext { + margin-bottom: 10px; + font-family: "Inter", sans-serif; + + a { + color: $footer-blue-bg; + } +} + +.order-summary.container.card { + padding: 30px !important; + border-radius: 5px; + background: #FFF; + /* Dropshadow */ + box-shadow: 0px 2px 3px 0px rgba(18, 38, 49, 0.15); + + .coupon-form { + margin-top: 20px; + + label.fw-bold { + font-size: 14px; + margin-bottom: 10px; + } + } +} + +.purchase-block-intro { + display: block; +} + +@media only screen and (max-width: 767px) { + .purchase-block-intro { + display: none; + } } \ No newline at end of file diff --git a/frontend/public/scss/dashboard.scss b/frontend/public/scss/dashboard.scss index 6b04739131..3d21a16af4 100644 --- a/frontend/public/scss/dashboard.scss +++ b/frontend/public/scss/dashboard.scss @@ -1,7 +1,7 @@ // sass-lint:disable mixins-before-declarations -$featureImgWidth: 202px; -$featureImgHeight: 143px; +$featureImgWidth: 200px; +$featureImgHeight: 120px; $featureImgMobileWidth: 345px; $featureImgMobileHeight: 223px; $sidenav-bg: #f5f5f5; @@ -17,6 +17,9 @@ $enrolled-passed-bg: #3E775D; $enrolled-passed-fg: #ffffff; .enrolled-items { + a { + color: $footer-blue-bg; + } .hide-element { // hidden elements for screenreaders only border: 0; @@ -29,9 +32,13 @@ $enrolled-passed-fg: #ffffff; position: absolute; width: 1px; } + .card { display: flex; - + margin-bottom: 20px; + padding: 0; + box-shadow: 0px 2px 3px 0px rgba(18, 38, 49, 0.15); + &.no-enrollments { flex-direction: column; @@ -46,8 +53,8 @@ $enrolled-passed-fg: #ffffff; } h2 { - font-size: 26px; - line-height: 27px; + font-size: 20px; + line-height: normal; } h2 a { @@ -65,6 +72,21 @@ $enrolled-passed-fg: #ffffff; } } + div.row { + margin: 0 !important; + padding: 20px; + } + + @include media-breakpoint-down(sm) { + div.row.enrolled-item-info { + padding: 0 !important; + + div.enrollment-details-container { + padding: 16px !important; + } + } + } + @include media-breakpoint-up(md) { .row { height: auto; @@ -79,11 +101,13 @@ $enrolled-passed-fg: #ffffff; @include media-breakpoint-down(sm) { width: 100%; height: $featureImgMobileHeight; + border-radius: 0; } width: $featureImgWidth; height: 100%; overflow: hidden; + border-radius: 5px; img { width: 100%; @@ -101,16 +125,30 @@ $enrolled-passed-fg: #ffffff; } } - strong.active-enrollment-text { - color: #139556; + div.row.certificate-row { + padding: 0; } } + .no-enrollments h2 { + font-size: 25px !important; + margin-bottom: 30px !important; + } + + .no-enrollments p { + margin-bottom: 0 !important; + } + button.dot-menu { // Setting height so the button element doesn't expand to cover the full height of the row height: $material-icon-height; } + .certificate-container { + margin: 0; + padding: 0; + } + .unenroll-denied-msg .tooltip { width: 250px; } @@ -153,25 +191,34 @@ $enrolled-passed-fg: #ffffff; } .upgrade-item-description { - background-color: #F6F6F6; - padding: 15px; width: 100%; flex-direction: row; - box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.24), inset -1px 0 0 0 rgba(0,0,0,0.07), inset 1px 0 0 0 rgba(0,0,0,0.07); + padding: 25px 30px ; + border-top: $home-page-border-grey; + background: $home-page-grey-lite; + + div.certificate-upgrade-message { + width: 80%; + height: 30px; + + font-size: 16px; + line-height: 30px; + + strong { + color: $brand-darker-bg; + } + } } .enrollment-extra-links { - margin-top: .5rem; - font-size: smaller; + margin-top: 20px; a { text-decoration: underline; - color: $light-gray; margin: auto 0; } a:hover { - color: black; text-decoration: none; } @@ -205,11 +252,30 @@ $enrolled-passed-fg: #ffffff; } } } + + .get-cert-button-container button, .finaid-link-container { + font-size: 14px !important; + } + + .finaid-link-container { + width: 100%; + padding: 0; + margin: 0; + margin-top: 10px; + text-align: center; + color: $brand-darker-bg; + } + +} + +.dashboard { + font-family: "Inter", sans-serif; } .dashboard .tabs { - margin-bottom: 38px; - font-size: 38px; + margin-bottom: 0; + font-size: 20px; + line-height: 20px; @include media-breakpoint-down(md) { margin-bottom: 30px; @@ -218,12 +284,11 @@ $enrolled-passed-fg: #ffffff; .dashboard button.dash-tab { border: 0; - font-weight: bold; - font-size: 75%; - margin-right: 3em; background: transparent; - padding-left: 0; - padding-right: 0; + padding: 20px; + color: $dashboard-tab-inactive; + margin-right: 30px; + font-weight: 700; @include media-breakpoint-down(sm) { margin-right: 1em; @@ -232,6 +297,7 @@ $enrolled-passed-fg: #ffffff; .dashboard button.dash-tab.active { border-bottom: 3px solid $primary !important; + color: $footer-blue-bg; } .modal-title { diff --git a/frontend/public/scss/layout.scss b/frontend/public/scss/layout.scss index bf8b9d88ab..aaca2dff1f 100644 --- a/frontend/public/scss/layout.scss +++ b/frontend/public/scss/layout.scss @@ -38,12 +38,13 @@ @import "product-page/product-faculty-members"; @import "home-page/home-page-contact-row"; @import "product-page/program-courses.scss"; +@import "cards.scss"; body { font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; color: #000000; - background: #f5f5f5; + background: $body-bg; display: flex; min-height: 100vh; flex-direction: column; diff --git a/frontend/public/scss/learner-records.scss b/frontend/public/scss/learner-records.scss index 3e12489ed7..1df868e83d 100644 --- a/frontend/public/scss/learner-records.scss +++ b/frontend/public/scss/learner-records.scss @@ -1,10 +1,53 @@ -#learner-record-school-name img { - width: 200px; +.learner-record-page .std-card-body { + .badge { + text-transform: uppercase; + font-size: 12px; + font-weight: 700; + padding: 5px 10px 6px; + border-radius: 3px; + line-height: 12px; + } + + .learner-record-header { + margin-bottom: 30px; + } + + #learner-record-school-name { + font-size: 16px; + + div, h1 { + margin-bottom: 15px; + } + + div.learner-record-inst-logo { + padding: 20px 40px; + border: 1px solid $home-page-border-grey; + border-radius: 5px; + align-self: start; + align-items: center; + margin: 0; + } + + img { + width: 200px; + height: auto; + } + } + + div.learner-record-user-profile { + line-height: 30px !important; + + h2.learner-record-user-name { + font-size: 22px !important; + font-weight: 700; + margin-bottom: 5px; + } + } } .badge.badge-partially-completed { - color: white; - background-color: #f0ad4e; + color: #4D3507; + background: #FBECD0; } .badge.badge-completed { @@ -12,29 +55,8 @@ background-color: #556b2f; } -span.badge-learner-completion { - color: white; - background-color: #f0ad4e; - font-size: 14px; - font-weight: normal; -} - -div.learner-record-user-profile { - margin-top: 1em; - - span.learner-record-user-name { - font-size: 150%; - } -} div.learner-record { - @media (min-width:960px) { - border: 1px solid #c2c2c2; - border-radius: 8px; - padding: 30px; - margin-top: 1em; - } - h1 { font-size: 32px; font-weight: 500; @@ -43,32 +65,76 @@ div.learner-record { } table.learner-record-table { - margin-top: .5em; width: 100%; - tr:first-child { - width: 45%; + thead { + border-bottom: 2px solid $helptext-grey; } - td, th { - padding: 10px; + tbody { + tr { + border-bottom: 1px solid $home-page-border-grey; + + td { + align-content: center; + } + } + } + + th { vertical-align: bottom; } - thead { - border-bottom: 1px solid grey; + td, th { + div { + margin: 20px 10px 20px 0 !important; + + span.badge.bg-danger { + color: #5F071C; + background: #FBD0DA !important; + } + + span.badge.bg-success { + background: #D2FBD0 !important; + color: #0D5F07; + } + } + + &.learner-record-table-course-name { + width: 47%; + + div { + margin-left: 10px !important; + } + } + + &.learner-record-table-course-id { + width: 17%; + } + + &.learner-record-table-highest-grade { + width: 11%; + } + + &.learner-record-table-grade { + width: 15%; + } + + &.learner-record-table-status { + width: 10%; + } } } div.learner-record-sharing-controls { button.btn { padding: 8px 10px !important; - font-weight: 400; + font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); border: none; text-align: center; border-radius: 0.25rem; - font-size: 15px; + font-size: 14px !important; @media (min-width:960px) { line-height: 35px; } @@ -83,3 +149,37 @@ div.learner-record-sharing-controls { padding: 0.375rem 0.75rem !important; font-size: 1rem; } + +@include media-breakpoint-down(sm) { + div.learner-record { + .m-0.d-flex.flex-column div { + margin-bottom: 0 !important; + } + + div.learner-record-user-profile { + margin-top: 16px !important; + margin-bottom: 0 !important; + } + + hr { + margin: 15px 0 !important; + } + + h4 { + margin-bottom: 10px !important; + } + + div.list-group { + div.list-group-item { + border: 0 !important; + padding-bottom: 15px !important; + margin-bottom: 15px !important; + border-bottom: 1px solid $home-page-border-grey !important; + + div.d-flex.w-100.justify-content-between { + margin-bottom: 10px; + } + } + } + } +} \ No newline at end of file diff --git a/frontend/public/scss/order-history.scss b/frontend/public/scss/order-history.scss index 6c09eefc96..13dce9021f 100644 --- a/frontend/public/scss/order-history.scss +++ b/frontend/public/scss/order-history.scss @@ -1,9 +1,55 @@ table.order-history-table { - margin-top: .5em; width: 100%; td, th { - padding: 15px; + font-size: 16px; + line-height: 26px; vertical-align: bottom; } + + tbody tr { + border-bottom: 1px solid $home-page-border-grey; + } + + tfoot tr { + border: 0; + + td:first-child { + font-weight: 700; + } + + td.pagination-controls a { + text-decoration: underline; + } + } + + tr td, tr th { + padding: 20px 0; + } + + tr td:first-child, tr th:first-child { + padding-left: 15px; + font-weight: 400; + } + + tr td:last-child, tr th:last-child { + padding-right: 15px; + } + + thead tr th { + padding-top: 0; + } + + tfoot tr td { + padding-bottom: 0; + } + + tfoot tr td:first-child { + padding-left: 0; + } + + tfoot tr td:last-child { + padding-right: 0; + } + } \ No newline at end of file diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss index 3f4bc41445..b31725a603 100644 --- a/frontend/public/scss/product-page/product-details.scss +++ b/frontend/public/scss/product-page/product-details.scss @@ -201,7 +201,7 @@ body.new-design { } .vjs-default-skin { - width: 325px; + width: 340px; max-height: 240px; } @@ -251,7 +251,7 @@ body.new-design { flex-flow: column; align-items: top; margin: 10px 12px; - width: 350px; + width: 340px; @include media-breakpoint-up(xl) { margin: 0 -18px; diff --git a/frontend/public/scss/variables.scss b/frontend/public/scss/variables.scss index f7cfcc0eae..506aceb7a3 100644 --- a/frontend/public/scss/variables.scss +++ b/frontend/public/scss/variables.scss @@ -34,6 +34,8 @@ $featured-banner-border: #5e0c19; $events-background: #e3e3e3; +$body-bg: #f0f5f7; + $footer-bg: #000000; $footer-border: #686461; $footer-blue-bg: #03152D; @@ -58,3 +60,8 @@ $home-page-border-purple: #491EA4; $home-page-subheader-light-blue: #03ADD2; $product-page-hover-time: 0.5s; + +$card-drop-shadow: 0px 2px 3px 0px rgba(18, 38, 49, 0.15); +$helptext-grey: #58585A; + +$dashboard-tab-inactive: #8A8B8C; diff --git a/frontend/public/src/components/CartItemCard.js b/frontend/public/src/components/CartItemCard.js index 5fce5e8e3e..1b65214e3b 100644 --- a/frontend/public/src/components/CartItemCard.js +++ b/frontend/public/src/components/CartItemCard.js @@ -1,7 +1,7 @@ // @flow import React from "react" import type { Product } from "../flow/cartTypes" -import { generateStartDateText } from "../lib/courseApi" +import { courseRunStatusMessage } from "../lib/courseApi" type Props = { product: Product @@ -45,7 +45,7 @@ export class CartItemCard extends React.Component { ? purchasableObject.course_number : purchasableObject.run_tag - const startDateDescription = generateStartDateText(purchasableObject) + const courseRunStatusMessageText = courseRunStatusMessage(purchasableObject) const courseImage = course !== undefined && course.page !== null ? ( @@ -53,30 +53,17 @@ export class CartItemCard extends React.Component { const cardKey = `cartsummarycard_${product.id}` return ( -
-
-
{courseImage}
+
+
+
+
{courseImage}
+
-
-
{title}
+
+

{title}

{readableId} -
- {startDateDescription !== null && startDateDescription.active ? ( - Starts - {startDateDescription.datestr} - ) : ( - - {startDateDescription === null ? null : ( - - Active from{" "} - {startDateDescription.datestr} - - )} - - )} + {courseRunStatusMessageText}
{course !== undefined && courseDetail} diff --git a/frontend/public/src/components/EnrolledCourseList.js b/frontend/public/src/components/EnrolledCourseList.js index 2e7a7af3d7..479c96865b 100644 --- a/frontend/public/src/components/EnrolledCourseList.js +++ b/frontend/public/src/components/EnrolledCourseList.js @@ -33,12 +33,17 @@ export class EnrolledCourseList extends React.Component this.renderEnrolledItemCard(enrollment) ) ) : ( -
-

Enroll Now

-

- You are not enrolled in any courses yet. Please{" "} - browse our courses. -

+
+
+

Enroll Now

+

+ You are not enrolled in any courses yet. Please{" "} + + browse our courses + + . +

+
) } diff --git a/frontend/public/src/components/EnrolledItemCard.js b/frontend/public/src/components/EnrolledItemCard.js index d366ca7aae..42982d1f30 100644 --- a/frontend/public/src/components/EnrolledItemCard.js +++ b/frontend/public/src/components/EnrolledItemCard.js @@ -425,24 +425,27 @@ export class EnrolledItemCard extends React.Component< const financialAssistanceLink = isFinancialAssistanceAvailable(enrollment.run) && !enrollment.approved_flexible_price_exists ? ( - + Financial assistance? ) : null const certificateLinksStyles = isProgramCard - ? "upgrade-item-description detail d-md-flex justify-content-between pb-2 flex-column px-4" - : "upgrade-item-description detail d-md-flex justify-content-between pb-2" + ? "upgrade-item-description d-md-flex align-items-start justify-content-between flex-column" + : "upgrade-item-description d-md-flex align-items-start justify-content-between" const certificateLinksIntStyles = isProgramCard - ? "enrollment-extra-links d-flex d-md-flex w-100 justify-content-center" - : "enrollment-extra-links d-flex d-md-flex col-auto pe-0 justify-content-end" + ? "d-flex d-md-flex flex-column align-items-start justify-content-center" + : "d-flex d-md-flex flex-column align-items-start justify-content-center" const certificateLinks = enrollment.run.products.length > 0 && enrollment.enrollment_mode === "audit" && enrollment.run.is_upgradable ? (
-
+

Upgrade today and, upon passing, receive your certificate signed by MIT faculty to highlight the knowledge and @@ -450,10 +453,12 @@ export class EnrolledItemCard extends React.Component<

-
{financialAssistanceLink}
-
+
+
+ {financialAssistanceLink} +
) : null @@ -467,13 +472,10 @@ export class EnrolledItemCard extends React.Component< const courseRunStatusMessageText = courseRunStatusMessage(enrollment.run) return ( -
-
+
+
{enrollment.run.course.feature_image_src && ( -
+
@@ -482,7 +484,7 @@ export class EnrolledItemCard extends React.Component< {!enrollment.run.course.feature_image_src && enrollment.run.course.page && enrollment.run.course.page.feature_image_src && ( -
+
)} -
+
@@ -510,7 +512,7 @@ export class EnrolledItemCard extends React.Component< ) : null}
-

{title}

+

{title}

-
+
{courseId} {startDateDescription === null} {courseRunStatusMessageText} @@ -568,13 +570,20 @@ export class EnrolledItemCard extends React.Component< ) : null}
-
-
-
{certificateLinks}
-
+ {certificateLinks ? ( +
+
+ {certificateLinks} +
+
+ ) : null}
) } @@ -604,17 +613,17 @@ export class EnrolledItemCard extends React.Component< return (
-
-
+
+
-
+
@@ -663,7 +672,7 @@ export class EnrolledItemCard extends React.Component< {this.renderProgramUnenrollmentModal(enrollment)}
-
+
{startDateDescription === null} {courseRunStatusMessageText}
@@ -697,8 +706,8 @@ export class EnrolledItemCard extends React.Component<
-
-
{certificateLinks}
+
+
{certificateLinks}
) diff --git a/frontend/public/src/components/EnrolledItemCard_test.js b/frontend/public/src/components/EnrolledItemCard_test.js index 84fc581fa1..21a0cb9ee1 100644 --- a/frontend/public/src/components/EnrolledItemCard_test.js +++ b/frontend/public/src/components/EnrolledItemCard_test.js @@ -250,7 +250,7 @@ describe("EnrolledItemCard", () => { userEnrollment["approved_flexible_price_exists"] = approvedFlexiblePrice enrollmentCardProps.enrollment = userEnrollment const inner = await renderedCard() - const extraLinks = inner.find(".enrollment-extra-links").at(1) + const extraLinks = inner.find(".finaid-link") if (approvedFlexiblePrice) { const text = extraLinks.find("a").at(0) assert.isFalse(text.exists()) diff --git a/frontend/public/src/components/GetCertificateButton.js b/frontend/public/src/components/GetCertificateButton.js index 36e26e6e18..22da28c94b 100644 --- a/frontend/public/src/components/GetCertificateButton.js +++ b/frontend/public/src/components/GetCertificateButton.js @@ -8,7 +8,10 @@ const GetCertificateButton = ({ productId }: Props) => { return (
-
diff --git a/frontend/public/src/components/OrderSummaryCard.js b/frontend/public/src/components/OrderSummaryCard.js index cca982bc07..d886dab956 100644 --- a/frontend/public/src/components/OrderSummaryCard.js +++ b/frontend/public/src/components/OrderSummaryCard.js @@ -43,20 +43,14 @@ export class OrderSummaryCard extends React.Component { } return ( -
-
-
-
- Coupon applied ( - - {discounts[0].discount_code} - {" "} - ) -
-
- {discountAmountText} -
-
+
+
+ Coupon applied ( + {discounts[0].discount_code}{" "} + ) +
+
+ {discountAmountText}
) @@ -70,15 +64,11 @@ export class OrderSummaryCard extends React.Component { const refundAmount = formatLocalePrice(Number(refund.amount)) return ( -
-
-
-
- Refund applied -
-
{refundAmount}
-
+
+
+ Refund applied
+
{refundAmount}
) } @@ -134,73 +124,55 @@ export class OrderSummaryCard extends React.Component { const fmtDiscountPrice = formatLocalePrice(discountedPrice) const title = cardTitle ? cardTitle : "Order Summary" return ( -
-
-
-
{title}
-
-
+
+
+

{title}

-
-
+
Price
{fmtPrice}
-
-
- - {this.renderAppliedCoupons()} - {refunds === null || refunds.length === 0 - ? this.renderFulfilledTag() - : this.renderRefunds()} + {this.renderAppliedCoupons()} -
-
-
+ {refunds === null || refunds.length === 0 + ? this.renderFulfilledTag() + : this.renderRefunds()} +
-
-
-
-
-
Total
-
-
-
{fmtDiscountPrice || fmtPrice}
-
+
+
+
Total
+
+
+
{fmtDiscountPrice || fmtPrice}
-
- {!orderFulfilled ? ( - - ) : null} - - {totalPrice > 0 && !orderFulfilled ? ( -
-
+ {!orderFulfilled ? ( + + ) : null} + + {totalPrice > 0 && !orderFulfilled ? ( +
-
- ) : null} + ) : null} - {totalPrice > 0 && !orderFulfilled ? ( -
-
+ {totalPrice > 0 && !orderFulfilled ? ( + -
- ) : null} + ) : null} +
) } diff --git a/frontend/public/src/components/forms/AddlProfileFieldsForm.js b/frontend/public/src/components/forms/AddlProfileFieldsForm.js index ceaec2c9dc..f035c46b8a 100644 --- a/frontend/public/src/components/forms/AddlProfileFieldsForm.js +++ b/frontend/public/src/components/forms/AddlProfileFieldsForm.js @@ -73,7 +73,7 @@ const AddlProfileFieldsForm = ({
-
+
+
+
+ + +
- {discounts !== null && discounts.length > 0 ? ( -
- Adding another coupon will replace the currently applied coupon. -
- ) : null} + +
+ {discounts !== null && discounts.length > 0 ? ( +
+ Adding another coupon will replace the currently applied coupon. +
+ ) : null}
)} diff --git a/frontend/public/src/components/forms/ChangeEmailForm.js b/frontend/public/src/components/forms/ChangeEmailForm.js index df5c8f5185..8f3ffc0c33 100644 --- a/frontend/public/src/components/forms/ChangeEmailForm.js +++ b/frontend/public/src/components/forms/ChangeEmailForm.js @@ -4,6 +4,7 @@ import React from "react" import { Formik, Field, Form } from "formik" import { PasswordInput, EmailInput } from "./elements/inputs" +import CardLabel from "../input/CardLabel" import type { User } from "../../flow/authTypes" @@ -30,10 +31,9 @@ const ChangeEmailForm = ({ onSubmit, user }: Props) => { render={({ isSubmitting }) => (
-

Change Email

+

Change Email

- - * + { />
- + {
-
+ {children} +
+
)} diff --git a/frontend/public/src/components/forms/EmailForm_test.js b/frontend/public/src/components/forms/EmailForm_test.js index 51cb8780c8..545a5f29df 100644 --- a/frontend/public/src/components/forms/EmailForm_test.js +++ b/frontend/public/src/components/forms/EmailForm_test.js @@ -47,6 +47,5 @@ describe("EmailForm", () => { const testChild = form.find("div#test-child") assert.ok(testChild.exists()) assert.equal(testChild.at(0).text(), "child element") - assert.equal(testChild.parent().prop("className"), "form-group") }) }) diff --git a/frontend/public/src/components/forms/LoginPasswordForm.js b/frontend/public/src/components/forms/LoginPasswordForm.js index fad8a046e8..c0c546632f 100644 --- a/frontend/public/src/components/forms/LoginPasswordForm.js +++ b/frontend/public/src/components/forms/LoginPasswordForm.js @@ -38,15 +38,13 @@ const LoginPasswordForm = ({ onSubmit }: LoginPasswordFormProps) => ( />
- - Forgot Password? - + Forgot Password?
-
+
+
)} diff --git a/frontend/public/src/components/forms/RegisterEmailForm.js b/frontend/public/src/components/forms/RegisterEmailForm.js index 8b307cec27..99af03b364 100644 --- a/frontend/public/src/components/forms/RegisterEmailForm.js +++ b/frontend/public/src/components/forms/RegisterEmailForm.js @@ -46,8 +46,10 @@ const RegisterEmailForm = ({ onSubmit }: Props) => ( aria-describedby="emailError" required /> -

- By creating an account I agree to the{" "} + +

+ By creating an account I agree to the +
(

) : null} -
-
- -
-
+ )} /> diff --git a/frontend/public/src/components/forms/ResetPasswordForm.js b/frontend/public/src/components/forms/ResetPasswordForm.js index 782f3504f9..034e93afc7 100644 --- a/frontend/public/src/components/forms/ResetPasswordForm.js +++ b/frontend/public/src/components/forms/ResetPasswordForm.js @@ -10,6 +10,7 @@ import { passwordFieldRegex, passwordFieldErrorMessage } from "../../lib/validation" +import CardLabel from "../input/CardLabel" type Props = { onSubmit: Function @@ -31,7 +32,11 @@ const ResetPasswordForm = ({ onSubmit }: Props) => ( render={({ isSubmitting }) => (
- + ( />
- + (
- - - )} - -
- {this.renderCurrentTab()} -
- - - this.setState({ programDrawerVisibility: false }) - } - redirectToCourseHomepage={this.redirectToCourseHomepage} - onUnenroll={forceRequest} - > - - {this.renderAddlProfileFieldsModal()} - -
+ <> +
+

{DASHBOARD_PAGE_TITLE}

+
+
+ + +
+ {this.renderCurrentTab()} +
+ + + this.setState({ programDrawerVisibility: false }) + } + redirectToCourseHomepage={this.redirectToCourseHomepage} + onUnenroll={forceRequest} + > + + {this.renderAddlProfileFieldsModal()} + +
+ ) } diff --git a/frontend/public/src/containers/pages/checkout/CartPage.js b/frontend/public/src/containers/pages/checkout/CartPage.js index 4a0fe8cc2b..356f4ef5ab 100644 --- a/frontend/public/src/containers/pages/checkout/CartPage.js +++ b/frontend/public/src/containers/pages/checkout/CartPage.js @@ -165,61 +165,34 @@ export class CartPage extends React.Component { title={`${SETTINGS.site_name} | ${CART_DISPLAY_PAGE_TITLE}`} > +
+

{CART_DISPLAY_PAGE_TITLE}

+
- -
-
-

- {this.renderFinancialAssistanceOffer()} -

-
-
- -
-
-

- You are about to purchase the following: -

-
-
-

- {this.renderFinancialAssistanceOffer()} -

-
- -
-
+

+ You are about to purchase the following: +

{cartItems && cartItems.length > 0 ? cartItems.map(this.renderCartItemCard.bind(this)) : this.renderEmptyCartCard()}
-
{this.renderOrderSummaryCard()}
+
+
+
{this.renderFinancialAssistanceOffer()}
+ +
+ {this.renderOrderSummaryCard()} +
diff --git a/frontend/public/src/containers/pages/checkout/OrderHistory.js b/frontend/public/src/containers/pages/checkout/OrderHistory.js index 946c138d35..5ed2df9b7d 100644 --- a/frontend/public/src/containers/pages/checkout/OrderHistory.js +++ b/frontend/public/src/containers/pages/checkout/OrderHistory.js @@ -171,58 +171,65 @@ export class OrderHistory extends React.Component { title={`${SETTINGS.site_name} | ${ORDER_HISTORY_DISPLAY_PAGE_TITLE}`} > -
-
-
-

Order History

-
-
-
-
- {ORDER_HISTORY_COLUMN_TITLES.map((value: string) => ( -
- {value} +
+

{ORDER_HISTORY_DISPLAY_PAGE_TITLE}

+
+
+
+
+
+
+ {ORDER_HISTORY_COLUMN_TITLES.map((value: string) => ( +
+ {value} +
+ ))} +
+ {orderHistory && orderHistory.results.length > 0 + ? orderHistory.results.map( + this.renderMobileOrderCard.bind(this) + ) + : null} +
+
+
+
+ + + {columns} + + + {orderHistory && orderHistory.results.length > 0 + ? orderHistory.results.map( + this.renderOrderCard.bind(this) + ) + : null} + + + + + + + +
+ Page {this.offset + 1} of{" "} + {orderHistory + ? Math.ceil(orderHistory.count / 10) + : 0}{" "} + | {orderHistory ? orderHistory.count : "0"} orders + total + + + + + {this.renderPaginationPrevious()} |{" "} + {this.renderPaginationNext()} +
+
- ))} -
- {orderHistory && orderHistory.results.length > 0 - ? orderHistory.results.map( - this.renderMobileOrderCard.bind(this) - ) - : null} -
-
-
-
- - - {columns} - - - {orderHistory && orderHistory.results.length > 0 - ? orderHistory.results.map( - this.renderOrderCard.bind(this) - ) - : null} - - - - - -
- Page {this.offset + 1} of{" "} - {orderHistory - ? Math.ceil(orderHistory.count / 10) - : 0}{" "} - | {orderHistory ? orderHistory.count : "0"} orders - total - - - - - {this.renderPaginationPrevious()} |{" "} - {this.renderPaginationNext()} -
diff --git a/frontend/public/src/containers/pages/login/LoginEmailPage.js b/frontend/public/src/containers/pages/login/LoginEmailPage.js index f5ad0ee645..63f58e5a88 100644 --- a/frontend/public/src/containers/pages/login/LoginEmailPage.js +++ b/frontend/public/src/containers/pages/login/LoginEmailPage.js @@ -64,18 +64,20 @@ export class LoginEmailPage extends React.Component { title={`${SETTINGS.site_name} | ${LOGIN_EMAIL_PAGE_TITLE}`} >
-
-
+
+

Sign in

+ +
+

+ Don't have an account? + + Create Account + +

+
+
- - - Don't have an account? - - Create Account - - -
diff --git a/frontend/public/src/containers/pages/login/LoginForgotPasswordConfirmPage.js b/frontend/public/src/containers/pages/login/LoginForgotPasswordConfirmPage.js index ea6abf7668..a43adc0073 100644 --- a/frontend/public/src/containers/pages/login/LoginForgotPasswordConfirmPage.js +++ b/frontend/public/src/containers/pages/login/LoginForgotPasswordConfirmPage.js @@ -86,12 +86,12 @@ export class LoginForgotPasswordConfirmPage extends React.Component { title={`${SETTINGS.site_name} | ${FORGOT_PASSWORD_CONFIRM_PAGE_TITLE}`} >
-
-
-

Password Reset!

+
+
+

Password Reset

Enter a new password for your account.

+
-
diff --git a/frontend/public/src/containers/pages/login/LoginForgotPasswordPage.js b/frontend/public/src/containers/pages/login/LoginForgotPasswordPage.js index c7f0b5883e..0995ade75d 100644 --- a/frontend/public/src/containers/pages/login/LoginForgotPasswordPage.js +++ b/frontend/public/src/containers/pages/login/LoginForgotPasswordPage.js @@ -37,22 +37,23 @@ const passwordResetText = (email: string) => ( const getCustomerSupportLayout = (isError: boolean) => { return ( -
- {isError ? ( -

- Sorry, there was an error sending the email. -

- ) : ( - <> -
- Still no password reset email? - - )} - Please {isError ? "try again or" : ""} contact our{" "} - {` ${SETTINGS.site_name} `} - Customer Support Center. -
-
+
+

+ {isError ? ( +

+ Sorry, there was an error sending the email. +

+ ) : ( + <> + Still no password reset email? + + )} +
+ Please contact our {` ${SETTINGS.site_name} `} + + Customer Support Center. + +

) } @@ -93,59 +94,61 @@ export class LoginForgotPasswordPage extends React.Component { render() { const titleText = this.state.forgotEmailSent ? "Forgot Password" - : "Password reset!" + : "Password Reset" return (
-
-
+
+

{titleText}

+ {this.state.isError ? ( + + {getCustomerSupportLayout(true)} + + + ) : this.state.forgotEmailSent ? ( + + {this.state.text} +
+

+ + If you do NOT receive your password reset email, here's + what to do: + +

+
+
    +
  • + Wait a few moments. It might take several minutes + to receive your password reset email. +
    • +
  • + Check your spam folder. It might be there. +
    • +
  • + Is your email correct? If you made a typo, no + problem, just try to{" "} + + reset your password + {" "} + again. +
    • +
+ {getCustomerSupportLayout(false)} + + ) : ( + +

Enter your email to receive a password reset link.

+ + + )}
- {this.state.isError ? ( - - {getCustomerSupportLayout(true)} - - - ) : this.state.forgotEmailSent ? ( - - {this.state.text} -

- - If you do NOT receive your password reset email, here's what - to do: - -

-
    -
  • - Wait a few moments. It might take several minutes to - receive your password reset email. -
    • -
  • - Check your spam folder. It might be there. -
    • -
  • - Is your email correct? If you made a typo, no - problem, just try to{" "} - - reset your password - {" "} - again. -
    • -
- {getCustomerSupportLayout(false)} - - ) : ( - -

Enter your email to receive a password reset link.

- - - )}
diff --git a/frontend/public/src/containers/pages/login/LoginForgotPasswordPage_test.js b/frontend/public/src/containers/pages/login/LoginForgotPasswordPage_test.js index b71be5afe4..f699ca20ca 100644 --- a/frontend/public/src/containers/pages/login/LoginForgotPasswordPage_test.js +++ b/frontend/public/src/containers/pages/login/LoginForgotPasswordPage_test.js @@ -82,7 +82,7 @@ describe("LoginForgotPasswordPage", () => { const onSubmit = inner.find("EmailForm").prop("onSubmit") await onSubmit({ email }, { setSubmitting: setSubmittingStub }) assert.equal( - inner.find(".contact-support > a").prop("href"), + inner.find("a.support-email").prop("href"), `mailto:${supportEmail}` ) }) diff --git a/frontend/public/src/containers/pages/login/LoginPasswordPage.js b/frontend/public/src/containers/pages/login/LoginPasswordPage.js index 5107e6d9f4..e506924e47 100644 --- a/frontend/public/src/containers/pages/login/LoginPasswordPage.js +++ b/frontend/public/src/containers/pages/login/LoginPasswordPage.js @@ -93,16 +93,16 @@ export class LoginPasswordPage extends React.Component { title={`${SETTINGS.site_name} | ${LOGIN_PASSWORD_PAGE_TITLE}`} >
-
-
+
+

Sign in

{name && (

Signing in as {name}

)} +
-
diff --git a/frontend/public/src/containers/pages/profile/EditProfilePage.js b/frontend/public/src/containers/pages/profile/EditProfilePage.js index b15f29b741..ac4a48b783 100644 --- a/frontend/public/src/containers/pages/profile/EditProfilePage.js +++ b/frontend/public/src/containers/pages/profile/EditProfilePage.js @@ -69,18 +69,25 @@ export class EditProfilePage extends React.Component { -
-
-
-

Edit Profile

+ <> + {currentUser ? ( +
+

{EDIT_PROFILE_PAGE_TITLE}

+
+ ) : null} +
+
+
+

Profile Information

+ +
-
-
+ ) : null } diff --git a/frontend/public/src/containers/pages/records/LearnerRecordsPage.js b/frontend/public/src/containers/pages/records/LearnerRecordsPage.js index 6deb4d7365..26bbd2b0a0 100644 --- a/frontend/public/src/containers/pages/records/LearnerRecordsPage.js +++ b/frontend/public/src/containers/pages/records/LearnerRecordsPage.js @@ -83,26 +83,36 @@ export class LearnerRecordsPage extends React.Component { renderCourseTableRow(course: LearnerRecordCourse) { return ( - - {course.title} - - {course.reqtype === "Required Courses" ? ( - Core - ) : null} - {course.reqtype === "Elective Courses" ? ( - Elective - ) : null} - + +
+ {course.title} + + {course.reqtype === "Required Courses" ? ( + Core + ) : null} + {course.reqtype === "Elective Courses" ? ( + Elective + ) : null} + +
+ + +
{course.readable_id.split("+")[1] || course.readable_id}
- {course.readable_id.split("+")[1] || course.readable_id} - {course.grade ? course.grade.grade_percent : ""} - {course.grade ? course.grade.letter_grade : ""} - - {course.certificate ? ( - Certificate Earned - ) : ( - Not Earned - )} + +
{course.grade ? course.grade.grade_percent : ""}
+ + +
{course.grade ? course.grade.letter_grade : ""}
+ + +
+ {course.certificate ? ( + Certificate Earned + ) : ( + Not Earned + )} +
) @@ -145,20 +155,12 @@ export class LearnerRecordsPage extends React.Component { const { learnerRecord } = this.props // Only display the leaner info if the current user is different from the leanerRecord's user // or the visitor is not logged in. - return learnerRecord && - learnerRecord.user && - (!this.props.currentUser.is_authenticated || - this.props.currentUser.username !== learnerRecord.user.username) ? ( -
-
- - {learnerRecord.user.name} - -
- {learnerRecord.user.username} | {learnerRecord.user.email} -
-
- ) : null + return learnerRecord && learnerRecord.user ? ( +
+

{learnerRecord.user.name}

+ {learnerRecord.user.username} | {learnerRecord.user.email} +
+ ) : null } renderSharingLinkDialog(learnerRecord: LearnerRecord) { @@ -254,8 +256,9 @@ export class LearnerRecordsPage extends React.Component { {...field} name="partnerSchool" className="form-control" + aria-label="Select School" > - + {learnerRecord.partner_schools.map(elem => (
- {" "}