7049445969
Adapt to the big <Card> 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.
30 lines
862 B
JavaScript
30 lines
862 B
JavaScript
import React from 'react';
|
|
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
|
|
|
import CompletionDonutChart from './CompletionDonutChart';
|
|
import messages from './messages';
|
|
|
|
function CourseCompletion({ intl }) {
|
|
return (
|
|
<section className="text-dark-700 mb-4 rounded raised-card p-4">
|
|
<div className="row w-100 m-0">
|
|
<div className="col-12 col-sm-6 col-md-7 p-0">
|
|
<h2>{intl.formatMessage(messages.courseCompletion)}</h2>
|
|
<p className="small">
|
|
{intl.formatMessage(messages.completionBody)}
|
|
</p>
|
|
</div>
|
|
<div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
|
|
<CompletionDonutChart />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
CourseCompletion.propTypes = {
|
|
intl: intlShape.isRequired,
|
|
};
|
|
|
|
export default injectIntl(CourseCompletion);
|