@everymatrix/general-player-login-form 0.0.254 → 0.0.257

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-login-form",
-  "version": "0.0.254",
+  "version": "0.0.257",
   "main": "dist/general-player-login-form.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "454ff35bbd275f884b20cf31dae10609840f5abc"
+  "gitHead": "fb390d6a11e469b9d59db7cf11f59937a32a2555"
 }

package/src/GeneralPlayerLoginForm.svelte

@@ -204,7 +204,9 @@
 <div class="g-recaptcha" data-sitekey="{captchakey}" />
 
 {#if isLoading}
-  <div class="ModalLoader" part="ModalLoader"></div>
+  <div class="ModalLoaderWrapper" part="ModalLoaderWrapper">
+    <div class="ModalLoader" part="ModalLoader"></div>
+  </div>
 {:else}
   <div class="FormContainer {mobileView ? 'FormMobileContainer' : ''}" part="FormContainer {mobileView ? 'FormMobileContainer' : ''}">
     <div class="FormLeftSide" part="FormLeftSide">
@@ -250,13 +252,6 @@
 {/if}
 
 <style lang="scss">
-  //This function does a multiplication
-  // in order to work with px the
-  // same way as working with em
-  @function ttp($value) {
-    $multiplicator: 16px;
-    @return $value * $multiplicator;
-  }
 
   :host {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
@@ -269,7 +264,7 @@
   }
   .FormLeftSide, .FormRightSide {
     flex: 1 1 100%;
-    padding: ttp(3.125);
+    padding: 50px;
   }
   .FormLeftSide {
     background: var(--emfe-w-color-gray-50, #F9F8F8);
@@ -295,42 +290,40 @@
   }
   .FormHeaderSubtitle {
     color: var(--emfe-w-color-gray-300, #58586B);
-    font-size: ttp(0.875);
+    font-size: 14px;
     font-weight: 300;
-    margin: ttp(0.3125) 0 0 0;
+    margin: 5px 0 0 0;
   }
   .FormRegisterCallToAction {
     color: var(--emfe-w-color-primary, #D0046C);
-    font-size: ttp(0.875);
+    font-size: 14px;
     font-weight: 400;
     text-decoration: none;
     cursor: pointer;
   }
   .FormContent {
-    padding-top: ttp(1.25);
+    padding-top: 20px;
   }
   .UserContainer, .PasswordContainer, .CaptchaContainer {
     color: var(--emfe-w-color-gray-300, #58586B);
     display: flex;
     flex-direction: column;
-    padding-bottom: ttp(1.25);
+    padding-bottom: 20px;
     position: relative;
     label {
-      font-size: ttp(0.875);
+      font-size: 14px;
       font-weight: 300;
-      padding-bottom: ttp(0.3125);
+      padding-bottom: 5px;
     }
     input {
       width: 100%;
-      height: ttp(2.75);
+      height: 44px;
       border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-      border-radius: ttp(0.3125);
-      padding: ttp(0.3125);
-      font-size: ttp(0.875);
+      border-radius: 5px;
       box-sizing:border-box;
-      padding: ttp(0.3125) ttp(0.9375);
-      font-size: ttp(1);
-      line-height: ttp(1.125);
+      padding: 5px 15px;
+      font-size: 16px;
+      line-height: 18px;
     }
     &.InvalidField {
       input {
@@ -342,13 +335,13 @@
   }
 
   .PasswordContainer input {
-    padding: ttp(0.3125) ttp(1.875) ttp(0.3125) ttp(0.9375);
+    padding: 5px 30px 5px 15px;
   }
 
   .TogglePasswordVisibility {
-    height: ttp(0.8125);
+    height: 13px;
     position: absolute;
-    right: ttp(0.5);
+    right: 8px;
     bottom: 45px;
     &.InvalidToggle {
       path, circle, rect {
@@ -363,12 +356,12 @@
     color: var(--emfe-w-color-white, #FFFFFF);
     background: var(--emfe-w-color-primary, #D0046C);
     border: 1px solid var(--emfe-w-color-primary, #D0046C);
-    border-radius: ttp(0.3125);
+    border-radius: 5px;
     width: 100%;
-    height: ttp(3.75);
+    height: 60px;
     padding: 0;
     text-transform: uppercase;
-    font-size: ttp(1.125);
+    font-size: 18px;
     cursor: pointer;
     &[disabled] {
       background: var(--emfe-w-color-gray-100, #E6E6E6);
@@ -379,10 +372,10 @@
   .ForgotPasswordButton {
     border: 0;
     background: transparent;
-    font-size: ttp(0.875);
+    font-size: 14px;
     font-weight: 300;
     color: var(--emfe-w-color-primary, #D0046C);
-    margin-top: ttp(0.9375);
+    margin-top: 15px;
     cursor: pointer;
   }
   .PasswordContainer, .UserContainer {
@@ -391,7 +384,7 @@
 
   .InvalidInput {
     color: var(--emfe-w-color-error, #FD2839);
-    font-size: ttp(0.625);
+    font-size: 10px;
     position: absolute;
     top: 55px;
     padding-top: 5px;
@@ -405,7 +398,7 @@
   .FormMobileContainer {
     height:100%;
     .FormLeftSide {
-      padding: ttp(2.5) ttp(1.25);
+      padding: 40px 20px;
     }
     .SignInButton,
     .UserContainer input,
@@ -419,20 +412,26 @@
     // }
   }
 
+  .ModalLoaderWrapper {
+    display: flex;
+    height: 100%;
+    align-items: center;
+  }
+
   .ModalLoader {
     display: block;
-    width: ttp(5);
-    height: ttp(5);
+    width: 80px;
+    height: 80px;
     margin: 0 auto
   }
   .ModalLoader:after {
     content: " ";
     display: block;
-    width: ttp(4);
-    height: ttp(4);
-    margin: ttp(0.5);
+    width: 64px;
+    height: 64px;
+    margin: 8px;
     border-radius: 50%;
-    border: ttp(0.375) solid var(--emfe-w-color-primary, #D0046C);
+    border: 6px solid var(--emfe-w-color-primary, #D0046C);
     border-color: var(--emfe-w-color-primary, #D0046C) transparent var(--emfe-w-color-primary, #D0046C) transparent;
     animation: Loader 1.2s linear infinite;
   }