diff --git a/frontend/public/scss/dashboard.scss b/frontend/public/scss/dashboard.scss index 9e8dffad1f..d670b3add5 100644 --- a/frontend/public/scss/dashboard.scss +++ b/frontend/public/scss/dashboard.scss @@ -74,7 +74,7 @@ $enrolled-passed-fg: #ffffff; div.row { margin: 0 !important; - padding: 20px; + padding: 20px 30px; height: 100%; } @@ -108,6 +108,7 @@ $enrolled-passed-fg: #ffffff; } .course-card-text-details { + padding: 0 0 0 20px; @include media-breakpoint-down(sm) { padding: 15px 0px 15px 0px; @@ -147,8 +148,7 @@ $enrolled-passed-fg: #ffffff; } button.dot-menu { - // Setting height so the button element doesn't expand to cover the full height of the row - height: $material-icon-height; + vertical-align: -webkit-baseline-middle; } .certificate-container { @@ -200,7 +200,7 @@ $enrolled-passed-fg: #ffffff; .upgrade-item-description { width: 100%; flex-direction: row !important; - padding: 25px 30px; + padding: 15px 30px; border-top: $home-page-border-grey; background: $home-page-grey-lite; @@ -209,6 +209,7 @@ $enrolled-passed-fg: #ffffff; } div.certificate-upgrade-message { + padding-left: 30px; width: 80%; font-size: 16px; line-height: 30px; @@ -270,9 +271,13 @@ $enrolled-passed-fg: #ffffff; } } } - - .get-cert-button-container button, .finaid-link-container { - font-size: 14px !important; + .goto-course-wrapper { + a { + width: fit-content; + } + } + .get-cert-button-container button, .finaid-link-container, a.btn-primary { + font-size: 14px; @include media-breakpoint-down(sm) { width: 100%; diff --git a/frontend/public/src/components/EnrolledItemCard.js b/frontend/public/src/components/EnrolledItemCard.js index cbc19c6d69..59b0b6caa9 100644 --- a/frontend/public/src/components/EnrolledItemCard.js +++ b/frontend/public/src/components/EnrolledItemCard.js @@ -1,7 +1,11 @@ /* global SETTINGS:false */ import React from "react" import moment from "moment" -import { parseDateString, formatPrettyDateTimeAmPmTz } from "../lib/util" +import { + parseDateString, + formatPrettyDateTimeAmPmTz, + formatPrettyMonthDate +} from "../lib/util" import { Formik, Form, Field } from "formik" import { Dropdown, @@ -402,21 +406,6 @@ export class EnrolledItemCard extends React.Component< const { menuVisibility } = this.state - const title = isLinkableCourseRun(enrollment.run, currentUser) ? ( - - redirectToCourseHomepage(enrollment.run.courseware_url, ev) - } - target="_blank" - rel="noopener noreferrer" - > - {enrollment.run.course.title} - - ) : ( - enrollment.run.course.title - ) - const financialAssistanceLink = isFinancialAssistanceAvailable(enrollment.run) && !enrollment.approved_flexible_price_exists ? ( @@ -430,30 +419,31 @@ export class EnrolledItemCard extends React.Component< const certificateLinksStyles = isProgramCard ? "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" + "upgrade-item-description d-md-flex" const certificateLinksIntStyles = isProgramCard ? "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" + "d-flex d-md-flex flex-column 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 - skills you've gained from this MITx course. -
-