@everymatrix/player-elevate-card 1.31.2

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-234565f1.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["general-styling-wrapper_5.cjs",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/player-elevate-card.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-234565f1.js');
+
+/*
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('player-elevate-card.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["general-styling-wrapper_5.cjs",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]]]]], options);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,22 @@
+{
+  "entries": [
+    "./components/player-elevate-card/player-elevate-card.js",
+    "./components/player-elevate-card-data/player-elevate-card-data.js",
+    "./components/player-elevate-loyaltycard/player-elevate-loyaltycard.js",
+    "./components/player-elevate-pointcard/player-elevate-pointcard.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/general-styling-wrapper",
+      "tags": [
+        "general-styling-wrapper"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/player-elevate-card/player-elevate-card-items.js

@@ -0,0 +1,43 @@
+import { getAssetPath, h } from '@stencil/core';
+import LoyaltyProgress from '../static/level-percent.svg';
+import { translate } from '../../utils/locale.utils';
+import dateFnsFormat from 'date-fns/format';
+import TipsInfo from '../static/tips-info.svg';
+export const PlayerLoyaltyProcess = () => (h("span", { class: "LevelProgress", id: 'LevelProgress', innerHTML: LoyaltyProgress }));
+export const PlayerPoints = ({ loyaltyPoints, spendablePoints, pointExpireString, language, }) => (h("div", { class: "PointsInfo" },
+  loyaltyPoints &&
+    h("div", { class: 'Points' },
+      loyaltyPoints,
+      " ",
+      h("sub", { class: "XP" }, translate('xp', language))),
+  spendablePoints &&
+    h("div", { class: 'Points' },
+      spendablePoints,
+      " ",
+      h("sub", { class: "XP" }, translate('sp', language))),
+  pointExpireString && (h("div", { class: 'ExpirationPoints' },
+    pointExpireString,
+    " "))));
+export const PlayerElevateCardRedeem = ({ language, onRedeemClick }) => (h("div", { class: "CardCell Redeem" },
+  h("div", { class: "RedeemButton", onClick: () => {
+      onRedeemClick();
+    } },
+    h("span", null, translate('redeem', language)))));
+export const PlayerNameDiv = (props) => (h("div", { class: 'CardCell PlayerName Txt' }, props.playerName));
+export const PlayerElevateLoyaltyLevel = (props) => (h("div", { class: 'CardCell ElevateLevel' },
+  h("span", { class: "LevelName", title: props.level }, props.level),
+  props.expireTime && (h("div", { class: "CardCell ExpirationDate Txt" },
+    translate('expireOn', props.language),
+    h("span", { class: "ExpireTime" }, dateFnsFormat(new Date(props.expireTime), props.dateFormat || 'yyyy-MM-dd')),
+    !props.hideInfo && (h("span", { class: "fa Info", style: { 'background': `url(${getAssetPath('../static/info.svg')})` } },
+      h("span", { class: "InfoTips", innerHTML: TipsInfo })))))));
+export const PlayerAvatar = (props) => {
+  const badge = props.loyaltyIconUrl
+    ? h("img", { class: "Badge", src: props.loyaltyIconUrl })
+    : props.hideIfNull ? '' : h("div", { class: "Badge" });
+  const avatarSrc = props.playerAvatarUrl || getAssetPath('../static/user.svg');
+  return h("div", { class: "PlayerAvatar", style: { 'position': `${props.onlyBadge ? '' : 'relative'}` } },
+    !props.onlyBadge && h("img", { class: "Avatar", src: avatarSrc }),
+    badge);
+};
+export const TextSpan = (props) => (h("div", { class: `${props.classValues}` }, props.textToShow));

package/dist/collection/components/player-elevate-card/player-elevate-card.css

@@ -0,0 +1,65 @@
+@container (max-width: 270px) {
+  .Card .Inner {
+    flex-direction: column;
+  }
+  .Card .Inner .Content {
+    padding: 9px;
+  }
+
+  .Inner .Row .ExpirationPoints {
+    order: 1;
+  }
+}
+.Card .PlayerImg {
+  order: 0;
+}
+.Card .ExpirationPoints {
+  order: 3;
+}
+.Card .LevelInfo {
+  order: 2;
+}
+.Card .Inner .Row .PlayerImg {
+  flex-direction: column;
+}
+.Card .Inner .Row .PointsInfo {
+  width: 100%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  max-height: 50%;
+}
+.Card .Inner .PlayerAvatar .Badge {
+  background-size: contain;
+  background-repeat: no-repeat;
+  position: absolute;
+  right: 5px;
+  bottom: -5px;
+  width: 40%;
+  height: 40%;
+  overflow: visible;
+}
+.Card .Inner .Row .ExpirationPoints {
+  text-align: left;
+  color: var(--emfe-w-color-red, red);
+}
+.Card .Inner .Row .Points {
+  text-wrap: nowrap;
+}
+.Card .Inner .LevelInfo .ElevateLevel {
+  flex-direction: column;
+}
+.Card .Inner .LevelInfo .ElevateLevel .LevelName {
+  width: calc(100% - 20px);
+  text-align: left;
+  font-size: 13px;
+  padding-left: 20px;
+  margin: 10px 0;
+}
+.Card .Inner .LevelInfo .ElevateLevel .ExpirationDate {
+  text-align: center;
+  font-size: smaller;
+}
+.Card .Inner .LevelInfo .ElevateLevel .ExpireTime {
+  margin-left: 5px;
+}

package/dist/collection/components/player-elevate-card/player-elevate-card.js

@@ -0,0 +1,282 @@
+import { Component, Prop, h, State, Listen, Fragment, getAssetPath } from '@stencil/core';
+import { PlayerAvatar, PlayerElevateCardRedeem, PlayerElevateLoyaltyLevel, PlayerLoyaltyProcess, PlayerNameDiv, PlayerPoints, } from './player-elevate-card-items';
+import { TRANSLATIONS } from '../../utils/locale.utils';
+export class PlayerElevateCard {
+  constructor() {
+    /**
+     * The style that widget shows,available value: Dark, Light
+     * Default: Dark
+     */
+    this.theme = 'Dark';
+    /**
+     * Widget Language to show
+     */
+    this.language = 'en';
+    /**
+     * datePattern
+     */
+    this.dateFormat = 'yyyy-MM-dd';
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+    this.playerLevelFlag = 0;
+  }
+  playerElevateLeveLoadedHandler(event) {
+    if (!event.detail) {
+      return;
+    }
+    if (event.detail['elevateLevelWalletTotal']) {
+      this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+    }
+    if (event.detail['elevateLevel']) {
+      this.playerElevateLevel = event.detail['elevateLevel'];
+    }
+    if (event.detail['pointExpireString']) {
+      this.pointExpireString = event.detail.xpExpireString;
+    }
+    if (event.detail.calculatedLevelFlag) {
+      this.playerLevelFlag = event.detail.calculatedLevelFlag;
+    }
+  }
+  onRedeemClick() {
+    window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
+  }
+  componentWillLoad() {
+    this.paramProxy = {
+      endpoint: this.endpoint,
+      session: this.session,
+      language: this.language,
+      calculateLevelFlag: true,
+    };
+  }
+  render() {
+    const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
+    const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
+    return (h("div", { class: `ElevateCardWrapper ${this.theme}` },
+      h("div", { class: "Card Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } },
+        h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }),
+        h("player-elevate-card-data", { params: this.paramProxy }),
+        h("div", { class: "OuterCover Inner", style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, this.playerElevateLevel && (h(Fragment, null,
+          h("div", { class: 'Content Row' },
+            h("div", { class: "PlayerImg" },
+              h(PlayerAvatar, { playerAvatarUrl: this.playerAvatarUrl, loyaltyIconUrl: this.playerElevateLevel.presentation.asset }),
+              h(PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language })),
+            this.pointExpireString && (h("div", { class: 'PointsInfo ExpirationPoints' },
+              this.pointExpireString,
+              " ")),
+            h("div", { class: `LevelInfo Level${this.playerLevelFlag} ${this.playerElevateLevel.presentation.displayName}` },
+              h(PlayerNameDiv, { playerName: this.playerName }),
+              h(PlayerElevateLoyaltyLevel, { hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }),
+              h(PlayerLoyaltyProcess, null),
+              h(PlayerElevateCardRedeem, { onRedeemClick: this.onRedeemClick, language: this.language })))))))));
+  }
+  static get is() { return "player-elevate-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["player-elevate-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["player-elevate-card.css"]
+  }; }
+  static get assetsDirs() { return ["../static"]; }
+  static get properties() { return {
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The NWA endpoint"
+      },
+      "attribute": "endpoint",
+      "reflect": true
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The style that widget shows,available value: Dark, Light\nDefault: Dark"
+      },
+      "attribute": "theme",
+      "reflect": true,
+      "defaultValue": "'Dark'"
+    },
+    "session": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The NWA session for the logged-in user"
+      },
+      "attribute": "session",
+      "reflect": true
+    },
+    "playerAvatarUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget, player avatar url"
+      },
+      "attribute": "player-avatar-url",
+      "reflect": true
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Language to show"
+      },
+      "attribute": "language",
+      "reflect": true,
+      "defaultValue": "'en'"
+    },
+    "playerName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Player name"
+      },
+      "attribute": "player-name",
+      "reflect": true
+    },
+    "dateFormat": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "datePattern"
+      },
+      "attribute": "date-format",
+      "reflect": true,
+      "defaultValue": "'yyyy-MM-dd'"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via inline styles"
+      },
+      "attribute": "client-styling",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url"
+      },
+      "attribute": "client-styling-url",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "translationUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Translation via url"
+      },
+      "attribute": "translation-url",
+      "reflect": true,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "pointExpireString": {},
+    "playerLevelFlag": {},
+    "playerElevateLevel": {},
+    "elevateWalletTotal": {}
+  }; }
+  static get listeners() { return [{
+      "name": "playerElevateLeveLoaded",
+      "method": "playerElevateLeveLoadedHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/player-elevate-card-data/player-elevate-card-data.css

@@ -0,0 +1,189 @@
+:host {
+  display: block;
+  width: 360px;
+  height: 230px;
+}
+
+.ElevateCardWrapper {
+  contain: layout inline-size;
+  width: 100%;
+  height: fit-content;
+  min-height: 218px;
+}
+
+.Outer {
+  container-type: inline-size;
+  font-size: 12px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  line-height: initial;
+  width: 100%;
+  height: 100%;
+}
+
+.Dark {
+  color: var(--emfe-w-color-gray150, #efefef);
+}
+
+.Light {
+  color: var(--emfe-w-color-black, #0e0e0e);
+}
+
+@container (min-width: 381px) {
+  .Outer {
+    background-size: cover;
+  }
+  .Outer .OuterCover {
+    min-height: 190px;
+  }
+}
+@container (min-width: 260px) {
+  .Outer {
+    background-size: contain;
+  }
+}
+.OuterCover {
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 15px;
+}
+
+.Inner {
+  display: flex;
+  flex-direction: column;
+  min-height: 158px;
+}
+.Inner .Content {
+  padding: 15px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.Inner .Row {
+  display: flex;
+  flex-direction: row;
+}
+.Inner .CardCell {
+  display: flex;
+}
+.Inner .LevelInfo {
+  display: flex;
+  flex-direction: column;
+}
+.Inner .LevelInfo .ElevateLevel .LevelName {
+  height: 28px;
+  border-radius: 5px;
+  line-height: 28px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.Inner .LevelInfo.Level0 .ElevateLevel .LevelName {
+  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level0button-shadow, rgba(191, 84, 6, 0.75));
+  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level0-bg0, #E2792C) 0%, var(--emfe-w-elevate-color-level0-bg1, rgba(242, 151, 99, 0)) 100%);
+}
+.Inner .LevelInfo.Level1 .ElevateLevel .LevelName {
+  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level1button-shadow, rgba(151, 151, 151, 0.75));
+  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level1-bg0, #BEBFED) 0%, var(--emfe-w-elevate-color-level1-bg1, rgba(216, 217, 233, 0)) 100%);
+}
+.Inner .LevelInfo.Level2 .ElevateLevel .LevelName {
+  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level2button-shadow, rgba(191, 120, 6, 0.75));
+  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level2-bg0, #FCC410) 0%, var(--emfe-w-elevate-color-level2-bg1, rgba(255, 189, 43, 0)) 100%);
+}
+.Inner .LevelInfo.Level3 .ElevateLevel .LevelName {
+  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level3button-shadow, rgba(65, 6, 191, 0.75));
+  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level3-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level3-bg1, rgba(203, 202, 245, 0)) 100%);
+}
+.Inner .LevelInfo.Level4 .ElevateLevel .LevelName {
+  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level4button-shadow, rgba(65, 6, 191, 0.75));
+  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level4-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level4-bg1, rgba(203, 202, 245, 0)) 100%);
+}
+.Inner .LevelInfo .ElevateLevel {
+  display: flex;
+}
+.Inner .LevelInfo {
+  flex: 1;
+  flex-grow: 1;
+  min-width: 150px;
+}
+.Inner .PlayerImg {
+  width: 29%;
+  margin: auto;
+  max-width: 100px;
+  min-width: 30px;
+  order: 0;
+}
+.Inner .PlayerAvatar {
+  max-width: 100px;
+  flex-basis: 100px;
+  height: auto;
+  margin: auto;
+  padding-top: 10px;
+}
+.Inner .PlayerAvatar .Avatar, .Inner .PlayerAvatar .Badge {
+  width: 100%;
+  height: 100%;
+}
+.Inner .PlayerAvatar .Avatar {
+  border-radius: 50%;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.Inner .ElevateLevel .ExpirationDate {
+  max-width: 138px;
+  min-width: 118px;
+}
+.Inner .PlayerName, .Inner .RedeemButton, .Inner .ElevateLevel {
+  text-transform: capitalize;
+  width: 100%;
+}
+.Inner .PlayerName {
+  font-size: 16px;
+}
+.Inner .Row .PointsInfo {
+  display: table;
+  font-weight: 600;
+}
+.Inner .Row .Redeem {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+.Inner .Row .Redeem:hover {
+  color: var(--emfe-w-elevate-color-redeem-hover, #00ABA4);
+  cursor: pointer;
+}
+.Inner .Row .RedeemButton:hover span {
+  color: var(emfe-w-elevate-color-redeem-text-hover, #f1f1f1);
+  font-weight: bold;
+}
+.Inner .Row .RedeemButton {
+  width: 95px;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  background: var(--emfe-w-elevate-color-redeem-bg, linear-gradient(0deg, #26CC37, #26CC37)), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%);
+  box-shadow: 0px 4px 4px 0px #00000040;
+}
+.Inner .Row .RedeemButton span {
+  color: var(--emfe-w-color-white, #fff);
+  line-height: 18px;
+  font-size: 15px;
+  text-align: center;
+  width: 100%;
+}
+.Inner .Row .Points {
+  font-size: large;
+  vertical-align: middle;
+}
+.Inner .Row .Points .XP {
+  font-size: x-small;
+}
+.Inner .Row .ExpirationPoints {
+  font-size: small;
+  text-align: right;
+  font-weight: bold;
+  color: var(--emfe-w-color-red, #9e595f);
+}