Update REV-1512 experiment gated content (#329)

REV-1512

src/courseware/course/sequence/lock-paywall-value-prop/LockPaywall.jsx

@@ -94,8 +94,10 @@ function LockPaywall({
   const verifiedCertificateLink = (
     <b>
       <a
-        className="text-gray-700 value-prop-verified-certificate-link"
-        style={{ textDecoration: 'underline' }}
+        className="value-prop-verified-certificate-link"
+        style={{ textDecoration: 'underline', color: '#00688D' }}
+        rel="noopener noreferrer"
+        target="_blank"
         href="https://www.edx.org/verified-certificate"
       >
         { (isSpanish) ? 'certificado verificado' : 'verified certificate' }
@@ -113,7 +115,7 @@ function LockPaywall({
       <div className={classNames({ 'is-mobile': isMobile })}>
         <div className="font-weight-bold top-banner-text-header">
           <FontAwesomeIcon icon={faLock} className="text-black mr-2 ml-1 lock-icon" style={{ fontSize: '1rem' }} />
-          <span>
+          <span className="top-banner-title">
             {
               isSpanish
                 ? 'Las tareas calificadas están bloqueadas'
@@ -129,7 +131,8 @@ function LockPaywall({
           }
         </div>
 
-        <div className={classNames('mb-0', { 'd-flex': !isMobile })}>
+        <div className={classNames('mb-0', 'cert-list-wrapper', { 'd-flex': !isMobile })}>
+
           <div className="certificate-image-banner-container">
             <img
               alt="Example Certificate"
@@ -137,8 +140,8 @@ function LockPaywall({
               className="border-0 certificate-image-banner"
             />
           </div>
-          <div style={{ float: 'left', paddingLeft: '18px', paddingBottom: '24px' }}>
-            <div style={{ paddingBottom: '10px' }}>
+          <div className="list-container" style={{ float: 'left', paddingLeft: '18px', paddingBottom: '24px' }}>
+            <div style={{ paddingBottom: '5px' }}>
               {
                 isSpanish
                   ? 'Cuando te cambias a la opción verificada, tú:'

src/courseware/course/sequence/lock-paywall-value-prop/LockPaywall.scss

@@ -5,11 +5,13 @@
     .list-item-row {
         display: flex;
         margin-left: -7px;
+        line-height: 1.5rem;
+        padding-left: 5px;
     }
     .certificate-image-banner {
-        width: 166px;
-        height: 119px;
-        margin-top: 3px;
+        width: 172px;
+        height: 123px;
+        margin-top: 6px;
     }
     .certificate-image-banner-container {
         display: inline-block;
@@ -65,5 +67,27 @@
             padding-left: 0px;
         }
     }
-}
 
+    @media only screen and (max-width: 576px) {
+        .top-banner-text-header {
+            padding-top: 10px;
+        }
+        .top-banner-text {
+            padding-left: 47px !important;
+        }
+        .cert-list-wrapper {
+            display: block !important;
+        }
+        .certificate-image-banner-container {
+            width: 100%;
+            padding-bottom: 10px;
+            padding-left: 0px !important;
+            text-align: center;
+        }
+        .value-prop-upgrade-button-container {
+            padding-bottom: 20px;
+            text-align: center;
+            padding-left: 0px !important;
+        }
+    }
+}