@everymatrix/player-profile-info 0.0.258 → 0.0.261

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-profile-info",
-  "version": "0.0.258",
+  "version": "0.0.261",
   "main": "dist/player-profile-info.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "29d9cee256c6fbdf17d95ed82bc3ebcc62241704"
+  "gitHead": "a93c0ae8104c039af7d54949a0889c11bca83acb"
 }

package/src/PlayerProfileInfo.svelte

@@ -518,13 +518,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';
@@ -563,11 +556,11 @@
 
   .PlayerDetailsContent {
     display: grid;
-    grid-column-gap: ttp(3.125);
-    grid-row-gap: ttp(1.25);
+    grid-column-gap: 50px;
+    grid-row-gap: 24px;
     grid-template-rows: auto;
     grid-template-columns: 1fr 1fr;
-    padding-bottom: ttp(1.875);
+    padding-bottom: 30px;
   }
 
   .MenuReturnButton{
@@ -582,16 +575,16 @@
     display: flex;
     flex-direction: column;
     label {
-      font-size: ttp(0.875);
+      font-size: 14px;
       font-weight: 300;
-      margin-bottom: ttp(0.625);
+      margin-bottom: 10px;
     }
     input {
-      font-size: ttp(0.875);
+      font-size: 14px;
       font-weight: 300;
       color: var(--emfe-w-color-contrast, #07072A);
-      padding: ttp(0.625);
-      line-height: ttp(1);
+      padding: 10px;
+      line-height: 16px;
       background: var(--emfe-w-color-white, #FFFFFF);
       border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
       border-radius: 5px;
@@ -624,16 +617,16 @@
     .PlayerPhoneNumber {
       display: grid;
       grid-template-columns: 2fr 4fr;
-      column-gap: ttp(0.625);
+      column-gap: 10px;
       position: relative;
     }
     select {
-      font-size: ttp(0.875);
+      font-size: 14px;
       font-weight: 300;
-      padding: ttp(0.625);
+      padding: 10px;
       color: var(--emfe-w-color-contrast, #07072A);
       border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-      border-radius: ttp(0.3125);
+      border-radius: 5px;
       outline: none;
       transition-duration: 0.3s;
       -webkit-appearance: none;
@@ -661,47 +654,47 @@
 
   .PlayerLocationContent {
     display: grid;
-    grid-column-gap: ttp(3.125);
-    grid-row-gap: ttp(1.25);
+    grid-column-gap: 50px;
+    grid-row-gap: 24px;
     grid-template-rows: auto;
     grid-template-columns: 1fr 1fr;
-    padding-bottom: ttp(1.875);
+    padding-bottom: 30px;
   }
 
   .PlayerNotificationBox {
     &:first-child {
-      margin-bottom: ttp(0.625);
+      margin-bottom: 10px;
     }
     label {
       display: inline-flex;
       position: relative;
       align-items: center;
       span {
-        font-size: ttp(0.875);
+        font-size: 14px;
         font-weight: 300;
       }
       input {
-        height: ttp(1.25);
-        width: ttp(1.25);
+        height: 20px;
+        width: 20px;
         -webkit-appearance: none;
         -moz-appearance: none;
         -o-appearance: none;
         appearance: none;
-        border-radius: ttp(3.125);
+        border-radius: 50px;
         outline: none;
         transition-duration: 0.3s;
         background-color: var(--emfe-w-color-gray-100, #E6E6E6);
         cursor: pointer;
-        margin-right: ttp(0.625);
+        margin-right: 10px;
       }
       input:checked {
         background-color: var(--emfe-w-color-primary, #D0046C);
       }
       .Checkmark {
-        left: ttp(0.6875);
-        top: ttp(0.4375);
-        width: ttp(0.25);
-        height: ttp(0.5);
+        left: 10px;
+        top: 7px;
+        width: 4px;
+        height: 8px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
@@ -713,21 +706,21 @@
   }
 
   .PlayerDetailsButtonsArea {
-    grid-column-gap: ttp(0.625);
+    grid-column-gap: 10px;
     grid-template-rows: auto;
     grid-template-columns: 1fr;
-    margin-top: ttp(1.25);
+    margin-top: 20px;
     width: 50%;
 
     .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
       cursor: pointer;
-      border-radius: ttp(0.3125);
+      border-radius: 5px;
       width: 100%;
       height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: ttp(1);
+      font-size: 16px;
       color: var(--emfe-w-color-contrast, #07072A);
       text-transform: uppercase;
       transition-duration: 0.3s;
@@ -763,18 +756,18 @@
       width: 100%;
       grid-template-columns: 1fr 1fr;
       .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
-        height: ttp(2.5);
-        font-size: ttp(0.75);
+        height: 40px;
+        font-size: 12px;
       }
     }
   }
 
   .PlayerNotificationsCheckboxArea {
-    padding-bottom: ttp(1.875);
+    padding-bottom: 30px;
   }
 
   .PlayerInfoWrapperMobile {
-    padding: ttp(1.25) ttp(0.9375);
+    padding: 20px 15px;
     background: var(--emfe-w-color-gray-50, #F9F8F8);
     max-width: unset;
     .PlayerDetailsContent {
@@ -783,19 +776,19 @@
     .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
       h3 {
         color: var(--emfe-w-color-primary, #D0046C);
-        font-size: ttp(0.875);
+        font-size: 14px;
         font-weight: 400;
       }
     }
     .PlayerInfoBox {
       label {
         color: var(--emfe-w-color-gray-300, #58586B);
-        font-size: ttp(0.75);
+        font-size: 12px;
         font-weight: 400;
       }
       input {
         color: var(--emfe-w-color-gray-300, #58586B);
-        font-size: ttp(0.75);
+        font-size: 12px;
         font-weight: 300;
       }
       select {
@@ -809,17 +802,17 @@
       .PlayerNotificationBox {
         label {
             color: var(--emfe-w-color-contrast, #07072A);
-            font-size: ttp(0.75);
+            font-size: 12px;
             font-weight: 300;
         }
       }
     }
     .PlayerDetailsButtonsArea {
-      grid-column-gap: ttp(0.625);
+      grid-column-gap: 10px;
     }
     .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
-      font-size: ttp(0.75);
-      height: ttp(2.5);
+      font-size: 12px;
+      height: 40px;
       color: var(--emfe-w-color-white, #FFFFFF);
       &.PlayerButtonDisabled {
         color: var(--emfe-w-color-gray-300, #58586B);
@@ -831,53 +824,53 @@
   }
 
   .PlayerInfoWrapperTablet {
-    padding: ttp(2.5) 25% ttp(2.5) 25%;
+    padding: 40px 25% 40px 25%;
     .PlayerDetailsContent {
-      grid-row-gap: ttp(1.25);
+      grid-row-gap: 20px;
     }
     .MenuReturnButton {
-      margin-bottom: ttp(1.875);
+      margin-bottom: 30px;
       span {
-        font-size: ttp(1.25);
+        font-size: 20px;
       }
     }
     .PlayerDetailsHeader, .PlayerLocationHeader, .PlayerNotificationsHeader {
       h3 {
-        font-size: ttp(1.5);
+        font-size: 24px;
       }
     }
     .PlayerInfoBox {
       label {
-        font-size: ttp(1.25);
+        font-size: 20px;
       }
       input {
-        height: ttp(1.875);
-        font-size: ttp(1.25);
-        line-height: ttp(1.875);
+        height: 30px;
+        font-size: 20px;
+        line-height: 30px;
       }
       select {
-        font-size: ttp(1.25);
+        font-size: 20px;
       }
       .TogglePasswordVisibility {
-        width: ttp(1.875);
-        top: ttp(1.625);
+        width: 30px;
+        top: 26px;
       }
       .InvalidInput {
-        font-size: ttp(1);
-        bottom: - ttp(3.125);
+        font-size: 16px;
+        bottom: - 50px;
       }
       &:last-child {
         .InvalidInput {
-          font-size: ttp(1);
-          bottom: - ttp(3.125);
+          font-size: 16px;
+          bottom: -50px;
         }
       }
     }
     .PlayerDetailsButtonsArea {
-      grid-column-gap: ttp(2.5);
+      grid-column-gap: 40px;
       .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
-        font-size: ttp(1.25);
-        height: ttp(3.5);
+        font-size: 20px;
+        height: 56px;
       }
       .PlayerDetailsSaveButton {
         color: var(--emfe-w-color-white, #FFFFFF);
@@ -889,15 +882,15 @@
     .PlayerNotificationBox {
       label {
         span {
-          font-size: ttp(1.25);
+          font-size: 20px;
         }
         input {
-          height: ttp(1.625);
-          width: ttp(1.625);
+          height: 26px;
+          width: 26px;
         }
         .Checkmark {
-          left: ttp(3.125);
-          top: ttp(0.5625);
+          left: 50px;
+          top: 9px;
         }
       }
     }
@@ -905,9 +898,9 @@
   .PlayerDetailsConfirmSave {
     background: var(--emfe-w-color-green, #48952a);
     color: var(--emfe-w-color-white, #FFFFFF);
-    padding: ttp(1);
+    padding: 16px;
     border-radius: 5px;
-    margin-top: ttp(1);
+    margin-top: 16px;
     .PlayerDetailsConfirmSaveText {
       padding: 0;
       margin: 0;

package/src/translations.js

@@ -45,7 +45,7 @@ export const PlayerProfileTranslations = {
       securityQuestionError: 'Întrebarea de securitate trebuie să aibă cel puțin 1 caracter și maximum 120 de caractere.',
       firstName: `Prenume:`,
       securityAnswer: `Răspuns securitate:`,
-      securityAnswerError: 'Security answer must be at least 1 character long and maximum 120 characters.',
+      securityAnswerError: 'Raspunsul de securitate trebuie să aibă cel puțin 1 caracter și maximum 120 de caractere.',
       lastName: `Nume:`,
       dateOfBirth: `Data nașterii:`,
       currency: `Monedă:`,
@@ -55,7 +55,7 @@ export const PlayerProfileTranslations = {
       userCityError: 'Orașul trebuie să aibă cel puțin 1 caracter și maximum 50 de caractere.',
       userCity: `Oraș:`,
       userAddress: `Adresă:`,
-      userAddressError: 'Address must be at least 1 character long and 100 characters maximum.',
+      userAddressError: 'Adresa trebuie sa fie cuprinsa intre 1 si 100 de caractere.',
       userPostalCode: `Cod poștal:`,
       userPostalCodeError: 'Codul poștal trebuie să aibă cel puțin 1 caracter și maximum 20 de caractere.',
       userNotifications: `Notificări`,
@@ -75,8 +75,8 @@ export const PlayerProfileTranslations = {
       userEmail: `E-posta:`,
       securityQuestion: `Güvenlik Sorusu:`,
       securityQuestionError: 'Güvenlik sorusu en az 1, en fazla 120 karakter uzunluğunda olmalıdır.',
-      firstName: `First name:`,
-      securityAnswer: `İlk adı:`,
+      firstName: `İlk adı:`,
+      securityAnswer: `Güvenlik cevabı`,
       securityAnswerError: 'Güvenlik cevabı en az 1 karakter uzunluğunda ve en fazla 120 karakter olmalıdır.',
       lastName: `Soyadı:`,
       dateOfBirth: `Doğum tarihi:`,