@everymatrix/player-bonus-history 1.36.1 → 1.37.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-bonus-history",
-  "version": "1.36.1",
+  "version": "1.37.1",
   "main": "dist/player-bonus-history",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5ffc382ef56d1d1736e48fec65bba06fbdadc8cf"
+  "gitHead": "b66537a86537df76760b0975a3104240112ad072"
 }

package/src/PlayerBonusHistory.svelte

@@ -161,7 +161,7 @@
     <div class="BonusesWrapper {isMobile ? 'BonusesWrapperMobile' : ''}">
       {#if isMobile}
         <div class="MenuReturnButton" on:click={() => toggleScreen()}>
-          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));}</style></defs><g transform="translate(-20 -158)">
+          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));}</style></defs><g transform="translate(-20 -158)">
             <g transform="translate(20 158)">
               <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
             </g></g>
@@ -240,7 +240,9 @@
 
 
   .BonusesWrapper {
-    color: var(--emfe-w-pam-typography, var(--emfe-w-color-contrast, #07072A));
+    background-color: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));
+    border-radius: var(--emw--border-radius-large, 20px);
+    color: var(--emw--color-typography-cotrast, #444444);
     padding: 50px;
     max-width: 850px;
 
@@ -251,24 +253,24 @@
   }
 
   .MenuReturnButton{
-    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+    color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
     display: inline-flex;
     align-items: center;
     column-gap: 10px;
     margin-bottom: 10px;
     & svg {
-      fill: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+      fill: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
     }
   }
 
   .BonusesTitle {
-    font-size: 26px;
-    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
-    font-weight: 400;
+    font-size: var(--emw--font-size-x-large, 26px);
+    color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
+    font-weight: var(--emw--font-weigh-normal, 400);
   }
 
   .BonusesTitleMobile {
-    font-size: 16px;
+    font-size: var(--emw--size-standard, 16px);
   }
 
   .BonusesTitleNone {
@@ -301,7 +303,7 @@
 
   .BonusesCalendarStartDate,
   .BonusesCalendarEndDate {
-    color: var(--emfe-w-color-gray-300, #58586B);
+    color: var(--emw--color-gray-300, #58586B);
     display: flex;
     position: relative;
     align-items: center;
@@ -313,48 +315,50 @@
       width: 48%;
       .VaadinDatePicker {
         width: 100%;
+        border-radius: var(--emw--border-radius-large, 20px);
       }
     }
 
     label {
-      font-size: 14px;
+      font-size: var(--emw--font-size-small, 14px);
       font-weight: 300;
     }
 
     input {
       width: 100%;
       height: 44px;
-      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-      border-radius: 5px;
+      border: 1px solid var(--emw--color-gray-100, #E6E6E6);
+      border-radius: var(--emw--border-radius-small, 5px);
       box-sizing: border-box;
       padding: 5px 15px;
-      font-size: 16px;
+      font-size: var(--emw--size-standard, 16px);
       line-height: 18px;
-      outline-color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+      outline-color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
     }
   }
 
   .BonusesCalendarFilter {
-    background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
-    border: 1px solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
-    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));
+    border: 2px solid var(--emw--button-border-color, #0E5924);
+    color: var(--emw--button-text-color, #FFFFFF);
+    border-radius: var(--emw--button-border-radius, 50px);
     cursor: pointer;
-    border-radius: 5px;
     width: 120px;
     height: 40px;
-    font-size: 15px;
+    font-size: var(--emw--font-size-medium, 15px);
     text-transform: uppercase;
     text-align: center;
     transition-duration: 0.3s;
     box-sizing: border-box;
     padding: 10px;
+    outline: none;
     &.BonusesCalendarFilterMobile {
       width: 100%;
       height: 44px;
     }
 
     &:active {
-      background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+      background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
     }
   }
 
@@ -362,6 +366,7 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 50px;
+    border-radius: var(--emw--border-radius-large, 20px);
 
     &.BonusesGridMobile {
       grid-template-columns: 1fr;
@@ -377,25 +382,25 @@
       text-align: center;
     }
     .BonusesFirst, .BonusesPrev, .BonusesNext, .BonusesLast {
-      color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
-      font-size: 16px;
+      color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
+      font-size: var(--emw--size-standard, 16px);
       cursor: pointer;
       padding: 5px 10px;
-      font-weight: 700;
+      font-weight: var(--emw--font-weight-bold, 700);
       &.Inactive {
-        color: var(--emfe-w-color-gray-100, #E6E6E6);
+        color: var(--emw--color-gray-100, #E6E6E6);
         cursor: default;
       }
     }
     .BonusesPage {
       margin: 0 5px;
-      color: var(--emfe-w-pam-typography, var(--emfe-w-color-contrast, #07072A));
-      font-size: 16px;
+      color: var(--emw--color-typography-cotrast, #444444);
+      font-size: var(--emw--size-standard, 16px);
       cursor: pointer;
       padding: 5px 10px;
       &.BonusPageActive {
-        background-color: var(--emfe-w-color-white, #FFFFFF);
-        font-weight: 700;
+        background-color: var(--emw--color-white, #FFFFFF);
+        font-weight: var(--emw--font-weight-bold, 700);
       }
     }
   }