From 0335a8c4a280b038de31cbfb8a30d7f80a4b3350 Mon Sep 17 00:00:00 2001
From: David Joy <davidjoy@users.noreply.github.com>
Date: Wed, 13 Mar 2019 12:24:42 -0400
Subject: [PATCH] Improve card styling. (#85)

Consistent height and watermark placement.  Also, no watermark by default.
---
 src/components/ProfilePage.jsx              |  2 +-
 src/components/ProfilePage/Certificates.jsx | 10 ++++++----
 src/index.scss                              |  6 +++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/ProfilePage.jsx b/src/components/ProfilePage.jsx
index c17645d..6f06014 100644
--- a/src/components/ProfilePage.jsx
+++ b/src/components/ProfilePage.jsx
@@ -221,7 +221,7 @@ export class ProfilePage extends React.Component {
                 {...commonFormProps}
               />
             </Col>
-            <Col md={8} lg={{ size: 8, offset: 1 }} className="pt-md-3">
+            <Col md={8} lg={{ size: 7, offset: 1 }} className="pt-md-3">
               {shouldShowAgeMessage ? <AgeMessage accountURL="#account" /> : null}
               <Bio
                 bio={bio}
diff --git a/src/components/ProfilePage/Certificates.jsx b/src/components/ProfilePage/Certificates.jsx
index 988e249..af7100d 100644
--- a/src/components/ProfilePage/Certificates.jsx
+++ b/src/components/ProfilePage/Certificates.jsx
@@ -58,19 +58,20 @@ class Certificates extends React.Component {
         case 'MicroMasters Certificate':
           return microMastersSVG;
         case 'Verified Certificate':
-        default:
           return verifiedCertificateSVG;
+        default:
+          return null;
       }
     })(certificateType);
 
     return (
-      <Col key={downloadUrl} sm={6}>
+      <Col key={downloadUrl} sm={6} className="d-flex align-items-stretch">
         <Card className="mb-4 certificate">
           <div
             className="certificate-type-illustration"
             style={{ backgroundImage: `url(${certificateIllustration})` }}
           />
-          <CardBody>
+          <CardBody className="d-flex flex-column">
             <CardTitle>
               <p className="small mb-0">{certificateType}</p>
               <h4 className="certificate-title">{courseDisplayName}</h4>
@@ -82,6 +83,7 @@ class Certificates extends React.Component {
               />
             </p>
             <p className="h6 mb-4">{courseOrganization}</p>
+            <div className="flex-grow-1" />
             <div>
               <Button outline color="primary" href={downloadUrl} target="blank">
                 {intl.formatMessage(messages['profile.certificates.view.certificate'])}
@@ -103,7 +105,7 @@ class Certificates extends React.Component {
     }
 
     return (
-      <Row>{this.props.certificates.map(certificate => this.renderCertificate(certificate))}</Row>
+      <Row className="align-items-stretch">{this.props.certificates.map(certificate => this.renderCertificate(certificate))}</Row>
     );
   }
 
diff --git a/src/index.scss b/src/index.scss
index f04961f..59d16ee 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -118,14 +118,14 @@ $fa-font-path: "~font-awesome/fonts";
     }
     .certificate-type-illustration {
       position: absolute;
-      top: 0;
-      left: 50%;
+      top: 1rem;
       right: 1rem;
       bottom: 0;
+      width: 12rem;
       opacity: .06;
       background-size: 90%;
       background-repeat: no-repeat;
-      background-position: right center;
+      background-position: right top;
     }
     .card-body {
       position: relative;