From 7049445969c314ccf112093d1ed6ff3cd5da4c94 Mon Sep 17 00:00:00 2001 From: Michael Terry Date: Fri, 25 Feb 2022 16:08:17 -0500 Subject: [PATCH] chore: update to paragon 19.0.0 Adapt to the big redesign. Also, as part of 19.0.0, the shadow variables in paragon got marked as !default, letting the theme override them. This would normally be fine and good. But the edx.org theme has a dramatically larger shadow set. And a lot of our cards and card-like components were designed with a smaller shadow in mind. So I added a new raised-card custom css class to keep as many cards looking the same. Notably, I cannot fix the data tables on the Progress tab. So those might have a larger shadow with this change, but that's unavoidable and presumably the intent of the edx.org theme authors. --- package-lock.json | 45 ++++++++++----- package.json | 2 +- .../widgets/StartOrResumeCourseCard.jsx | 34 ++++++----- .../widgets/WeeklyLearningGoalCard.jsx | 23 ++++---- .../outline-tab/widgets/WelcomeMessage.jsx | 2 +- src/course-home/progress-tab/ProgressTab.jsx | 2 +- .../certificate-status/CertificateStatus.jsx | 16 +++--- .../course-completion/CourseCompletion.jsx | 2 +- .../grades/course-grade/CourseGrade.jsx | 2 +- .../course-exit/CourseRecommendations.jsx | 57 +++++++++---------- .../course-exit/CourseRecommendations.scss | 19 ------- src/index.scss | 5 ++ 12 files changed, 101 insertions(+), 108 deletions(-) diff --git a/package-lock.json b/package-lock.json index c9e4d2a3..6c762443 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4070,31 +4070,48 @@ } }, "@edx/paragon": { - "version": "17.1.2", - "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-17.1.2.tgz", - "integrity": "sha512-PDPOtpe3zuOFBs18T9cAfCABJ7ABxcPWw+sY256fNjIZlaodOwOK/LN1rtuI9MEEfRk174QKRYZzFbihcbn4iw==", + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-19.0.0.tgz", + "integrity": "sha512-JBGF+65shm2Mf4s72WMd7RtY045rPZTwxH5zuKpEaF8X3dJfG2NIK8qICOFirpCGQWHHAcYiEOR8AQM8RyzJsw==", "requires": { - "@fortawesome/fontawesome-svg-core": "^1.2.30", - "@fortawesome/free-solid-svg-icons": "^5.14.0", - "@fortawesome/react-fontawesome": "^0.1.11", - "@popperjs/core": "^2.6.0", + "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-solid-svg-icons": "^5.15.4", + "@fortawesome/react-fontawesome": "^0.1.16", + "@popperjs/core": "^2.11.2", "airbnb-prop-types": "^2.12.0", "bootstrap": "4.6.0", - "classnames": "^2.2.6", + "classnames": "^2.3.1", "email-prop-type": "^3.0.0", "font-awesome": "^4.7.0", "lodash.uniqby": "^4.7.0", "mailto-link": "^1.0.0", - "prop-types": "^15.7.2", - "react-bootstrap": "^1.3.0", - "react-focus-on": "^3.5.0", - "react-popper": "^2.2.4", + "prop-types": "^15.8.1", + "react-bootstrap": "^1.6.4", + "react-focus-on": "^3.5.4", + "react-popper": "^2.2.5", "react-proptype-conditional-require": "^1.0.4", "react-responsive": "^8.2.0", - "react-table": "^7.6.1", - "react-transition-group": "^4.0.0", + "react-table": "^7.7.0", + "react-transition-group": "^4.4.2", "tabbable": "^4.0.0", "uncontrollable": "7.2.1" + }, + "dependencies": { + "@popperjs/core": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", + "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==" + }, + "prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + } } }, "@formatjs/ecma402-abstract": { diff --git a/package.json b/package.json index 5202810a..1eadd621 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "@edx/frontend-enterprise-utils": "1.1.1", "@edx/frontend-lib-special-exams": "1.15.5", "@edx/frontend-platform": "1.14.3", - "@edx/paragon": "17.1.2", + "@edx/paragon": "19.0.0", "@edx/frontend-component-header": "^2.4.2", "@fortawesome/fontawesome-svg-core": "1.2.36", "@fortawesome/free-brands-svg-icons": "5.15.4", diff --git a/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx b/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx index b7987b0a..38b945f1 100644 --- a/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx +++ b/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx @@ -41,24 +41,22 @@ function StartOrResumeCourseCard({ intl }) { }; return ( - - -
-
-

{hasVisitedCourse ? intl.formatMessage(messages.resumeBlurb) : intl.formatMessage(messages.startBlurb)}

-
-
- -
-
-
+ + logResumeCourseClick()} + > + {hasVisitedCourse ? intl.formatMessage(messages.resume) : intl.formatMessage(messages.start)} + + )} + /> + {/* Footer is needed for internal vertical spacing to work out. If you can remove, be my guest */} + ); } diff --git a/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx b/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx index 2f9a709e..08ae5e4e 100644 --- a/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx +++ b/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx @@ -68,19 +68,18 @@ function WeeklyLearningGoalCard({ return ( - -

{intl.formatMessage(messages.setWeeklyGoal)}

- - {intl.formatMessage(messages.setWeeklyGoalDetail)} - + {intl.formatMessage(messages.setWeeklyGoal)})} + subtitle={intl.formatMessage(messages.setWeeklyGoalDetail)} + /> +
{intl.formatMessage(messages.setGoalReminder)}
-
+ {isGetReminderSelected && ( - +
- + )} ); diff --git a/src/course-home/outline-tab/widgets/WelcomeMessage.jsx b/src/course-home/outline-tab/widgets/WelcomeMessage.jsx index fcc7c155..b2f93cab 100644 --- a/src/course-home/outline-tab/widgets/WelcomeMessage.jsx +++ b/src/course-home/outline-tab/widgets/WelcomeMessage.jsx @@ -37,7 +37,7 @@ function WelcomeMessage({ courseId, intl }) { setDisplay(false); dispatch(dismissWelcomeMessage(courseId)); }} - className="shadow-sm border-0" + className="raised-card" actions={messageCanBeShortened ? [