wip on hb

public/fitness_giving/theme.js

@@ -1,13 +1,13 @@
 const privacyPolicy = document.getElementById('privacy-policy');
-const headerWrapper = document.getElementById('kc-header-wrapper');
-const header = document.getElementById('kc-header');
-const loginBtnWrapper = document.getElementById('kc-info-wrapper')
-const signupBtnWrapper = document.getElementById('kc-registration-container')
 
 if (privacyPolicy) {
   privacyPolicy.innerHTML = ''
 }
 
+const headerWrapper = document.getElementById('kc-header-wrapper');
+const header = document.getElementById('kc-header');
+const loginBtnWrapper = document.getElementById('kc-info-wrapper')
+const signupBtnWrapper = document.getElementById('kc-registration-container')
 if (headerWrapper) {
   headerWrapper.innerHTML = '<h2></h2><p></p>'
 }
@@ -19,5 +19,4 @@ if (header) {
 }
 
 if (loginBtnWrapper) loginBtnWrapper.remove();
-
 if (signupBtnWrapper) signupBtnWrapper.remove();

public/helpbuild/theme.css

@@ -1,28 +1,99 @@
+.login-pf body {
+    background: #f3f4f6;
+}
+
+.login-pf-page {
+    width: 1100px;
+    background: #ffffff;
+    padding: 30px;
+}
+
+body .login-pf-page .card-pf {
+    border: 1px solid #e4e4e7 !important;
+    border-radius: 15px;
+    overflow: hidden;
+    background: none !important;
+}
+
 .login-pf-page .login-pf-header h1 {
-    background: #363F48 !important;
+    background: #ffffff !important;
-    color: #ffffff;
+    color: #000000;
+    border-bottom: 1px solid #e4e4e7 !important;
+}
+
+body .pf-c-form-control {
+    border: 1px solid #e4e4e7 !important;
+    padding: 10px 20px !important;
+    border-radius: 10px !important;
+}
+
+body .pf-c-button.pf-m-primary {
+    font-size: 16px;
 }
 
 .pf-c-button.pf-m-primary {
-    background: #57b8d7 !important;
+    background: #AA11D1 !important;
+}
+
+.pf-c-button.pf-m-primary:hover {
+    opacity: 0.8;
+}
+
+div#kc-content {
+    margin: 65px auto 5px;
 }
 
 div#kc-registration span a:hover {
-    background: #57b8d7;
+    background: #16A34A;
 }
 
 #kc-header {
-    background: #222C36;
+    background: #ffffff;
-    color: #ffffff;
+    color: #000000;
+    position: relative;
 }
 
 .app-logo {
-    background-image: url(logo.svg);
+    background-image: url(https://helpbuild.co/wp-content/uploads/2024/02/Rocket-research-amico.svg);
+    background-position: center;
+    background-size: contain !important;
+    width: 400px !important;
+    height: 270px !important;
+    margin-bottom: 0;
+}
+
+@media screen and (max-width: 600px) {
+    .app-logo {
+        display: none;
+    }
+}
+
+
+body #kc-header {
+    flex: 0 0 500px;
+    max-width: 500px;
+}
+
+#kc-header-wrapper::before {
+    display: none;
 }
 
 .login-pf-page .login-pf-page-header p::before {
-    content: "Making your network work for success.";
+    content: "Let's Turn Fitness into Giving. Together.";
-    color: #ffffff;
+    font-size: 14px;
+    color: #6f6f6f;
+}
+
+#kc-header-wrapper p {
+    margin: 0 !important;
+}
+
+.login-pf-page .login-pf-page-header h2::before {
+    content: 'Welcome to FitnessGiving';
+    font-weight: 700;
+    color: #000;
+    letter-spacing: 0;
+    font-size: 20px;
 }
 
 .login-main-title::before {
@@ -30,21 +101,53 @@ div#kc-registration span a:hover {
 }
 
 .login-sub-heading::before {
-    content: "Get your network working.";
+    content: "Get started.";
 }
 
 #new-to-app::before {
-    content: "New to Helpbuild?";
+    content: "New to Fitness Giving?";
 }
 
 .register-main-title::before {
     content: "Create your account";
 }
 .register-sub-heading::before {
-    content: "Join and get building!";
+    content: "Join and get sweating!";
 }
 
 #kc-header-wrapper::before {
-    background: #57b8d7 !important;
+    background: #16A34A !important;
 }
 
+div#main-logo {
+    height: 100px;
+    background-size: 190px !important;
+    background: url(logo.svg) no-repeat;
+    width: 190px;
+    order: -1;
+    margin: 0 auto 0;
+}
+
+div#kc-registration span a {
+    padding: 10px 25px !important;
+    min-width: 200px;
+    text-align: center;
+}
+
+@media screen and (max-width: 991px) {
+    body {
+        padding: 0 !important;
+    }
+    .login-pf-page {
+        max-width: 100% !important;
+        border-radius: 0 !important;
+        min-height: 100vh;
+    }
+    body #kc-header {
+        max-width: 100% !important;
+        flex: auto;
+    }
+    #kc-header-wrapper, .app-logo {
+        display: none;
+    }
+}

public/helpbuild/theme.js

@@ -1,8 +1,9 @@
+const fixPolicy = () => {
   const privacyPolicy = document.getElementById('privacy-policy');
-
   if (privacyPolicy) {
     privacyPolicy.innerHTML = '<span>By signing up you agree to the Helpbuild <a href="https://helpbuild.co/privacy/">Privacy Policy</a></span>'
   }
+}
 
 const swapLinkedIn = () => {
   var anchor = document.getElementById('social-linkedin-openid-connect');
@@ -27,5 +28,26 @@ const renameGoogle = () => {
   span.textContent = 'Sign in with Google';
 }
 
+const fixLogo = () => {
+  const headerWrapper = document.getElementById('kc-header-wrapper');
+  const header = document.getElementById('kc-header');
+  const loginBtnWrapper = document.getElementById('kc-info-wrapper')
+  const signupBtnWrapper = document.getElementById('kc-registration-container')
+  if (headerWrapper) {
+    headerWrapper.innerHTML = '<h2></h2><p></p>'
+  }
+
+  if (header) {
+    const logo = document.createElement('div');
+    logo.id = 'main-logo';
+    header.appendChild(logo);
+  }
+
+  if (loginBtnWrapper) loginBtnWrapper.remove();
+  if (signupBtnWrapper) signupBtnWrapper.remove();
+}
+
+fixPolicy()
+fixLogo()
 swapLinkedIn()
 renameGoogle()