715: ecommerce pressing pay jumps back to dashboard without focus on …

…alert (#1537) * bootstrap updated, much UI broken * Fixes user menu * Fixes spacing in forms * Align form submit buttons correctly * Fix profile form spacing * Fix padding and button formatting Fixes padding issues on upsell message on the enrolled item cards shown on the dashboard. Also fixes the close button formatting on the program drawer. * Fix formatting on flexible price form * Converts font weight for bootstrap 5 Also remove underline from the Title link in the course cards * Sets the close button to white for alerts * Move notification component to main from header * Formatting * Change reactstrap version * Chop down flow headaches * lint * Fixes course about page Fixes enroll button sizing, which was caused by the removal of xs sizing. Replaced those references to xs with sm. Also fixes formatting on the hamburger menu. * format
mitodl · Apr 12, 2023 · 14fa795 · 14fa795
1 parent a959047
commit 14fa795
Show file tree

Hide file tree

Showing 34 changed files with 261 additions and 273 deletions.
diff --git a/frontend/public/package.json b/frontend/public/package.json
@@ -32,7 +32,7 @@
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.4",
     "babel-plugin-istanbul": "5.2.0",
-    "bootstrap": "4.6.1",
+    "bootstrap": "5.2.3",
     "casual-browserify": "1.5.19-2",
     "chai": "4.3.6",
     "chai-as-promised": "7.1.1",
@@ -96,7 +96,7 @@
     "react-swipeable": "7.0.0",
     "react-test-renderer": "16.14.0",
     "react-zendesk": "0.1.13",
-    "reactstrap": "8.10.1",
+    "reactstrap": "9.1.6",
     "redux": "3.7.2",
     "redux-actions": "2.6.5",
     "redux-asserts": "0.0.10",

diff --git a/frontend/public/scss/auth.scss b/frontend/public/scss/auth.scss
@@ -2,7 +2,7 @@
   max-width: 650px;
 
   h1 {
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       font-size: 30px;
     }
 
@@ -19,7 +19,7 @@
   }
 
   h4 {
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       font-size: 16px;
     }
   }

diff --git a/frontend/public/scss/certificates/certificate.scss b/frontend/public/scss/certificates/certificate.scss
@@ -227,7 +227,7 @@ $blue: #355b6b;
     margin: 30px 0 0 20px;
     position: relative;
 
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       float: none;
       margin: 0 0 20px;
     }
@@ -278,7 +278,7 @@ $blue: #355b6b;
   padding: 0;
   float: right;
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     float: none;
     margin: 0;
     text-align: center;
@@ -289,7 +289,7 @@ $blue: #355b6b;
     vertical-align: middle;
     margin: 0 0 0 15px;
 
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       margin: 0 10px 15px;
     }
   }

