@saasquatch/mint-components 1.3.2-18 → 1.3.2-19

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -4,7 +4,7 @@ import preset from "jss-preset-default";
 import { intl } from "../../global/global";
 import { HostBlock } from "../../global/mixins";
 import { ProgressBar } from "./progressBar";
-import { ExchangeArrows, CheckMark } from "./SVGs";
+import { ExchangeArrows, CheckMark, Gift } from "./SVGs";
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 const stageProgressList = {
   chooseReward: "Choose reward",
@@ -32,7 +32,6 @@ export function RewardExchangeView(props) {
       "&::part(base)": {
         boxShadow: "none",
         width: "100%",
-        // maxWidth: "350px",
         display: "flex",
         margin: "0 auto",
       },
@@ -41,35 +40,6 @@ export function RewardExchangeView(props) {
         display: "flex",
         width: "100%",
       },
-      "& .text-area": {
-        textAlign: "left",
-        padding: "8px",
-      },
-      "& .title": {
-        fontSize: "var(--sl-font-size-medium)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .amount": {
-        fontSize: "var(--sl-font-size-small)",
-      },
-      "& .error": {
-        fontSize: "var(--sl-font-size-small)",
-        color: "var(--sl-color-warning-500)",
-      },
-      "& .selected-outline": {
-        width: "18px",
-        height: "18px",
-        minWidth: "18px",
-        borderRadius: "50%",
-        background: "var(--sl-color-primary-500)",
-        position: "relative",
-        margin: "-9px",
-        left: "100%",
-      },
-      "& .selected-checkmark": {
-        position: "relative",
-        top: "-6px",
-      },
     },
     Drawer: {
       "&::part(base)": {
@@ -87,14 +57,14 @@ export function RewardExchangeView(props) {
     FullImage: {
       objectFit: "contain",
       maxWidth: "100%",
-      height: "150px",
+      height: "250px",
       display: "flex",
       margin: "0 auto",
     },
     PreviewImage: {
       objectFit: "contain",
       width: "120px",
-      height: "120px",
+      height: "118px",
       flex: 0.33,
     },
     InputBox: {
@@ -121,8 +91,10 @@ export function RewardExchangeView(props) {
       cursor: "pointer",
     },
     ProgressBar: {
-      fontSize: "80%",
-      marginBottom: "20px",
+      maxWidth: "350px",
+      width: "100%",
+      margin: "auto",
+      marginBottom: "var(--sl-spacing-xxx-large)",
       "& .text-area": {
         marginTop: "5px",
         display: "flex",
@@ -131,16 +103,133 @@ export function RewardExchangeView(props) {
         whiteSpace: "nowrap",
         marginBottom: "6px",
         "& .text": {
+          marginBottom: "var(--sl-spacing-x-small)",
           flex: "1 1 0",
         },
         "& .text.subdued": {
-          color: "#BDBDBD",
+          color: "var(--sl-color-neutral-200)",
         },
       },
     },
     KutayCard: {
+      display: "flex",
+      userSelect: "none",
+      height: "120px",
       "&::part(base)": {
         boxShadow: "none",
+        width: "100%",
+      },
+      "&::part(body)": {
+        display: "flex",
+        padding: 0,
+      },
+      "& .selected-outline": {
+        width: "18px",
+        height: "18px",
+        minWidth: "18px",
+        borderRadius: "50%",
+        background: "var(--sl-color-primary-500)",
+        position: "relative",
+        margin: "-9px",
+        left: "100%",
+      },
+      "& .selected-checkmark": {
+        position: "relative",
+        left: "12%",
+        top: "-29%",
+        transform: "scale(0.8)",
+      },
+    },
+    Square: {
+      width: "120px",
+      height: "118px",
+      borderRadius: "3px 0 0 3px",
+      "& .image": {
+        width: "100%",
+        height: "100%",
+        objectFit: "contain",
+        borderRadius: "inherit",
+      },
+      "& .image.subdued": {
+        filter: "brightness(0.95)",
+        opacity: "0.5",
+      },
+    },
+    Image: {
+      "& .image": {
+        objectFit: "contain",
+        width: "120px",
+        height: "118px",
+        flex: 0.33,
+      },
+      "& .image.black": {
+        filter: "brightness(20%)",
+      },
+    },
+    TextArea: {
+      textAlign: "left",
+      padding: "12px",
+      "& .title": {
+        fontSize: "16px",
+        lineHeight: "20px",
+        fontWeight: "600",
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .amount": {
+        fontSize: "14px",
+        lineHeight: "18px",
+        marginTop: "8px",
+        color: "var(--sl-color-neutral-500)",
+      },
+      "& .error": {
+        fontSize: "14px",
+        lineHeight: "18px",
+        marginTop: "8px",
+        fontWeight: "600",
+        color: "var(--sl-color-warning-500)",
+      },
+    },
+    ChooseAmount: {
+      margin: "var(--sl-spacing-medium) 0",
+      "& .title": {
+        //fontSize: "var(--sl-font-size-large)",
+        fontSize: "113%",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .points": {
+        //fontSize: "var(--sl-font-size-large)",
+        fontSize: "113%",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-sky-500)",
+      },
+      "& .description": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-normal)",
+        color: "var(--sl-color-neutral-500)",
+        margin: "var(--sl-spacing-medium) 0",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginTop: "var(--sl-spacing-xx-small)",
+      },
+      "& .space": {
+        marginBottom: "var(--sl-spacing-xxx-large)",
+      },
+    },
+    Success: {
+      textAlign: "center",
+      "& .title": {
+        fontSize: "var(--sl-font-size-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .description": {
+        color: "var(--sl-color-neutral-400)",
+        width: "100%",
+        maxWidth: "350px",
+        margin: "0 auto",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginBottom: "var(--sl-spacing-xxx-large)",
+        marginTop: "var(--sl-spacing-xx-small)",
       },
     },
     KutayButton: {
@@ -173,6 +262,9 @@ export function RewardExchangeView(props) {
       "& .continue.right": {
         marginLeft: "auto",
       },
+      "& .continue.center": {
+        margin: "0 auto",
+      },
     },
   };
   // JSS config
@@ -208,7 +300,7 @@ export function RewardExchangeView(props) {
             id: "unavailableCode",
             defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
           }, {
-            unavailableReason: step.unavailableReason || step.unavailableReasonCode,
+            unavailableReason: step.unavailableReasonCode,
           }))))));
     })));
   }
