Enrollment dialog WCAG fixes (#1965)

Changes the styling and workflow for the enrollment dialog to better fit WCAG standards and making it generally easier for learners to use.
mitodl · Nov 1, 2023 · 2c602cc · 2c602cc
1 parent 31ea6d8
commit 2c602cc
Show file tree

Hide file tree

Showing 9 changed files with 450 additions and 133 deletions.
diff --git a/frontend/public/scss/common.scss b/frontend/public/scss/common.scss
@@ -111,6 +111,11 @@ a.link-button {
     padding: 17px 50px;
   }
 
+  &.btn-sm {
+    font-size: 14px;
+    padding: 5px 20px;
+  }
+
   &.highlight {
     font-size: 20px;
     font-weight: 700;
@@ -427,4 +432,9 @@ button.btn-secondary.unstyled {
 
 .display-none {
   display: none !important;
-}
+}
+
+.alert-dark-success {
+  background-color: rgba(40, 151, 126, 1);
+  color: white;
+}
diff --git a/frontend/public/scss/layout.scss b/frontend/public/scss/layout.scss
@@ -71,3 +71,27 @@ body {
     padding-bottom: 50px;
   }
 }
+
+body.new-design {
+  .modal-title {
+    font-family: Poppins, sans-serif;
+    font-weight: 700;
+  }
+
+  .modal-header {
+    .btn-close {
+      border-radius: 100px;
+      background: var(--Grey-Lite, #F0F5F7) url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon"><path id="X" fill-rule="evenodd" clip-rule="evenodd" d="M5 4.1239L8.94245 0.181446C9.18438 -0.0604821 9.57662 -0.0604821 9.81855 0.181446C10.0605 0.423375 10.0605 0.815619 9.81855 1.05755L5.8761 5L9.81855 8.94245C10.0605 9.18438 10.0605 9.57662 9.81855 9.81855C9.57662 10.0605 9.18438 10.0605 8.94245 9.81855L5 5.8761L1.05755 9.81855C0.815619 10.0605 0.423375 10.0605 0.181446 9.81855C-0.0604821 9.57662 -0.0604821 9.18438 0.181446 8.94245L4.1239 5L0.181446 1.05755C-0.0604821 0.815619 -0.0604821 0.423375 0.181446 0.181446C0.423375 -0.0604821 0.815619 -0.0604821 1.05755 0.181446L5 4.1239Z" fill="%2303152D"/></g></svg>');
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: 10px 10px;
+    }
+  }
+
+  select.form-control {
+    background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.41 3.8147e-06L6 4.58L10.59 3.8147e-06L12 1.41L6 7.41L0 1.41L1.41 3.8147e-06Z" fill="%23344055"/></svg>');
+    background-repeat: no-repeat;
+    background-position: 97% center;
+    background-size: 12px auto;
+  }
+}
diff --git a/frontend/public/scss/product-details.scss b/frontend/public/scss/product-details.scss
@@ -465,10 +465,13 @@
   }
 
   .cancel-link, .faq-link {
-    text-align: center !important;
     margin: 20px 0;
   }
 
+  .faq-link {
+    text-align: center !important;
+  }
+
   .faq-link a {
     color: black;
     font-weight: bold;
@@ -488,9 +491,18 @@
     box-shadow: none;
     font-weight: bold;
   }
+
   form {
     margin-bottom: 20px;
   }
+
+  .cancel-link button {
+    text-align: left;
+  }
+
+  .cancel-enrollment-button {
+    float: right;
+  }
 }
 
 .financial-assistance-link {

diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss
@@ -269,18 +269,14 @@ body.new-design {
               padding-left: 36px;
             }
             button.more-dates-link {
-              color: $brand-darker-bg;
               font-size: 14px;
-              text-decoration-line: underline;
               border: 0;
               padding-left: 0;
               background-color: transparent;
             }
             button.more-dates-link.enrolled {
               color: $green-darker;
               cursor: default;
-              text-decoration-line: none;
-
             }
           }
         }
@@ -309,7 +305,7 @@ body.new-design {
     }
 
     form {
-      margin-bottom: 20px;
+      margin-bottom: 0;
 
       .btn-upgrade {
         width: 100%;
@@ -323,12 +319,6 @@ body.new-design {
       }
     }
 
-    .acheiving-text {
-      font-weight: 600;
-      color: #A41E34;
-      margin-bottom: 1.5rem;
-    }
-
     ul { 
       padding: 0;
     }
@@ -344,19 +334,100 @@ body.new-design {
     }
   }
 
