Enroll Now button styles (#2252)

mitodl · Jun 13, 2024 · cc61b81 · cc61b81
1 parent 5991ed0
commit cc61b81
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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