Scss and small amends

Author: dr-bizz

__mocks__/oktaMock.js

@@ -67,4 +67,16 @@ export class OktaAuth {
   setLoginRedirect (loginRedirect) {
     this.loginRedirect = loginRedirect
   }
+
+  revokeAccessToken () {
+    return Promise.resolve(true)
+  }
+
+  revokeRefreshToken () {
+    return Promise.resolve(true)
+  }
+
+  closeSession () {
+    return Promise.resolve(true)
+  }
 }

src/app/analytics/analytics.factory.spec.js

@@ -128,8 +128,7 @@ describe('analytics factory', () => {
         currency: 'USD',
         price: itemConfig.AMOUNT.toString(),
         quantity: '1',
-        recurring_date: 'September 13, 2023',
-        testing_transaction: 'false',
+        recurring_date: `September 13, ${new Date().getFullYear()}`
       })
     });
 

src/assets/cru-scss/cru.scss

@@ -231,6 +231,15 @@
 @import "sign-in";
 @import "footer";
 
+<<<<<<< HEAD
+
+@import "./components/signInForm";
+@import "./components/signUpModal";
+@import "./components/registerAccountModal";
+@import "./components/contactInfo";
+
+=======
+>>>>>>> 468b762e (config sass to smaller files)
 @import "tabs";
 @import "global-changes";
 @import "responsive";

src/assets/scss/_sign-in.scss

@@ -0,0 +1,26 @@
+
+.redirect-user-after-login {
+  position: fixed;
+  width: 100%;
+  background: #ffffff94;
+  z-index: 2000;
+  height: 100%;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > div {
+    text-align: center;
+  }
+
+  p {
+    margin-bottom: 5px;
+  }
+
+  .btn {
+    margin-top: 30px;
+    width: 150px;
+    display: inline-block;
+  }
+}

src/assets/scss/components/_accountBenefits.scss

@@ -0,0 +1,4 @@
+account-benefits-modal {
+  display: inline-block;
+  padding: 20px;
+}

src/assets/scss/components/_components.scss

@@ -0,0 +1,12 @@
+@import "./signInForm";
+@import "./signInModal";
+@import "./signUpModal";
+@import "./signUpActivationModal";
+@import "./registerAccountModal";
+@import "./contactInfo";
+@import "./userMatchModal";
+@import "./mfaModal";
+@import "./accountBenefits";
+@import "./failedVerificationModal";
+
+

src/assets/scss/components/_contactInfo.scss

@@ -0,0 +1,5 @@
+contact-info { 
+  .add-spouse-btn {
+    margin-bottom: 10px;
+  }
+}

src/assets/scss/components/_failedVerificationModal.scss

@@ -0,0 +1,7 @@
+failed-verification-modal {
+  .modal-body {
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 0;
+  }
+}

src/assets/scss/components/_mfaModal.scss

@@ -0,0 +1,15 @@
+mfa-modal {
+  .mfa-authenicators {
+    display: flex;
+    flex-wrap: wrap;
+
+    .authenicator {
+      flex: 1 100%;
+      margin-bottom: 20px;
+    }
+  }
+
+  .button-centered {
+    text-align: center;
+  }
+}

src/assets/scss/_auth-modal.scss renamed to src/assets/scss/components/_registerAccountModal.scss

@@ -1,33 +1,24 @@
-sign-in-form .okta-button {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 1em 0.5em;
-  gap: 1em;
-
-  img {
-    height: 20px;
-  }
-}
-
 register-account-modal {
+  display: block;
   line-height: 1.2em;
 
+
+  &[data-state=sign-in],
+  &[data-state=sign-up] {
+    display: inline-block;
+  }
+  
   .modal-header {
     padding-bottom: 30px;
     background-color: #EBECEC;
   }
 
-  h3 {
-    padding-bottom: 30px;
-  }
-
   ul {
     padding-left: 1em;
   }
 
   .section {
-    padding-bottom: 30px;
+    margin-top: 20px;
   }
 
   .cart {
@@ -36,10 +27,6 @@ register-account-modal {
     color: white;
   }
 
-  .modal-dialog .give-modal-content & .modal-body {
-    padding: 30px;
-  }
-
   .footer-buttons {
     button {
       width: 100%;
@@ -51,8 +38,29 @@ register-account-modal {
     }
   }
 
+  .signup-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span {
+      font-size: 30px;
+      font-weight: 400;
+      margin: 0 10px;
+    }
+
+    img {
+      max-height: 35px;
+    }
+  }
+
+  .modal-dialog .give-modal-content & .modal-body {
+    padding: 30px;
+  }
+
   .modal-dialog.modal-lg & {
-    &[data-state=sign-in] {
+    &[data-state=sign-in],
+    &[data-state=loading] {
       $body-width: 530px;
       $body-margin: 80px;
       display: flex;
@@ -68,9 +76,26 @@ register-account-modal {
       .modal-body {
         width: $body-width - $body-margin * 2;
         margin: 60px $body-margin;
+
+        sign-in-modal {
+          display: inline-block;
+          padding: 0;
+        }  
       }
     }
     &[data-state=contact-info] {
+
+      .modal-header {
+        text-align: center;
+        width: 100%;
+
+        .paragraph {
+          max-width: 500px;
+          margin-left: auto;
+          margin-right: auto;
+        }
+      }
+
       contact-info-modal form {
         display: grid;
         grid-template: 1fr auto / auto 320px;
@@ -91,6 +116,7 @@ register-account-modal {
       }
     }
     &[data-state=user-match] {
+
       .modal-header h3 {
         text-align: center;
       }
@@ -121,52 +147,8 @@ register-account-modal {
       flex-direction: column;
     }
   }
-}
-
-user-match-modal {
-  h4 {
-    font-weight: bold;
-    text-align: center;
-  }
-
-  input {
-    accent-color: $colorCru-gold;
-  }
-
-  .activate-progress {
-    padding-bottom: 30px;
-
-    progress {
-      width: 100%;
-      accent-color: $colorCru-gold;
-    }
-
-    .step-label {
-      font-weight: bold;
-      padding-left: calc(var(--progress) * 320px);
-
-      .modal-dialog.modal-lg & {
-        padding-left: calc(var(--progress) * 370px);
-      }
-    }
-  }
 
-  .modal-dialog.modal-lg & .success .footer-buttons button {
-    margin-right: auto;
-  }
-}
-
-sign-in-modal {
-  h4 {
-    font-size: 1.3em;
-    line-height: 1.5em;
-  }
-
-  .row {
-    margin-bottom: 1em;
-  }
+  .modal-dialog[data-state=mfa] {
 
-  .content {
-    margin-top: 1em;
   }
 }