diff --git a/assets/micro-masters.svg b/assets/micro-masters.svg new file mode 100644 index 0000000..bca900d --- /dev/null +++ b/assets/micro-masters.svg @@ -0,0 +1,13 @@ + + + + micro-masters + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/components/ProfilePage/Certificates.jsx b/src/components/ProfilePage/Certificates.jsx index 76f349d..b0ff8cb 100644 --- a/src/components/ProfilePage/Certificates.jsx +++ b/src/components/ProfilePage/Certificates.jsx @@ -11,6 +11,9 @@ import FormControls from './elements/FormControls'; import EditableItemHeader from './elements/EditableItemHeader'; import SwitchContent from './elements/SwitchContent'; +// Assets +import microMastersSVG from '../../../assets/micro-masters.svg'; + // Selectors import { certificatesSelector } from '../../selectors/ProfilePageSelector'; @@ -45,9 +48,15 @@ class Certificates extends React.Component { renderCertificate({ certificateType, courseDisplayName, courseOrganization, downloadUrl, }) { + const { intl } = this.props; + return ( +

{certificateType}

@@ -62,11 +71,7 @@ class Certificates extends React.Component {
{courseOrganization}
diff --git a/src/components/ProfilePage/Certificates.messages.jsx b/src/components/ProfilePage/Certificates.messages.jsx index 26a582c..2217531 100644 --- a/src/components/ProfilePage/Certificates.messages.jsx +++ b/src/components/ProfilePage/Certificates.messages.jsx @@ -6,6 +6,11 @@ const messages = defineMessages({ defaultMessage: 'My Certificates', description: 'A section of a user profile', }, + 'profile.certificates.view.certificate': { + id: 'profile.certificates.view.certificate', + defaultMessage: 'View Certificate', + description: 'A call to action to view a certificate', + }, }); export default messages; diff --git a/src/index.scss b/src/index.scss index 1478596..d5daaa7 100755 --- a/src/index.scss +++ b/src/index.scss @@ -114,10 +114,26 @@ $fa-font-path: "~font-awesome/fonts"; } .certificate { + position: relative; .certificate-title { font-family: $font-family-serif; font-weight: 400; } + .certificate-type-illustration { + position: absolute; + top: 0; + left: 50%; + right: 1rem; + bottom: 0; + // z-index: -1; + opacity: .06; + background-size: 90%; + background-repeat: no-repeat; + background-position: right center; + } + .card-body { + position: relative; + } } }