+  div.date-selector-button-bar {
+    margin-bottom: 20px;
+
+    label {
+     font-weight: bold;
+     line-height: 24px; /* 160% */      
+    }
+
+    select {
+      display: flex;
+      width: 690px;
+      padding: 10px 10px;
+      align-items: flex-start;
+      gap: 10px;
+      border-radius: 5px;
+      border: 1px solid var(--BorderGrey, #DFE5EC);
+      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
+      font-size: 14px;
+    }
+  }
+
   div.certificate-pricing-row { 
-    border: 1px solid #DFE5EC;
-    border-left: none;
-    border-right: none;
-    padding: 25px 0 15px 0;
+    border-radius: 5px;
+    border: 1px solid var(--BorderGrey, #DFE5EC);
+    background: rgba(3, 21, 45, 0.05);
+    padding: 15px;
+    margin: 0 1px;
+
+    div.certificate-pricing-logo {
+      img {
+        width: 40px;
+        height: 44px;
+      }
+      margin-right: 10px;
+    }
+
+    p {
+      font-size: 18px;
+      margin-bottom: 0;
+      span.text-danger {
+        font-size: 15px;
+      }
+    }
+
+    .col-6 {
+      padding: 0;
+
+      form {
+        margin-left: 12px;
+
+        button.btn-upgrade {
+          font-size: 20px;
+          line-height: normal;
+          span {
+            font-size: 18px;
+          }
+        }
+      }
+    }
   }
 
-  div.certificate-pricing{
-    background-image: url('/static/images/products/certificate.png');
-    background-repeat: no-repeat;
-    background-position: 10px 5px;
+  div.upgrade-options-row {
+    margin: 30px 1px 20px 1px;
+
+    display: flex;
+    padding: 0px;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch; 
+
+    // border-bottom: 1px solid var(--BorderGrey, #DFE5EC); 
+    border: none;
+
+    div {
+      width: auto;
+      margin: 0;
+      padding: 0;
+
+      a {
+        color: black;
+      }
 
-    padding-left: 43px;
+      button {
+        padding: 0;
+      }
+    }
+  }
+
+  div.upsell-messaging-header {
+    margin: 20px 1px;
+
+    div {
+      font-weight: 700;
+    }
   }
 
   .instructor-modal {

diff --git a/frontend/public/scss/variables.scss b/frontend/public/scss/variables.scss
@@ -9,6 +9,7 @@ $gray-darker: #c2c2c2;
 $green-darker: #3E775D;
 $red-darker: #B43E3E;
 $success: #28977e;
+$success-dark: rgba(40, 151, 126, 1);
 
 $light-gray: #666666;
 $very-light-gray: #f5f5f5;

diff --git a/frontend/public/src/components/CourseInfoBox.js b/frontend/public/src/components/CourseInfoBox.js
@@ -8,7 +8,7 @@ import {
 import moment from "moment-timezone"
 
 import type { BaseCourseRun } from "../flow/courseTypes"
-import { EnrollmentFlaggedCourseRun } from "../flow/courseTypes"
+import { EnrollmentFlaggedCourseRun, RunEnrollment } from "../flow/courseTypes"
 import { getCookie } from "../lib/api"
 import { isWithinEnrollmentPeriod } from "../lib/courseApi"
 import type { User } from "../flow/authTypes"
@@ -17,6 +17,7 @@ import { routes } from "../lib/urls"
 type CourseInfoBoxProps = {
   courses: Array<BaseCourseRun>,
   courseRuns: ?Array<EnrollmentFlaggedCourseRun>,
+  enrollments: ?Array<RunEnrollment>,
   toggleUpgradeDialogVisibility: () => Promise<any>,
   setCurrentCourseRun: (run: EnrollmentFlaggedCourseRun) => Promise<any>,
   currentUser: User
@@ -107,7 +108,7 @@ export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProp
   }
 
   render() {
-    const { courses, courseRuns } = this.props
+    const { courses, courseRuns, enrollments } = this.props
 
     if (!courses || courses.length < 1) {
       return null
@@ -131,7 +132,11 @@ export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProp
         if (courseRun.id !== run.id) {
           startDates.push(
             <li key={index}>
-              {courseRun.is_enrolled
+              {courseRun.is_enrolled ||
+              enrollments.find(
+                (enrollment: RunEnrollment) =>
+                  enrollment.run.id === courseRun.id
+              )
                 ? this.renderEnrolledDateLink(courseRun)
                 : this.renderEnrollNowDateLink(courseRun)}
             </li>