@@ -236,51 +328,70 @@ export function RewardExchangeView(props) {
           ? item.prettySourceValue
           : `${item.sourceMinValue} to ${item.prettySourceMaxValue}`;
         return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
-          h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
+          h("sl-card", { class: sheet.classes.KutayCard, style: {
+              cursor: item.unavailableReasonCode
+                ? "not-allowed"
+                : "pointer",
+            }, onClick: () => item.available &&
               callbacks.setExchangeState({ selectedItem: item }) },
             item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h("div", { class: "selected-outline" },
               h("div", { class: "selected-checkmark" },
                 h(CheckMark, null)))),
-            // item?.imageUrl &&
-            h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") }),
-            h("div", { class: "text-area" },
-              h("div", { class: "title" }, item.description),
-              h("div", { class: "amount" }, amount),
-              item.unavailableReasonCode && (h("div", { class: "error" }, intl.formatMessage({
-                id: "unavailableCode",
-                defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
-              }, {
-                unavailableReason: item.unavailableReason ||
-                  item.unavailableReasonCode,
-              })))))));
+            h("div", { style: {
+                display: "flex",
+                width: "100%",
+                borderRadius: "3px",
+                background: item.unavailableReasonCode
+                  ? "rgba(0, 0, 0, 0.05)"
+                  : "rgba(0, 0, 0, 0)",
+              } },
+              h("div", { class: sheet.classes.Square },
+                h("img", { class: item.unavailableReasonCode ? "image subdued" : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
+                    getAssetPath("./assets/placeholder.png") })),
+              h("div", { class: sheet.classes.TextArea, style: {
+                  opacity: item.unavailableReasonCode ? "0.5" : "1",
+                } },
+                h("div", { class: "title" }, item.name),
+                h("div", { class: "amount" }, amount),
+                item.unavailableReasonCode && (h("div", { class: "error" }, intl.formatMessage({
+                  id: "unavailableCode",
+                  defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+                }, {
+                  unavailableReason: item.unavailableReason ||
+                    item.unavailableReasonCode,
+                }))))))));
       })),
       h("div", { class: sheet.classes.KutayButton },
         h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), disabled: !states.selectedItem }, "Continue")),
     ];
   }
   function chooseAmount() {
-    var _a;
+    var _a, _b, _c;
     const input = getInput();
     const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
       ? false
       : input && !states.amount;
     return (h("div", null,
-      h("div", null, 
-      //selectedItem?.imageUrl &&
-      h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-          getAssetPath("./assets/Reward-icon.png") })),
-      h("b", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
-      h("div", { class: sheet.classes.InputBox }, input),
+      h("div", null, h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+          getAssetPath("./assets/placeholder.png") })),
+      h("div", { class: sheet.classes.ChooseAmount },
+        h("div", { class: "title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
+        ((_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "points" }, input)) : (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
+        ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", { class: "points" }, input)),
+        h("div", { class: "space" })),
       h("div", { class: sheet.classes.KutayButton },
         h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, "Cancel"),
         h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, "Continue to confirmation"))));
   }
   function confirmation() {
     return (h("div", null,
-      h("h2", null, "Confirm and redeem"),
-      h("div", { style: { textAlign: "center" } },
+      h("h2", { style: { margin: "20px 0" } }, "Confirm and redeem"),
+      h("div", { style: {
+          textAlign: "center",
+          marginBottom: "var(--sl-spacing-xxx-large)",
+        } },
         h("p", null,
-          h("b", null, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
+          h("span", { style: { fontSize: "18px" } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
         h("p", null,
           h(ExchangeArrows, null)),
         h("div", { class: sheet.classes.CardContainer, style: {
@@ -289,20 +400,27 @@ export function RewardExchangeView(props) {
             flex: "1",
             minWidth: "100%",
           } },
-          h("sl-card", { class: sheet.classes.Base },
-            h("img", { class: sheet.classes.PreviewImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-                getAssetPath("./assets/Reward-icon.png") }),
-            h("p", { style: { marginBottom: "0", flex: "1" } }, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue)))),
+          h("sl-card", { style: { width: "auto", maxWidth: "350px", margin: "auto" }, class: sheet.classes.KutayCard },
+            h("div", { class: sheet.classes.Square },
+              h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                  getAssetPath("./assets/placeholder.png") })),
+            h("div", { class: sheet.classes.TextArea, style: {
+                lineHeight: "18px",
+                alignSelf: "center",
+              } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) ? (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) +
+              " " + (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name)
+              : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name)))),
       h("div", { class: sheet.classes.KutayButton },
         h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, "Back"),
         h("sl-button", { class: "continue", size: "large", onClick: callbacks.exchangeReward }, "Redeem"))));
   }
   function success() {
-    return (h("div", { style: { textAlign: "center" } },
-      h("img", { class: sheet.classes.FullImage, src: getAssetPath("./assets/Reward-icon.png") }),
-      h("p", { style: { color: "forestgreen" } }, "Reward Redeemed"),
-      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && h("pre", null, data === null || data === void 0 ? void 0 : data.fuelTankCode),
-      h("sl-button", { class: "continue", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, "Done")));
+    return (h("div", { class: sheet.classes.Success },
+      h(Gift, null),
+      h("div", { class: "title" }, "Reward Redeemed"),
+      h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
+      h("div", { class: sheet.classes.KutayButton },
+        h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, "Done"))));
   }
   const stages = {
     chooseReward: () => chooseReward(),
@@ -315,7 +433,7 @@ export function RewardExchangeView(props) {
     const stageNumber = stageList.indexOf(states.redeemStage);
     return (h("div", { class: sheet.classes.ProgressBar },
       h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
-        if (stage === states.redeemStage) {
+        if (stageList.indexOf(stage) <= stageNumber) {
           return h("span", { class: "text" }, stageProgressList[stage]);
         }
         else {
@@ -324,25 +442,16 @@ export function RewardExchangeView(props) {
       })),
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
-  // const BackButton = () => {
-  //   if (states.redeemStage === "success") return "";
-  //   let previousStage: Stages = "";
-  //   if (states.redeemStage === "confirmation") {
-  //     previousStage = "chooseAmount";
-  //   } else if (states.redeemStage === "chooseAmount") {
-  //     previousStage = "chooseReward";
-  //   }
-  //   return (
-  //     <div slot="label">
-  //       <a
-  //         style={{ cursor: "pointer", fontSize: "80%", color: "#858585" }}
-  //         onClick={() => callbacks.setStage(previousStage)}
-  //       >
-  //         <LeftArrow /> Back
-  //       </a>
-  //     </div>
-  //   );
-  // };
+  function loading() {
+    return (h("div", { style: {
+        display: "flex",
+        height: "400px",
+        alignItems: "center",
+        justifyContent: "center",
+      } },
+      h("div", { style: { transform: "scale(5)" } },
+        h("sl-spinner", null))));
+  }
   function errorMessage() {
     return (h("sl-alert", { type: "danger", open: true },
       h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
@@ -352,6 +461,7 @@ export function RewardExchangeView(props) {
     h("style", { type: "text/css" }, styleString),
     h("div", null,
       stageMap(),
+      states.loading && loading(),
       states.exchangeError && errorMessage(),
       currentStage && currentStage())));
 }

package/dist/collection/components/sqm-stencilbook/AutoColor.js

@@ -0,0 +1,26 @@
+import chroma from "chroma-js";
+export function autoColorScaleCss(color, name = "primary") {
+  if (!chroma.valid(color)) {
+    return;
+  }
+  const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  const hex = chroma(color).hex();
+  const scale = chroma
+    .scale([
+    chroma(hex).luminance(0.95),
+    chroma(hex).luminance(0.84),
+    chroma(hex).luminance(0.73),
+    chroma(hex).luminance(0.62),
+    chroma(hex).luminance(0.49),
+    chroma(hex).luminance(0.35),
+    chroma(hex).luminance(0.23),
+    chroma(hex).luminance(0.15),
+    chroma(hex).luminance(0.1),
+    chroma(hex).luminance(0.05),
+    chroma(hex).luminance(0.02),
+  ])
+    .colors(colorScale.length);
+  return scale
+    .map((color, index) => `--sl-color-${name}-${colorScale[index]}: ${chroma(color).hex()};`)
+    .join("\n");
+}

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -0,0 +1,38 @@
+/**
+ *
+ * Themes
+ *
+ * Export only valid CSS. Those will be injected into style tags.
+ *
+ * Useful links:
+ *  - https://brandcolors.net/
+ *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
+ *
+ */
+import { autoColorScaleCss } from "./AutoColor";
+//
+export const Default = `
+ // No CSS
+`;
+export const Orangey = `
+:root{
+    ${autoColorScaleCss("orange")}
+}
+`;
+export const Netflix = `
+:root{
+    ${autoColorScaleCss("#e50914")}
+}
+`;
+export const SaaSquatchCorporate = `
+:root{
+    ${autoColorScaleCss("green")}
+    --sl-font-sans: Arial;
+}
+`;
+export const NYTimes = `
+:root{
+    ${autoColorScaleCss("black")}
+    --sl-font-sans: Georgia, 'Times New Roman', serif;
+}
+`;

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -1,6 +1,6 @@
 import { h, Component, Host, State } from "@stencil/core";
 import { useStencilbook } from "@saasquatch/stencilbook";
-import { withHooks } from "@saasquatch/stencil-hooks";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import * as ShareButton from "../sqm-share-button/ShareButton.stories";
 import * as ShareLink from "../sqm-share-link/ShareLink.stories";
 import * as BigStat from "../sqm-big-stat/BigStat.stories";
@@ -45,6 +45,7 @@ import * as Hero from "../sqm-hero/Hero.stories";
 import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
 import * as NameFields from "../sqm-name-fields/NameFields.stories";
 import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
+import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
@@ -111,7 +112,15 @@ export class StencilStorybook {
       title: "Mint Components",
       addons: [CucumberAddon, ShadowViewAddon, HookStoryAddon],
     });
-    return (h(Host, { class: Style, onClick: {} }, children));
+    const [selectedTheme, setSelected] = useState("Default");
+    const themes = Object.keys(Themes);
+    const theme = Themes[selectedTheme];
+    return (h(Host, { class: Style, onClick: {} },
+      h("div", { style: { position: "absolute", top: "0", right: "0", zIndex: "999999" } },
+        "Branding:",
+        h("select", { onChange: (e) => setSelected(e.target.value) }, themes.map(t => h("option", { selected: t === selectedTheme }, t)))),
+      h("style", null, theme),
+      children));
   }
   static get is() { return "sqm-stencilbook"; }
   static get states() { return {

package/dist/collection/components/sqm-task-card/sqm-task-card-view.js

@@ -12,23 +12,20 @@ export function TaskCardView(props) {
   const style = {
     HostBlock: HostBlock,
     TaskCard: {
-      "& .main > div": {
-        margin: "var(--sl-spacing-medium)",
-      },
       "& .main": {
         position: "relative",
         boxSizing: "border-box",
         minWidth: "347px",
         background: "var(--sl-color-neutral-0)",
-        border: "1px solid var(--sl-color-neutral-300)",
+        border: "1px solid var(--sl-color-neutral-200)",
         borderRadius: "var(--sl-border-radius-medium)",
         fontSize: "var(--sl-font-size-small)",
         lineHeight: "var(--sl-line-height-dense)",
         color: "var(--sl-color-neutral-600)",
       },
       "& .main.complete": {
-        background: "var(--sl-color-success-50)",
-        borderColor: "var(--sl-color-success-700)",
+        background: "var(--sl-color-primary-50)",
+        borderColor: "var(--sl-color-primary-500)",
       },
       "& .main.expired": {
         color: "var(--sl-color-neutral-400)",
@@ -41,6 +38,12 @@ export function TaskCardView(props) {
       "& .black": {
         color: "var(--sl-color-neutral-1000)",
       },
+      "& .container": {
+        margin: "var(--sl-spacing-medium)",
+      },
+      "& .container > div": {
+        margin: "var(--sl-spacing-medium) 0",
+      },
     },
     Header: {
       display: "flex",
@@ -128,34 +131,39 @@ export function TaskCardView(props) {
           ? "main complete"
           : "main" },
       h("style", { type: "text/css" }, styleString),
-      h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0", height: "12px" } })) : (h("div", null,
-        taskUnavailable && (h("div", { class: "end" }, "Available " +
-          dateStart.toLocaleString(DateTime.DATE_MED).split(",")[0] +
-          " - " +
-          dateEnd.toLocaleString(DateTime.DATE_MED).split(",")[0])),
-        showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, checkmark_circle)),
-        h("span", { class: taskUnavailable ? "value" : "value black" }, props.rewardAmount),
-        h("span", { class: "text" }, props.rewardUnit)))),
-      props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "0 16px", height: "12px" } })) : (h("div", { class: taskUnavailable ? "title" : "title black" }, props.cardTitle)),
-      props.loading ? (h("sl-skeleton", { style: { margin: "12px 16px", height: "12px" } })) : (h(Details, Object.assign({}, props))),
-      props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { margin: "0 16px", height: "12px" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskUnavailable })))),
-      h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto", height: "12px" } })) : (h("div", { style: { display: "contents" } },
-        h("span", { class: "text" },
-          props.repeatable && (h("div", null,
-            h("span", { class: repetitions > 0
-                ? taskUnavailable
-                  ? "icon neutral"
-                  : "icon success"
-                : "icon" }, arrow_left_right),
-            h("span", { class: repetitions > 0
-                ? taskUnavailable
-                  ? "neutral"
-                  : "success"
-                : "" }, "Completed " + repetitions + " times"))),
-          props.showExpiry && !taskUnavailable && (h("span", null, "Ends " + dateEnd.toLocaleString(DateTime.DATE_FULL)))),
-        h("sl-button", { class: taskComplete || taskUnavailable ? "action disabled" : "action", type: "primary", size: "small", onClick: () => props.openNewTab
-            ? window.open(props.buttonLink)
-            : window.open(props.buttonLink, "_self"), disabled: taskComplete || taskUnavailable }, props.buttonText)))))));
+      h("div", { class: "container", style: { opacity: "1" } },
+        h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+          taskUnavailable && (h("div", { class: "end" }, "Available " +
+            dateStart
+              .toLocaleString(DateTime.DATE_MED)
+              .split(",")[0] +
+            " - " +
+            dateEnd.toLocaleString(DateTime.DATE_MED).split(",")[0])),
+          showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, checkmark_circle)),
+          h("span", { class: taskUnavailable ? "value" : "value black" }, props.rewardAmount),
+          h("span", { class: "text" }, props.rewardUnit)))),
+        props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "0 var(--sl-spacing-medium)" } })) : (h("div", { class: taskUnavailable ? "title" : "title black" }, props.cardTitle)),
+        props.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium)" } })) : (h(Details, Object.assign({}, props))),
+        props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { margin: "0 var(--sl-spacing-medium)" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskUnavailable })))),
+        h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+          h("span", { class: "text" },
+            props.repeatable && (h("div", null,
+              h("span", { class: repetitions > 0
+                  ? taskUnavailable
+                    ? "icon neutral"
+                    : "icon success"
+                  : "icon" }, arrow_left_right),
+              h("span", { class: repetitions > 0
+                  ? taskUnavailable
+                    ? "neutral"
+                    : "success"
+                  : "" }, "Completed " + repetitions + " times"))),
+            props.showExpiry && !taskUnavailable && (h("span", null, "Ends " + dateEnd.toLocaleString(DateTime.DATE_FULL)))),
+          h("sl-button", { class: taskComplete || taskUnavailable
+              ? "action disabled"
+              : "action", type: "primary", size: "small", onClick: () => props.openNewTab
+              ? window.open(props.buttonLink)
+              : window.open(props.buttonLink, "_parent"), disabled: taskComplete || taskUnavailable }, props.buttonText))))))));
 }
 function Details(props) {
   const style = {

package/dist/esm/{ShadowViewAddon-2338f393.js → ShadowViewAddon-a3f510db.js}

@@ -1,5 +1,5 @@
 import { h, g as getElement } from './index-17b4da69.js';
-import { d as dist, M, T, e as en } from './index.module-9b5bb6a2.js';
+import { d as dist, M, T, e as en } from './index.module-90d2c3ad.js';
 
 function LeaderboardView(props) {
   var _a;

package/dist/esm/{global-0e81c5e6.js → global-90da933f.js}

@@ -1,5 +1,5 @@
 import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './extends-3a3f9fe2.js';
-import { s as src, m as memoize, S } from './index.module-9b5bb6a2.js';
+import { s as src, m as memoize, S } from './index.module-90d2c3ad.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {