@everymatrix/player-account-self-exclusion 1.36.0 → 1.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-account-self-exclusion",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "main": "dist/player-account-self-exclusion",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "09be81de9c66446d0062303022d5f036d874d153"
+  "gitHead": "23b14632ab842e43bf71843de47000e6dd141751"
 }

package/src/PlayerAccountSelfExclusion.svelte

@@ -137,7 +137,7 @@
   <form class="SelfExclusionWrapper {isMobile ? 'SelfExclusionWrapperMobile' : ''}">
     {#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--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>
@@ -181,15 +181,17 @@
 
 
 
+
+
   .PlayerSelfExclusionTitle {
     font-size: 26px;
-    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+    color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
     font-weight: 400;
   }
 
   .PlayerSelfExclusionTitleMobile {
-    font-size: 16px;
-    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+    font-size: var(--emw--font-size-large, 20px);
+    color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
   }
 
   .PlayerSelfExclusionTitleNone {
@@ -197,8 +199,10 @@
   }
 
   .SelfExclusionWrapper {
-    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+    background-color: var(--emfe-w-color-pale, var(--emw--color-gray-50, #F1F1F1));
+    color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
     padding: 50px;
+    border-radius: 20px;
     max-width: 760px;
     &.SelfExclusionWrapperMobile {
       padding: 20px 15px;
@@ -207,7 +211,7 @@
   }
 
   .MenuReturnButton{
-    color: var(--emfe-w-color-gray-300, #58586B);
+    color: var(--emw--color-gray-300, #58586B);
     display: inline-flex;
     align-items: center;
     column-gap: 10px;
@@ -217,27 +221,27 @@
 
   .SelfExclusionTitle {
     font-size: 26px;
-    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
-    font-weight: 400;
+    color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
+    font-weight: var(--emw--font-weight-bold, 700);
     &.SelfExclusionTitleMobile {
-      font-size: 14px;
+      font-size: var(--emw--font-size-large, 20px);
     }
   }
 
   .SelfExclusionDescription {
-    color: var(--emfe-w-color-gray-300, #58586B);
+    color: var(--emw--color-gray-300, #58586B);
     line-height: 24px;
     &.SelfExclusionDescriptionMobile {
-      font-size: 12px;
+      font-size: var(--emw--font-size-x-small, 12px);
       line-height: 19px;
     }
     .SelfExclusionDescriptionText a {
-      color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+      color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
     }
   }
 
   .SelfExclusionDateWrapper {
-    color: var(--emfe-w-color-gray-300, #58586B);
+    color: var(--emw--color-gray-300, #58586B);
     display: flex;
     flex-direction: column;
     padding-bottom: 16px;
@@ -245,19 +249,20 @@
     width: 50%;
 
     label {
-      font-size: 14px;
+      font-size: var(--emw--font-size-small, 14px);
       font-weight: 300;
       padding-bottom: 5px;
     }
 
     input {
+      font-family: inherit;
       width: 100%;
       height: 44px;
-      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
+      border: 1px solid var(--emw--color-gray-100, #E6E6E6);
       border-radius: 5px;
       box-sizing: border-box;
       padding: 5px 15px;
-      font-size: 16px;
+      font-size: var(--emw--size-standard, 16px);
       line-height: 18px;
     }
 
@@ -271,17 +276,18 @@
     position: relative;
     padding: 4px 0 0 0;
     margin-bottom: 16px;
-    font-size: 16px;
+    font-size: var(--emw--size-standard, 16px);
     user-select: none;
     line-height: 18px;
 
     label {
-      font-size: 16px;
+      font-size: var(--emw--size-standard, 16px);
       cursor: pointer;
       padding-left: 35px;
     }
 
     input {
+      font-family: inherit;
       position: absolute;
       opacity: 0;
       cursor: pointer;
@@ -295,12 +301,12 @@
       left: 0;
       height: 25px;
       width: 25px;
-      background-color: var(--emfe-w-color-gray-100, #E6E6E6);
+      background-color: var(--emw--color-gray-100, #E6E6E6);
       border-radius: 50%;
     }
 
     input:checked ~ .Checkmark {
-      background-color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+      background-color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
     }
 
     .Checkmark:after {
@@ -322,7 +328,8 @@
 
     &.SelfExclusionRadioWrapperMobile {
       label {
-        font-size: 12px;
+        font-family: inherit;
+        font-size: var(--emw--font-size-x-small, 12px);
       }
     }
   }
@@ -333,19 +340,22 @@
 
     .SelfExclusionSave {
       cursor: pointer;
+      font-family: var(--emw--button-typography);
       border-radius: 5px;
       width: 100%;
       height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 16px;
       text-transform: uppercase;
       transition-duration: 0.3s;
       box-sizing: border-box;
-      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);
+      border-radius: 50px;
+      padding: 30px 0;
+      font-size: var(--emw--font-size-large, 20px);
+      color: var(--emw--button-text-color, #FFFFFF);
     }
 
     &.SelfExclusionActionButtonsMobile {
@@ -353,7 +363,8 @@
       grid-template-columns: 1fr 1fr;
       .SelfExclusionSave {
         height: 40px;
-        font-size: 12px;
+        font-size: var(--emw--font-size-small, 14px);
+        padding: 20px 0;
       }
     }
   }