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 @@
+
+
\ 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;
+ }
}
}