upgrade button designs

mitodl · Jan 10, 2025 · 91003f5 · 91003f5
1 parent d08ea67
commit 91003f5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 5 deletions.
diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss
@@ -481,6 +481,40 @@ body.new-design {
       outline: 2px #28977e solid;
     }
 
+    form.new-design {
+      text-align: right !important;
+
+      .btn-upgrade {
+        width: 86%;
+        padding: 15px 30px;
+        background-image: none !important;
+
+        div.upgrade-btn-text {
+            display: inline-block;
+            margin-left: 16px;
+        }
+
+        strong {
+          font-size: 20px;
+          line-height: 24.2px;
+        }
+
+        span {
+          font-size: 18px;
+          line-height: 21.78px;
+        }
+
+        i.shopping-cart-line-icon {
+          background-image: url("/static/images/shopping-cart-line.svg");
+          display: inline-block;
+          filter: invert(100%) sepia(95%) saturate(0%) hue-rotate(19deg) brightness(103%) contrast(100%);
+          vertical-align: super;
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+
     form {
       margin-bottom: 0;
 
@@ -493,12 +527,14 @@ body.new-design {
         background-position: 90% 50% !important;
         background-repeat: no-repeat !important;
         padding: 14px 22px;
+
+
       }
       .btn-upgrade:focus-visible {
           border-color: #82192a;
           outline: 0;
           box-shadow: 0 0 0 0.25rem rgba(177, 65, 82, .5);
-        }
+      }
     }
 
     ul {

diff --git a/frontend/public/src/components/CourseProductDetailEnroll.js b/frontend/public/src/components/CourseProductDetailEnroll.js
@@ -339,7 +339,7 @@ export class CourseProductDetailEnroll extends React.Component<
                     <form
                       action="/cart/add/"
                       method="get"
-                      className="text-center"
+                      className={`text-center ${newCartDesign ? "new-design" : ""}`}
                     >
                       <input
                         type="hidden"
@@ -351,9 +351,12 @@ export class CourseProductDetailEnroll extends React.Component<
                         className="btn btn-upgrade btn-gradient-red-to-blue"
                         disabled={!canUpgrade}
                       >
-                        <strong>Enroll and Pay</strong>
-                        <br />
-                        <span>for the certificate track</span>
+                        <i className="shopping-cart-line-icon"/>
+                        <div className="upgrade-btn-text">
+                          <strong>Add to Cart</strong>
+                          <br />
+                          <span>to get a Certificate</span>
+                        </div>
                       </button>
                     </form>
                   </div>