Merge pull request #1148 from CruGlobal/2362-okta-modal-left-panel

[EP-2362] Implement left panel/header from design

src/assets/scss/_modal.scss

@@ -1,3 +1,10 @@
+.modal-dialog {
+  /* Center dialog on small screens. Bootstrap only applies this margin on screens wider than $screen-sm-min. */
+  margin-inline: auto;
+  /* Center dialog vertically */
+  align-content: center;
+}
+
 .modal-content.give-modal-content {
   .hide-modal {
     display: none;
@@ -110,6 +117,8 @@ body{
   }
 }
 
+$modal-line-height: 1.425em;
+
 .modal-content {
     .form-group {
         label.radio {
@@ -120,7 +129,7 @@ body{
     }
 
   p {
-    line-height: 1.425em;
+    line-height: $modal-line-height;
   }
 }
 
@@ -154,7 +163,7 @@ body{
 }
 
 #addNewPaymentModal{
-	background-color: rgba(138, 138, 138, 0.9); 
+	background-color: rgba(138, 138, 138, 0.9);
 	.light-font{
 		font-size: 14px;
 		color: #d3d3d3;

src/assets/scss/components/_registerAccountModal.scss

@@ -1,111 +1,251 @@
-register-account-modal,
-sign-up-modal {
+register-account-modal:has(sign-up-modal) {
   display: block;
   line-height: 1.2em;
 
-  a {
-    cursor: pointer;
-  }
-
-  ul {
-    padding-left: 1em;
-  }
-
   .modal-body {
-    padding: 30px;
+    padding: 20px;
   }
+}
 
-  .modal-header {
-    padding: 30px;
-    background-color: #EBECEC;
-  }
+.modal-dialog:has(register-account-modal sign-in-modal, register-account-modal sign-up-modal) {
+  width: calc(min(100vw, 400px) - 20px);
 
-  .signup-header {
-    text-align: center;
+  @media (min-width: $screen-md-min) {
+    &:has(.user-state[data-new-user=true]) {
+      width: 900px;
+    }
   }
 }
 
-register-account-modal {
+.modal-content:has(register-account-modal sign-in-modal, register-account-modal sign-up-modal) {
+  background-color: transparent;
 
-  .modal-header ul:last-child {
-    margin-bottom: 0;
-  }
+  /* Override .modal-content Bootstrap styles */
+  border: unset;
+  border-radius: unset;
+  @include box-shadow(none);
+}
 
-  .section {
-    margin-top: 20px;
+register-account-modal:has(sign-in-modal, sign-up-modal) {
+  @media (min-width: $screen-md-min) {
+    .user-state {
+      display: flex;
+      gap: 1rem;
+    }
   }
 
-  .modal-dialog.modal-sm & {
-    &[data-state=sign-in],
-    &[data-state=loading-donor] {
-      .modal-body {
-        padding-top: 30px;
-      }
+  .modal-header {
+    width: 450px;
+    background-color: #f5f5f5;
+
+    /* Override ".modal-content.give-modal-content .modal-header" padding-top styles */
+    .modal-content.give-modal-content & {
+      padding: 0;
     }
-  }
 
-  .modal-dialog.modal-lg & {
-    &[data-state=sign-in],
-    &[data-state=loading-donor] {
-      @media screen and (min-width: 992px) {
-        display: flex;
+    @media (max-width: ($screen-md-min - 1)) {
+      width: auto;
+      margin-bottom: 1rem;
 
-        .modal-header {
-          flex: 1
-        }
+      /* Position the image and the info blocks on top of each other */
+      .header-container {
+        display: grid;
 
-        sign-in-modal {
-          width: 400px;
+        > * {
+          grid-area: 1 / 1;
         }
       }
+
+      .header-image {
+        height: 100%;
+        object-fit: cover;
+        object-position: 50% 25%;
+      }
     }
-    &[data-state=contact-info] {
 
-      .modal-header {
+    @media (min-width: $screen-md-min) {
+      .mobile {
+        display: none !important;
+      }
+    }
+
+    @media (max-width: ($screen-md-min - 1)) {
+      .desktop {
+        display: none !important;
+      }
+    }
+
+    .cru-info {
+      display: flex;
+      justify-content: space-between;
+      gap: 2rem;
+      padding: 1rem 2rem;
+      background-color: white;
+      border-bottom: 2px solid $colorCru-gold;
+
+      @media (max-width: ($screen-md-min - 1)) {
+        height: 100%;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        justify-content: unset;
+        border-bottom: unset;
         text-align: center;
-        width: 100%;
+        color: white;
+        /* Darken .header-image for better contrast */
+        background-color: rgba(0, 0, 0, 0.5);
 
-        .paragraph {
-          max-width: 500px;
-          margin-left: auto;
-          margin-right: auto;
+        img {
+          /* Make the Cru and Okta logos white */
+          filter: brightness(0) invert(1);
         }
       }
 
-      contact-info-modal form {
-        display: grid;
-        grid-template: 1fr auto / auto 320px;
-        column-gap: 20px;
+      .tagline.mobile {
+        font-size: 1.5rem;
+        line-height: 1.2em;
+      }
 
-        .name {
-          grid-column: 1;
-          grid-row: 1;
-        }
-        .address {
-          grid-column: 2;
-          grid-row: 1 / 3;
-        }
-        .contact-info {
-          grid-column: 1;
-          grid-row: 2;
-        }
+      img {
+        width: auto;
+        /* Override global styles */
+        max-width: unset;
+        height: $modal-line-height * 2;
+      }
+    }
+
+    .benefits {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      padding: 2rem;
+
+      /* Override global styles */
+      h2 {
+        margin-bottom: 0;
+      }
+    }
 
-        @media screen and (max-width: 991px) {
-          display: block;
+    .benefit {
+      font-weight: bold;
+    }
+
+    .okta-info {
+      display: flex;
+      align-items: end;
+      /* Makes it easier to align the baseline of the text with the bottom of the image */
+      line-height: 1em;
+
+      &.mobile {
+        gap: 1ch;
+
+        img {
+          height: 1rem;
+          /* Override global Bootstrap image styles */
+          display: unset;
         }
       }
     }
-    &[data-state=user-match] {
 
-      .modal-header h3 {
-        text-align: center;
+    .benefits .okta-info {
+      text-align: center;
+
+      p {
+        flex: 1;
+        /* Override ".modal-content p" styles */
+        line-height: unset;
+      }
+
+      img {
+        height: 1.5rem;
+      }
+    }
+  }
+
+  .user-state[data-new-user=false] {
+    .modal-header {
+      width: auto;
+    }
+
+    .new-user-info {
+      display: none;
+    }
+  }
+
+  .modal-header, .inner-modal {
+    background-color: white;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  .inner-modal {
+    flex: 1;
+  }
+
+  @media (max-width: ($screen-md-min - 1)) {
+    &:has(.user-state[data-new-user=false]) {
+      /* Because the .modal-hidden container is empty for returning users, the close button needs to be moved */
+
+      .modal-content.give-modal-content & button.close {
+        /* Move the close button inside the modal body */
+        top: 25px;
       }
 
-      .modal-body {
-        margin-left: 200px;
-        margin-right: 200px;
+      .inner-modal {
+        /* Make space for the close button in the modal body */
+        padding-top: 25px;
+      }
+    }
+  }
+
+  .signup-header {
+    text-align: center;
+  }
+}
+
+register-account-modal:has(contact-info-modal) {
+  .modal-header {
+    text-align: center;
+    width: 100%;
+
+    .paragraph {
+      max-width: 500px;
+      margin-inline: auto;
+    }
+  }
+
+  @media (min-width: $screen-md-min) {
+    contact-info-modal form {
+      display: grid;
+      grid-template: 1fr auto / auto 320px;
+      column-gap: 20px;
+
+      .name {
+        grid-column: 1;
+        grid-row: 1;
+      }
+      .address {
+        grid-column: 2;
+        grid-row: 1 / 3;
+      }
+      .contact-info {
+        grid-column: 1;
+        grid-row: 2;
       }
     }
   }
+}
 
+register-account-modal {
+  .modal-header h3 {
+    text-align: center;
+  }
+
+  .inner-modal > .modal-body {
+    height: 140px;
+  }
+
+  [uib-tooltip] {
+    cursor: pointer;
+  }
 }

src/assets/scss/components/_signInModal.scss

@@ -1,6 +1,10 @@
 sign-in-modal {
   display: block;
 
+  .modal-body {
+    padding: 20px;
+  }
+
   h4 {
     font-size: 1.3em;
     line-height: 1.5em;

src/assets/scss/components/_signUpModal.scss

@@ -1,6 +1,10 @@
 sign-up-modal {
   position: relative;
 
+  .sign-up-header {
+    text-align: center;
+  }
+
   .signup-steps {
     display: flex;
     justify-content: center;