From cc61b81d4f888e610450c808a82130be48138798 Mon Sep 17 00:00:00 2001
From: Anna Gavrilman <annagav@users.noreply.github.com>
Date: Thu, 13 Jun 2024 16:35:14 +0200
Subject: [PATCH] Enroll Now button styles (#2252)

---
 frontend/public/scss/common.scss                            | 5 -----
 frontend/public/src/components/CourseProductDetailEnroll.js | 6 +++---
 .../public/src/components/ProgramProductDetailEnroll.js     | 6 +++---
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/public/scss/common.scss b/frontend/public/scss/common.scss
index a4098c0f6d..64ef3aaa30 100644
--- a/frontend/public/scss/common.scss
+++ b/frontend/public/scss/common.scss
@@ -146,11 +146,6 @@ a.btn.disabled {
   border: 2px solid grey;
 }
 
-.btn-gradient-red {
-  background: linear-gradient(174deg, $brand-darker-bg, $brand-darker-bg) !important;
-  border: 1px solid $brand-darker-bg;
-}
-
 .btn-denim-blue {
   background-color: $denim-blue;
   border-color: $denim-blue;
diff --git a/frontend/public/src/components/CourseProductDetailEnroll.js b/frontend/public/src/components/CourseProductDetailEnroll.js
index c432b43507..159b72ddfa 100644
--- a/frontend/public/src/components/CourseProductDetailEnroll.js
+++ b/frontend/public/src/components/CourseProductDetailEnroll.js
@@ -429,7 +429,7 @@ export class CourseProductDetailEnroll extends React.Component<
           href={`${routes.login}?next=${encodeURIComponent(
             window.location.pathname
           )}`}
-          className="btn btn-primary btn-enrollment-button btn-lg btn-gradient-red highlight"
+          className="btn btn-primary btn-enrollment-button btn-lg  btn-gradient-red-to-blue highlight"
         >
           Enroll now
         </a>
@@ -467,7 +467,7 @@ export class CourseProductDetailEnroll extends React.Component<
         (courseRuns && courseRuns.length > 1) ? (
             <button
               id="upgradeEnrollBtn"
-              className="btn btn-primary btn-enrollment-button btn-lg btn-gradient-red highlight enroll-now"
+              className="btn btn-primary btn-enrollment-button btn-lg btn-gradient-red-to-blue highlight enroll-now"
               onClick={() => this.toggleUpgradeDialogVisibility()}
               disabled={!run.is_enrollable}
             >
@@ -479,7 +479,7 @@ export class CourseProductDetailEnroll extends React.Component<
               <input type="hidden" name="run" value={run ? run.id : ""} />
               <button
                 type="submit"
-                className="btn btn-primary btn-enrollment-button btn-gradient-red highlight enroll-now"
+                className="btn btn-primary btn-enrollment-button btn-gradient-red-to-blue highlight enroll-now"
                 disabled={!run.is_enrollable}
               >
                 {isRunArchived(run) ? "Access Course Materials" : "Enroll Now"}
diff --git a/frontend/public/src/components/ProgramProductDetailEnroll.js b/frontend/public/src/components/ProgramProductDetailEnroll.js
index f175eb5981..91e2f4cd39 100644
--- a/frontend/public/src/components/ProgramProductDetailEnroll.js
+++ b/frontend/public/src/components/ProgramProductDetailEnroll.js
@@ -405,7 +405,7 @@ export class ProgramProductDetailEnroll extends React.Component<
               {enrollment ? (
                 <Fragment>
                   <div
-                    className={`btn btn-primary btn-enrollment-button btn-gradient-red highlight outline`}
+                    className={`btn btn-primary btn-enrollment-button highlight outline`}
                   >
                     Enrolled &#10003;
                   </div>
@@ -417,14 +417,14 @@ export class ProgramProductDetailEnroll extends React.Component<
                       href={`${routes.login}?next=${encodeURIComponent(
                         window.location.pathname
                       )}`}
-                      className="btn btn-primary btn-enrollment-button btn-lg btn-gradient-red highlight"
+                      className="btn btn-primary btn-enrollment-button btn-lg btn-gradient-red-to-blue highlight"
                     >
                       Enroll now
                     </a>
                   ) : (
                     <Fragment>
                       <button
-                        className="btn btn-primary btn-enrollment-button btn-gradient-red highlight enroll-now"
+                        className="btn btn-primary btn-enrollment-button btn-gradient-red-to-blue highlight enroll-now"
                         onClick={this.toggleUpgradeDialogVisibility}
                       >
                         Enroll now