diff --git a/public/buyersform/theme.css b/public/buyersform/theme.css index be31902..9e9e59d 100644 --- a/public/buyersform/theme.css +++ b/public/buyersform/theme.css @@ -1,73 +1,234 @@ +@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&family=DM+Sans:opsz@9..40&display=swap"); + .login-pf body { - margin: 0; - padding: 0; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - transition: background-image 0.5s ease-in-out; - background-color: #f4f4f4; + margin: 0; + padding: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: stretch; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + transition: background-image 0.5s ease-in-out; + background-color: #ffffff; +} + +.login-pf-page { + width: 100% !important; + margin: 0 auto !important; + border-radius: 0 !important; + max-width: 540px !important; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .login-pf-page .card-pf { - max-width: 440px !important; - margin: auto !important; - background-color: #ffffff !important; + max-width: 360px !important; + margin: auto !important; + padding: 0 !important; } +.login-pf-page #kc-page-title { + margin: 0 !important; + padding: 0 !important; +} .login-pf-page .login-pf-header h1 { - background: #0559FA !important; + background: none !important; } -.pf-c-button.pf-m-primary { - background: #0559FA !important; +.login-pf-page #kc-ontent, +.login-pf-page #kc-content-wrapper { + height: 100%; } -div#kc-registration span a:hover { - background: #83b451; +.login-pf-page #kc-content { + max-width: 100% !important; + margin: auto !important; +} + +.login-pf-page #kc-form-wrapper, +.login-pf-page #kc-content-wrapper, +.login-pf-page #kc-form-buttons { + margin-top: 80px !important; +} + +.form-group.login-pf-settings, +.login-pf-page .checkbox, +.login-pf-page .checkbox label { + margin-bottom: 0 !important; +} + +.pf-c-button.pf-m-primary, #resendLinkBtn { + background: #0559fa !important; + border-radius: 32px !important; + font-family: "Be Vietnam Pro", sans-serif !important; + font-size: 22px; + font-weight: 600; + line-height: 32px; + text-align: center; +} + +.pf-c-button.pf-m-primary:hover, #resendLinkBtn:hover { + background: #044bd4 !important; } #kc-header { - background: #ffffff; - display: none !important; + background: #ffffff; + display: none !important; } .app-logo { - display: none !important; + display: none !important; } .login-pf-page .login-pf-page-header p::before { - display: none !important;; + display: none !important; } .login-main-title::before { - content: "Buyersform"; -} - -.login-sub-heading::before { - content: "Sign in for full supplier info"; -} - -#new-to-app::before { - content: ""; + content: "Sign In"; } .register-main-title::before { - content: "Create your account"; + content: "Sign Up" !important; } + +.login-main-title::before, +.register-main-title::before, +h1#kc-page-title { + font-family: "Be Vietnam Pro", sans-serif; + font-size: 40px; + font-weight: 600; + line-height: 58px; + letter-spacing: 0em; + text-align: center; + color: rgba(5, 89, 250, 1); +} + +.login-main-title, +.register-main-title { + margin-bottom: 4px; +} + +.login-sub-heading::before { + content: "Enter your email and password"; +} + .register-sub-heading::before { - content: ""; + content: "Create your account" !important; +} + +.login-sub-heading::before, +.register-sub-heading::before { + font-family: DM Sans, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 21px; + letter-spacing: 0em; + text-align: center; + color: rgba(168, 166, 167, 1); +} + +div[class="form-group"]:first-child { + margin-bottom: 22px !important; +} + +label.custom-input-label { + font-family: "Be Vietnam Pro", sans-serif !important; + font-size: 16px !important; + font-weight: 700 !important; + line-height: 16px !important; + color: #000 !important; + margin-bottom: 0 !important; +} + +#kc-info { + margin: 0 !important; +} + +.login-pf div#kc-registration { + text-align: center !important; + font-family: DM Sans, sans-serif !important; + font-size: 16px !important; + line-height: 20px !important; +} + +.login-pf div#kc-registration span { + display: initial !important; + width: initial !important; +} + +.login-pf div#kc-registration span a { + background: none !important; + color: black !important; + padding: 0 !important; + margin: 0 !important; + color: #0559fa !important; +} + +.login-pf div#kc-registration span a:hover { + background: #83b451; +} + +.login-pf #new-to-app::before { + content: "Don’t have an account?"; } .pf-c-form-control { - font-size: 14px; - border: none !important; - background-color: #F3f3f3 !important; - height: auto !important; - padding: 15px 25px !important; - border-radius: 5px; + font-size: 14px; + background: none !important; + border-bottom: 1px solid #a8a6a7 !important; + border-radius: 0 !important; + padding: 2px 0 !important; + height: auto !important; +} + +#privacy-policy { + text-align: center; +} + +#kc-content-wrapper .form-group-row { + margin-bottom: 0 !important; +} + +#kc-content-wrapper .form-group { + margin-bottom: 20px !important; +} + +#kc-content-wrapper .form-group-row .row { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; +} + +#kc-content-wrapper .form-group-row .col-lg-6 { + width: 100% !important; +} + +#kc-info-wrapper { + padding: 0 !important; +} + +#kc-registration { + margin-bottom: 16px !important; +} + +#svg-wrapper { + text-align: center !important; + max-width: 120px !important; + margin: 0 auto 14px !important; +} + +/* Mobiles */ +@media screen and (max-width: 991px) { + .login-pf-page { + flex-direction: row !important; + } +} + +@media screen and (max-width: 400px) { + .login-pf-page .card-pf { + padding: 0 16px !important; + } } diff --git a/public/buyersform/theme.js b/public/buyersform/theme.js index 379bc2a..23a2d0f 100644 --- a/public/buyersform/theme.js +++ b/public/buyersform/theme.js @@ -1,6 +1,105 @@ const privacyPolicy = document.getElementById('privacy-policy'); +const loginpage = document.querySelector(".login-main-title"); +const verifyPage = document.querySelector("#kc-page-title"); if (privacyPolicy) { privacyPolicy.innerHTML = 'By signing up you agree to the BuyersForm Privacy Policy' } +// function createLabel(details) { +// const label = document.createElement("label"); +// label.className = "custom-input-label"; + +// if (details.innerHtml) { +// label.innerHTML = details.innerHtml; +// } + +// if (details.textContent) { +// label.textContent = details.textContent; +// } +// label.for = details.for; + +// return label; +// } + +if (loginpage) { + // inject labels on login page; + const signUpLink = document.querySelector("#new-to-app + a"); + + signUpLink.textContent = "Sign up"; + + // const emailWrapper = document.querySelector( + // 'div.form-group:has(input[id="username"])' + // ); + // const emailLabel = createLabel({ for: "username", textContent: "Email" }); + // // emailWrapper.prepend(emailLabel); + + // // <--- Password --> + // const passwordWrapper = document.querySelector( + // 'div.form-group:has(input[id="password"])' + // ); + // const passwordLabel = createLabel({ for: "password", textContent: "Password" }); + // // passwordWrapper.prepend(passwordLabel); +} + +if (verifyPage.textContent.includes("Email verification")) { + const checkmark = ``; + const style = document.createElement("style"); + style.innerHTML = ` + .login-pf-page #kc-content-wrapper { + margin-top: 0 !important; + } + .alert-warning.pf-c-alert { + display: none !important; + } + + #kc-content-wrapper > .instruction { + text-align: center !important; + font-family: DM Sans, sans-serif !important; + font-size: 14px !important; + font-weight: 400 !important; + line-height: 18px !important; + color: #A8A6A7 !important; + } + + #resendLinkBtn { + color: #fff !important; + text-decoration: none !important; + width: 100% !important; + display: block !important; + margin: 20px 0 0 !important; + padding: 12px !important; + } + `; + + document.head.appendChild(style); + + const headerWrapper = document.getElementsByClassName("login-pf-header")[0]; + const headerH1 = document.querySelector("#kc-page-title"); + + const svgWrapper = document.createElement("div"); + svgWrapper.id = "svg-wrapper"; + + svgWrapper.innerHTML = checkmark; + + headerWrapper.prepend(svgWrapper); + headerH1.textContent = "Verify Account"; + + const description = document.querySelector( + "#kc-content-wrapper > .instruction" + ); + description.textContent = "We’ve emailed you a link to verify your account!"; + + const linkNode = document.querySelector("#kc-info-wrapper > .instruction"); + const childNodesArr = Array.from(linkNode.childNodes); + + childNodesArr.forEach((child) => { + if (child.tagName !== "A") { + linkNode.removeChild(child); + } + }); + + const linkBtn = document.querySelector("#kc-info-wrapper > .instruction a"); + linkBtn.id = "resendLinkBtn"; + linkBtn.textContent = "Resend Link"; +}