diff --git a/frontend/public/scss/common.scss b/frontend/public/scss/common.scss
@@ -277,7 +277,6 @@ button.btn-secondary.unstyled {
 
     a, button.unstyled {
       display: block;
-      width: 100%;
       color: $black;
       font-weight: 400;
       font-size: 14px;
@@ -332,6 +331,11 @@ button.btn-secondary.unstyled {
   padding: 24px 24px 32px 24px !important;
   border-width: 0 !important;
 
+  .form-group {
+    margin-bottom: 1.5rem;
+    padding-bottom: 0;
+  }
+
   .auth-header {
     .tell-us-about-your-income {
       font-size: 22px;
@@ -406,3 +410,17 @@ button.btn-secondary.unstyled {
     }
   }
 }
+
+.form-group {
+  padding-bottom: 1rem;
+
+  label {
+    margin-bottom: 0.5rem;
+  }
+  .form-check-label {
+    margin-bottom: 0;
+  }
+}
+.form-control {
+  padding: .375rem 0.75rem;
+}
diff --git a/frontend/public/scss/dashboard.scss b/frontend/public/scss/dashboard.scss
@@ -58,6 +58,12 @@ $enrolled-passed-fg: #ffffff;
         text-decoration: underline;
       }
     }
+    h5 a {
+      text-decoration: none;
+      &:hover{
+        text-decoration: underline;
+      }
+    }
 
     @include media-breakpoint-up(md) {
       .row {
@@ -275,6 +281,8 @@ $enrolled-passed-fg: #ffffff;
       float: none !important;
       width: 24px;
       height: 24px;
+      background-color: transparent;
+      border-width: 0;
 
       span {
         background-image: url('/static/images/close-drawer.png');

diff --git a/frontend/public/scss/notification.scss b/frontend/public/scss/notification.scss
@@ -17,20 +17,7 @@
     &.alert-info, &.alert-danger, &.alert-success {
       color: white;
 
-      a.alert-link, .close {
-        color: white;
-      }
-
-      a.alert-link {
-        font-weight: inherit;
-        text-decoration: underline;
-
-        &:hover {
-          font-weight: 700;
-        }
-      }
-
-      .close {
+      .btn-close {
         opacity: 1;
       }
     }

diff --git a/frontend/public/scss/product-details.scss b/frontend/public/scss/product-details.scss
@@ -23,7 +23,7 @@
   }
 
   .btn-primary.highlight {
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       display: block;
       width: 100%;
     }

diff --git a/frontend/public/scss/top-app-bar.scss b/frontend/public/scss/top-app-bar.scss
@@ -130,7 +130,7 @@ header.site-header {
     top: 66px;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     top: 50px;
   }
 }
@@ -184,6 +184,7 @@ header.site-header {
   position: relative;
   width: 24px;
   height: 24px;
+  border: none;
 
   ul {
     cursor: pointer;
@@ -217,6 +218,10 @@ header.site-header {
     transform: translateY(-50%) rotate(-45deg);
   }
 
+  &:focus {
+    box-shadow: none;
+  }
+
   &.collapsed {
     .bar:nth-child(1) {
       top: 20%;

diff --git a/frontend/public/scss/user-menu.scss b/frontend/public/scss/user-menu.scss
@@ -29,22 +29,20 @@
   @include media-breakpoint-down(sm) {
     display: none;
   }
-
-  &.show {
-    color: $primary;
-
-    .dropdown-toggle::after {
-      border-color: $primary;
-      transform: rotate(45deg);
-      margin-top: 1px;
+  .dropdown-toggle.user-menu-button {
+    &.show {
+      &:after {
+        border-color: $primary;
+        transform: rotate(45deg);
+        margin-top: 1px;
+      }
     }
   }
 
   .dropdown-toggle {
     max-width: 40ch;
     padding: 0px;
     font-weight: 600;
-    overflow: hidden;
     text-overflow: ellipsis;
     position: relative;
     padding-right: 20px;

diff --git a/frontend/public/src/components/EnrolledItemCard.js b/frontend/public/src/components/EnrolledItemCard.js
@@ -1,4 +1,3 @@
-// @flow
 /* global SETTINGS:false */
 import React from "react"
 import moment from "moment"
@@ -425,7 +424,7 @@ export class EnrolledItemCard extends React.Component<
       : "upgrade-item-description detail d-md-flex justify-content-between pb-2"
     const certificateLinksIntStyles = isProgramCard
       ? "enrollment-extra-links d-flex d-md-flex w-100 justify-content-center"
-      : "enrollment-extra-links d-flex d-md-flex col-auto pr-0 justify-content-end"
+      : "enrollment-extra-links d-flex d-md-flex col-auto pe-0 justify-content-end"
 
     const certificateLinks =
       enrollment.run.products.length > 0 &&
@@ -440,7 +439,7 @@ export class EnrolledItemCard extends React.Component<
               </p>
             </div>
             <div className={certificateLinksIntStyles}>
-              <div className="pr-4 my-auto">{financialAssistanceLink}</div>
+              <div className="pe-4 my-auto">{financialAssistanceLink}</div>
               <div className="my-auto">
                 <GetCertificateButton productId={enrollment.run.products[0].id} />
               </div>
@@ -541,7 +540,7 @@ export class EnrolledItemCard extends React.Component<
               {courseRunStatusMessageText}
               <div className="enrollment-extra-links d-flex">
                 {pageLocation ? (
-                  <a className="pr-2" href={pageLocation.page_url}>
+                  <a className="pe-2" href={pageLocation.page_url}>
                     Course details
                   </a>
                 ) : null}
@@ -561,7 +560,7 @@ export class EnrolledItemCard extends React.Component<
           </div>
         </div>
         <div className="row flex-grow-1 pt-3">
-          <div className="col pl-0 pr-0">{certificateLinks}</div>
+          <div className="col pe-0 ps-0">{certificateLinks}</div>
         </div>
       </div>
     )
@@ -651,9 +650,9 @@ export class EnrolledItemCard extends React.Component<
             <div className="detail pt-1">
               {startDateDescription === null}
               {courseRunStatusMessageText}
-              <div className="enrollment-extra-links d-flex pr-2">
+              <div className="enrollment-extra-links d-flex pe-2">
                 <a
-                  className="program-course-count pr-2"
+                  className="program-course-count pe-2"
                   rel="noopener noreferrer"
                   href="#program_enrollment_drawer"
                   aria-flowto="program_enrollment_drawer"
@@ -665,7 +664,7 @@ export class EnrolledItemCard extends React.Component<
                   {courseCount > 1 ? "s" : null}
                 </a>
                 {pageLocation ? (
-                  <a className="pr-2" href={pageLocation.page_url}>
+                  <a className="pe-2" href={pageLocation.page_url}>
                     Course details
                   </a>
                 ) : null}
@@ -685,7 +684,7 @@ export class EnrolledItemCard extends React.Component<
           </div>
         </div>
         <div className="row flex-grow-1 pt-3">
-          <div className="col pl-0 pr-0">{certificateLinks}</div>
+          <div className="col ps-0 pe-0">{certificateLinks}</div>
         </div>
       </div>
     )

diff --git a/frontend/public/src/components/NotificationContainer.js b/frontend/public/src/components/NotificationContainer.js
@@ -3,6 +3,7 @@ import React from "react"
 import { connect } from "react-redux"
 import { compose } from "redux"
 import { partial } from "ramda"
+// $FlowFixMe
 import { Alert } from "reactstrap"
 
 import { removeUserNotification } from "../actions"
@@ -79,6 +80,7 @@ export class NotificationContainer extends React.Component<Props, State> {
               isOpen={!hiddenNotifications.has(notificationKey)}
               toggle={dismiss}
               fade={true}
+              closeClassName="btn-close-white"
             >
               <AlertBodyComponent
                 aria-live="assertive"

diff --git a/frontend/public/src/components/OrderSummaryCard.js b/frontend/public/src/components/OrderSummaryCard.js
@@ -1,5 +1,6 @@
 // @flow
 import React from "react"
+// $FlowFixMe
 import { Button, Badge } from "reactstrap"
 import { formatLocalePrice } from "../lib/util"
 import ApplyCouponForm from "./forms/ApplyCouponForm"
@@ -47,7 +48,7 @@ export class OrderSummaryCard extends React.Component<Props> {
           <div className="d-flex justify-content-between">
             <div className="flex-grow-1">
               Coupon applied (
-              <em className="font-weight-bold text-primary">
+              <em className="fw-bold text-primary">
                 {discounts[0].discount_code}
               </em>{" "}
               )
@@ -190,7 +191,7 @@ export class OrderSummaryCard extends React.Component<Props> {
             <div className="col-12 text-center mt-4 mb-4">
               <Button
                 type="link"
-                className="btn btn-primary btn-gradient-red highlight font-weight-bold"
+                className="btn btn-primary btn-gradient-red highlight fw-bold"
                 onClick={() => (window.location = "/checkout/to_payment")}
               >
                 Place your order

diff --git a/frontend/public/src/components/ProgramCourseInfoCard.js b/frontend/public/src/components/ProgramCourseInfoCard.js
@@ -73,7 +73,7 @@ export class ProgramCourseInfoCard extends React.Component<ProgramCourseInfoCard
           </div>
         </div>
         <div className="row flex-grow-1 pt-3">
-          <div className="col pl-0 pr-0"></div>
+          <div className="col ps-0 pe-0"></div>
         </div>
       </div>
     )

diff --git a/frontend/public/src/components/TopAppBar.js b/frontend/public/src/components/TopAppBar.js
@@ -5,8 +5,8 @@ import { routes } from "../lib/urls"
 import UserMenu from "./UserMenu"
 import AnonymousMenu from "./AnonymousMenu"
 import InstituteLogo from "./InstituteLogo"
-import NotificationContainer from "./NotificationContainer"
 import type { Location } from "react-router"
+import NotificationContainer from "./NotificationContainer"
 
 import type { CurrentUser } from "../flow/authTypes"
 
@@ -17,7 +17,7 @@ type Props = {
 
 const TopAppBar = ({ currentUser }: Props) => (
   <header className="site-header d-flex d-flex flex-column">
-    <NotificationContainer />
+    <NotificationContainer id="notifications-container" />
     <nav
       className={`order-1 sub-nav navbar navbar-expand-md link-section py-2 px-3 py-sm-3 px-sm-4 ${
         currentUser.is_authenticated ? "nowrap login" : ""
@@ -35,8 +35,8 @@ const TopAppBar = ({ currentUser }: Props) => (
       <button
         className="navbar-toggler nav-opener collapsed"
         type="button"
-        data-toggle="collapse"
-        data-target="#nav"
+        data-bs-toggle="collapse"
+        data-bs-target="#nav"
         aria-controls="nav"
         aria-expanded="false"
         aria-label="Toggle navigation"

diff --git a/frontend/public/src/components/UserMenu.js b/frontend/public/src/components/UserMenu.js
@@ -53,11 +53,14 @@ const UserMenu = ({ currentUser, useScreenOverlay }: Props) => {
   return (
     <div {...(menuChildProps.container || {})}>
       <button
-        className="col-2 dropdown-toggle user-menu-button"
+        className="dropdown-toggle user-menu-button"
         id={menuChildProps.dropdownIdentifier}
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
+        data-bs-toggle="dropdown"
+        type="button"
+        role="menu"
       >
         {currentUser.name}
       </button>
-Original file line number
+Diff line change
@@ Expand Up @@
               </div>
             </div>
             <div className="row flex-grow-1 pt-3">
-              <div className="col pl-0 pr-0"></div>
+              <div className="col ps-0 pe-0"></div>
             </div>
           </div>
         )
@@ Expand Down @@