@everymatrix/general-player-sms-verification-form 1.13.14 → 1.13.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-sms-verification-form",
-  "version": "1.13.14",
+  "version": "1.13.16",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a5cf232b09fe0b3050e2243fb25404a2e17f382f"
+  "gitHead": "586fd8038cd1f675aab3c6a81922c36e5d8faa34"
 }

package/src/GeneralPlayerSmsVerificationForm.svelte

@@ -172,8 +172,8 @@ import { onMount } from 'svelte';
 </script>
 
 
-<div class="Container SmsVerificationContainer" bind:this={customStylingContainer} part="SmsVerificationContainer">
-  <h3 class="Title" part="Title">
+<div class="Container SmsVerificationContainer" bind:this={customStylingContainer}>
+  <h3 class="Title">
     {#if isSmsValid}
       {$_('title')}
     {:else}
@@ -181,30 +181,28 @@ import { onMount } from 'svelte';
     {/if}
   </h3>
 
-  <div class="Field SmsVerificationField {!isSmsValid ? 'InvalidField' : ''}" part="SmsVerificationField {!isSmsValid ? 'InvalidField' : ''}">
+  <div class="Field SmsVerificationField {!isSmsValid ? 'InvalidField' : ''}">
     <label for="SmsCode">
-      {$_('code')}:<span class="FormRequired" part="FormRequired">*</span>
+      {$_('code')}:<span class="FormRequired">*</span>
     </label>
     <input bind:value={smsCode} type="text" id="SmsCode" on:keydown={(e) => checkNumeric(e)} inputmode="numeric" pattern="[0-9]*" maxlength="6"/>
 
     {#if !isSmsValid}
-      <p class="InvalidInput" part="InvalidInput">{$_('smsCodeError')}</p>
+      <p class="InvalidInput">{$_('smsCodeError')}</p>
     {/if}
   </div>
 
   {#if timer}
-    <p class="SmsVerificationResendMessage" part="SmsVerificationResendMessage">{$_('resendMessage')}</p>
+    <p class="SmsVerificationResendMessage">{$_('resendMessage')}</p>
   {/if}
 
   <button
     class="Button SmsVerificationValidate"
-    part="SmsVerificationValidate"
     on:click={activateUser}>
     {$_('activate')}
   </button>
   <button
     class="Button SmsVerificationResend"
-    part="SmsVerificationResend"
     on:click={resendCode}
     disabled={timer}>
     {$_('resend')} {#if timer}<span class="SmsVerificationResendTimer">(0:{secondsLeft < 10 ? '0' : ''}{secondsLeft})</span>{/if}
@@ -214,7 +212,6 @@ import { onMount } from 'svelte';
 
 <style lang="scss">
 
-
   *,
   *::before,
   *::after {
@@ -233,7 +230,7 @@ import { onMount } from 'svelte';
   }
 
   .Field {
-    color: var(--emfe-w-color-gray-300, #58586B);
+    color: var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));
     display: flex;
     flex-direction: column;
     padding-bottom: 30px;
@@ -258,9 +255,9 @@ import { onMount } from 'svelte';
 
     &.InvalidField {
       input {
-        border: 1px solid var(--emfe-w-color-primary, #D0046C);
+        border: 1px solid vvar(--emfe-w-registration-color-primary, var(--emfe-w-color-pink-500, #D0046C));
         background: var(--emfe-w-color-primary-50, #FBECF4);
-        color: var(--emfe-w-color-primary, #D0046C);
+        color: var(--emfe-w-registration-color-primary, var(--emfe-w-color-pink-500, #D0046C));
       }
     }
 
@@ -273,7 +270,7 @@ import { onMount } from 'svelte';
     margin-top: 20px;
   }
   .InvalidInput {
-    color: var(--emfe-w-color-error, #FD2839);
+    color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
     font-size: 10px;
     line-height: 10px;
   }
@@ -281,13 +278,13 @@ import { onMount } from 'svelte';
   .ErrorMessage {
     margin: 0 0 15px 0;
     font-size: 12px;
-    color: var(--emfe-w-color-error, #FD2839);
+    color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
   }
 
   .Button {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    background: var(--emfe-w-color-primary, #D0046C);
-    border: 1px solid var(--emfe-w-color-primary, #D0046C);
+    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+    background: var(--emfe-w-registration-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    border: 1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-pink-500, #D0046C));
     border-radius: 5px;
     width: 100%;
     height: 60px;
@@ -302,8 +299,8 @@ import { onMount } from 'svelte';
       cursor: not-allowed;
     }
     &.SmsVerificationResend {
-      background: var(--emfe-w-color-gray-50, #F9F8F8);
-      color: var(--emfe-w-color-black, #000000);
+      background: var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8));
+      color: var(--emfe-w-registration-typography, var(--emfe-w-color-dunkel, #07072A));
     }
   }
 </style>