fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC6

package/packages/event-game-play/src/components/Variants/Standard/FinishedGame/EventGameStandardFinishedGame.styles.js

@@ -1,548 +0,0 @@
-import "react";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import { hexToRgb as t } from "../../../../../../common/src/functions/helpers.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import "../../../../../../../node_modules/react/jsx-runtime.js";
-import "@mui/joy";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-const y = (e) => {
-  var i, n, a;
-  return {
-    // Main content area
-    mainContentArea: {
-      flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
-      display: "flex",
-      flexDirection: "column",
-      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
-      gap: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
-    },
-    // Question area
-    questionArea: {
-      display: "flex",
-      flexDirection: "column",
-      pt: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
-      px: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
-    },
-    // Question container
-    questionContainer: {
-      display: "flex",
-      flexDirection: "column",
-      gap: e.isMobile ? e.spacingScale.lg : e.spacingScale.md
-    },
-    // Question content container
-    questionContentContainer: {
-      borderRadius: e.borderRadius.md,
-      gap: e.spacingScale.md,
-      display: "flex",
-      flexDirection: "column"
-    },
-    // Lead collection container
-    leadCollectionContainer: {
-      display: "flex",
-      flexDirection: "column",
-      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
-    },
-    // Lead question container
-    leadQuestionContainer: {
-      display: "flex",
-      flexDirection: "column",
-      gap: e.isMobile ? e.spacingScale.lg : e.spacingScale.md
-    },
-    // Lead content container
-    leadContentContainer: {
-      borderRadius: e.borderRadius.md,
-      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
-      gap: e.spacingScale.md,
-      bgcolor: e.surfaceVariant,
-      display: "flex",
-      flexDirection: "column",
-      backdropFilter: "blur(4px)"
-    },
-    // CTA container
-    ctaContainer: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center"
-    },
-    // CTA content wrapper
-    ctaContentWrapper: {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      gap: e.spacingScale.lg
-    },
-    // Thanks for playing text
-    thanksText: {
-      color: e.textPrimary,
-      textAlign: "center",
-      fontFamily: e.fontFamilyPrimary,
-      fontSize: "1.25em",
-      fontStyle: "normal",
-      fontWeight: 500,
-      lineHeight: "120%",
-      letterSpacing: "0.15px"
-    },
-    // Buttons container
-    buttonsContainer: {
-      display: "flex",
-      flexDirection: e.isMobile ? "column" : "row",
-      gap: e.spacingScale.md
-    },
-    // Vote again button
-    voteAgainButton: {
-      display: "flex",
-      py: e.spacingScale.xs,
-      px: "16px",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      gap: "8px",
-      borderRadius: e.borderRadius.xl,
-      border: e.borderSize + " solid " + e.primaryColor,
-      bgcolor: e.buttonBgColor,
-      "&:hover": {
-        bgcolor: e.onSurfaceColor,
-        borderColor: e.primaryColor
-      },
-      fontSize: "0.8125em"
-    },
-    // Play again button content
-    playAgainButtonContent: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      gap: "8px",
-      alignSelf: "stretch"
-    },
-    // Play again icon
-    playAgainIcon: {
-      display: "flex",
-      width: "16px",
-      height: "16px",
-      justifyContent: "flex-end",
-      alignItems: "center",
-      color: e.textPrimary
-    },
-    // Play again text
-    playAgainText: {
-      color: e.textPrimary,
-      textAlign: "center",
-      fontFamily: e.fontFamilyPrimary,
-      fontSize: "0.8125em",
-      fontStyle: "normal",
-      fontWeight: 500,
-      lineHeight: "22px",
-      letterSpacing: "0.46px",
-      textTransform: "uppercase"
-    },
-    // Presented by container
-    presentedByContainer: {
-      display: "flex",
-      flexDirection: e.isExtraSmall ? "column-reverse" : "row",
-      alignItems: "center",
-      px: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
-      gap: e.spacingScale.sm
-    },
-    // Image container (left position)
-    imageContainerLeft: {
-      display: e.isMobile ? "none" : "block",
-      flex: "0.3",
-      overflow: "hidden",
-      height: "auto",
-      position: "relative",
-      minHeight: "auto",
-      backgroundImage: `url(${e.finalImage})`,
-      backgroundSize: "cover",
-      backgroundPosition: "center center",
-      backgroundRepeat: "no-repeat",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    // Image container (right position)
-    imageContainerRight: {
-      display: e.isMobile ? "none" : "block",
-      flex: "0.3",
-      overflow: "hidden",
-      height: "auto",
-      position: "relative",
-      minHeight: "auto",
-      backgroundImage: `url(${e.finalImage})`,
-      backgroundSize: "cover",
-      backgroundPosition: "center center",
-      backgroundRepeat: "no-repeat",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    // Desktop headline container
-    desktopHeadlineContainer: {
-      display: e.isMobile ? "none" : "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      gap: e.spacingScale["2xl"],
-      textAlign: "center"
-    },
-    // Mobile headline with image background
-    mobileHeadlineWithImage: {
-      display: e.isMobile ? "flex" : "none",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      gap: "10px",
-      backgroundImage: `url(${e.finalImage})`,
-      backgroundSize: "cover",
-      backgroundPosition: "center",
-      borderTopLeftRadius: "5px",
-      borderTopRightRadius: "5px",
-      position: "relative",
-      minHeight: "210px",
-      overflow: "hidden",
-      height: "auto",
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        background: e.imageBackgroundGradient,
-        borderTopLeftRadius: "5px",
-        borderTopRightRadius: "5px"
-      }
-    },
-    // Mobile headline content
-    mobileHeadlineContent: {
-      zIndex: 1,
-      height: "100%",
-      p: e.spacingScale.xl,
-      gap: e.spacingScale["2xl"],
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between"
-    },
-    // Mobile headline without image
-    mobileHeadlineWithoutImage: {
-      display: e.isMobile ? "flex" : "none",
-      flex: "0.5",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
-      gap: e.spacingScale["2xl"]
-    },
-    // Headline typography (mobile with image)
-    headlineTypographyMobileImage: {
-      fontWeight: 500,
-      lineHeight: "166%",
-      letterSpacing: "1px",
-      fontSize: "0.75em",
-      color: ((i = e.brandingColors) == null ? void 0 : i.secondaryColor) || e.darkTextColor,
-      opacity: "70%",
-      textTransform: "uppercase",
-      fontFamily: e.fontFamilySecondary,
-      textAlign: "center"
-    },
-    // Headline typography (mobile without image & desktop)
-    headlineTypography: {
-      fontWeight: 500,
-      lineHeight: "166%",
-      letterSpacing: "1px",
-      textTransform: "uppercase",
-      fontSize: "0.75em",
-      color: e.secondaryColor,
-      opacity: e.opacity,
-      fontFamily: e.fontFamilySecondary,
-      textAlign: e.isMobile ? "center" : "left"
-    },
-    // Headline typography (desktop centered)
-    headlineTypographyDesktop: {
-      fontWeight: 500,
-      lineHeight: "166%",
-      letterSpacing: "1px",
-      textTransform: "uppercase",
-      fontSize: "0.75em",
-      color: e.secondaryColor,
-      opacity: e.opacity,
-      fontFamily: e.fontFamilySecondary
-    },
-    // Content container
-    contentContainer: {
-      display: "flex",
-      flexDirection: "column",
-      gap: e.spacingScale["3xs"]
-    },
-    // Title typography (mobile with image)
-    titleTypographyMobileImage: {
-      fontWeight: 700,
-      lineHeight: "133%",
-      fontSize: "1.5em",
-      letterSpacing: "0.15px",
-      color: ((n = e.brandingColors) == null ? void 0 : n.contentColor) || e.darkTextColor,
-      fontFamily: e.fontFamilyPrimary,
-      textAlign: "center"
-    },
-    // Title typography (mobile without image & desktop responsive)
-    titleTypography: {
-      fontWeight: 700,
-      lineHeight: "133%",
-      letterSpacing: "0px",
-      fontSize: "1.5em",
-      color: e.textColor,
-      fontFamily: e.fontFamilyPrimary,
-      textAlign: e.isMobile ? "center" : "left"
-    },
-    // Title typography (desktop centered)
-    titleTypographyDesktop: {
-      fontWeight: 700,
-      lineHeight: "133%",
-      letterSpacing: "0px",
-      fontSize: "1.5em",
-      color: e.textColor,
-      fontFamily: e.fontFamilyPrimary
-    },
-    // Description typography (mobile with image)
-    descriptionTypographyMobileImage: {
-      fontWeight: 400,
-      lineHeight: "140%",
-      fontSize: "1.25em",
-      letterSpacing: "0.15px",
-      color: ((a = e.brandingColors) == null ? void 0 : a.secondaryColor) || e.darkTextColor,
-      opacity: "70%",
-      fontFamily: e.fontFamilyPrimary,
-      textAlign: "center"
-    },
-    // Description typography (mobile without image & desktop responsive)
-    descriptionTypography: {
-      fontWeight: 400,
-      lineHeight: "140%",
-      letterSpacing: "0.15px",
-      fontSize: "1.25em",
-      color: e.secondaryColor,
-      opacity: e.opacity,
-      fontFamily: e.fontFamilyPrimary,
-      textAlign: e.isMobile ? "center" : "left"
-    },
-    // Description typography (desktop centered)
-    descriptionTypographyDesktop: {
-      fontWeight: 400,
-      lineHeight: "140%",
-      letterSpacing: "0.15px",
-      fontSize: "1.25em",
-      color: e.secondaryColor,
-      opacity: e.opacity,
-      fontFamily: e.fontFamilyPrimary
-    },
-    // Alternative title section
-    alternativeTitleSection: {
-      gap: "8px",
-      display: "flex",
-      justifyContent: "center"
-    },
-    // Alternative title text
-    alternativeTitleText: {
-      fontFamily: e.fontFamilyPrimary,
-      lineHeight: "150%",
-      letterSpacing: "0.15px",
-      fontWeight: 500,
-      fontSize: "1.25em",
-      textAlign: "center",
-      color: e.textColor
-    },
-    // Safe area indicator for Standard variant (30% width containers)
-    imageSafeArea: {
-      position: "relative",
-      zIndex: 2,
-      width: "165px",
-      // Safe area: 165px
-      height: "100%"
-      // Visual indicator for development (remove in production)
-      // border: "1px dashed rgba(255,255,255,0.7)",
-    },
-    // Leaderboard styles
-    leaderboardContainer: {
-      display: "flex",
-      flexDirection: "column",
-      gap: e.spacingScale.md
-    },
-    leaderboardTitle: {
-      fontFamily: e.fontFamilyPrimary,
-      fontWeight: 700,
-      fontSize: "1.25em",
-      color: e.textColor,
-      textAlign: "center",
-      marginBottom: e.spacingScale.sm
-    },
-    leaderboardList: {
-      display: "flex",
-      flexDirection: "column",
-      gap: e.spacingScale.xs
-    },
-    leaderboardItem: {
-      display: "flex",
-      alignItems: "center",
-      gap: e.spacingScale.sm,
-      padding: e.spacingScale.sm,
-      borderRadius: e.borderRadius.md,
-      backgroundColor: `rgba(${t(e.surfaceVariant)}, 0.3)`,
-      border: `1px solid rgba(${t(e.primaryColor)}, 0.1)`
-    },
-    leaderboardPosition: {
-      minWidth: "32px",
-      display: "flex",
-      justifyContent: "center"
-    },
-    positionText: {
-      fontFamily: e.fontFamilyPrimary,
-      fontWeight: 600,
-      fontSize: "0.875em",
-      color: e.textColor
-    },
-    leaderboardAvatar: {
-      width: "32px",
-      height: "32px",
-      fontSize: "0.875em",
-      fontWeight: 600,
-      backgroundColor: e.primaryColor,
-      color: e.onPrimaryColor
-    },
-    leaderboardInfo: {
-      flex: 1,
-      minWidth: 0
-    },
-    leaderboardName: {
-      fontFamily: e.fontFamilyPrimary,
-      fontWeight: 500,
-      fontSize: "0.875em",
-      color: e.textColor,
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    },
-    leaderboardPoints: {
-      display: "flex",
-      alignItems: "center"
-    },
-    pointsText: {
-      fontFamily: e.fontFamilyPrimary,
-      fontWeight: 600,
-      fontSize: "0.875em",
-      color: e.textColor
-    },
-    // Table styles
-    tableContainer: {
-      overflowX: "auto",
-      borderRadius: e.borderRadius.md,
-      border: `1px solid rgba(${t(e.primaryColor)}, 0.2)`
-    },
-    table: {
-      backgroundColor: e.surfaceVariant,
-      "--TableCell-paddingX": "0.5rem",
-      "--TableCell-paddingY": "0.375rem",
-      fontSize: "1em",
-      cursor: "default",
-      "& > tbody > tr:hover": {
-        backgroundColor: "transparent"
-      },
-      "& > thead > tr > th": {
-        backgroundColor: e.surfaceVariant,
-        verticalAlign: "middle",
-        fontFamily: e.fontFamilyPrimary,
-        fontWeight: 600,
-        color: e.textPrimary
-      },
-      "& > tbody > tr > td": {
-        verticalAlign: "middle",
-        borderBottom: `1px solid rgba(${t(e.primaryColor)}, 0.1)`
-      },
-      "& > tbody > tr:last-child > td": {
-        borderBottom: "none"
-      }
-    },
-    headerCell: {
-      textAlign: "left",
-      padding: "0.375rem 0.5rem"
-    },
-    headerCellPosition: {
-      textAlign: "center",
-      padding: "0.375rem 0.5rem",
-      width: "10%"
-    },
-    headerCellName: {
-      textAlign: "left",
-      padding: "0.375rem 0.5rem",
-      width: "80%"
-    },
-    headerCellPoints: {
-      textAlign: "center",
-      padding: "0.375rem 0.5rem",
-      width: "10%"
-    },
-    tableCell: {
-      padding: "0.375rem 0.5rem"
-    },
-    tableCellPosition: {
-      padding: "0.375rem 0.5rem",
-      width: "10%",
-      textAlign: "center"
-    },
-    tableCellName: {
-      padding: "0.375rem 0.5rem",
-      width: "80%"
-    },
-    tableCellPoints: {
-      padding: "0.375rem 0.5rem",
-      width: "10%",
-      textAlign: "center"
-    },
-    userRow: {
-      backgroundColor: `rgba(${t(e.primaryColor)}, 0.1)`
-    },
-    nameCell: {
-      display: "flex",
-      alignItems: "center",
-      gap: e.spacingScale.xs
-    },
-    nameText: {
-      fontFamily: e.fontFamilyPrimary,
-      fontWeight: 500,
-      fontSize: "0.875em",
-      color: e.textColor,
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    },
-    avatarIcon: {
-      fontSize: "1em",
-      color: e.onPrimaryColor
-    },
-    // Pagination styles
-    paginationContainer: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: e.isExtraSmall ? "center" : "flex-end",
-      gap: e.spacingScale.sm
-    },
-    paginationButton: {
-      color: e.textColor,
-      "&:hover": {
-        backgroundColor: `rgba(${t(e.primaryColor)}, 0.1)`
-      },
-      "&:disabled": {
-        color: `rgba(${t(e.textColor)}, 0.3)`
-      }
-    },
-    paginationText: {
-      fontFamily: e.fontFamilyPrimary,
-      fontWeight: 500,
-      fontSize: "0.875em",
-      color: e.textColor,
-      textAlign: "center"
-    },
-    // Score state wrapper container
-    scoreStateWrapperContainer: {
-      display: "flex",
-      flexDirection: e.isMobile ? "column" : "row",
-      width: "100%"
-    }
-  };
-};
-export {
-  y as createStyles
-};

package/packages/event-game-play/src/components/Variants/Standard/ScoreState/EventGameStandardScoreState.js

@@ -1,117 +0,0 @@
-import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { Box as i } from "@mui/joy";
-import { useInternalTheme as B, isMobile as D, useColors as a, useFontFamily as x, useCornerRadius as M, useSpacingScale as E, useImageBackgroundGradient as k, useBorderSize as z } from "../../../../../../common/src/functions/theme.js";
-import { hexToRgb as U } from "../../../../../../common/src/functions/helpers.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import { WidgetTemplate as y } from "../../../../../../common/src/enums/enums.js";
-import q from "../../../../../../common/src/components/AdditionalCTA.js";
-import "react";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import V from "../../../../../../common/src/components/Skeletons/Standard/StandardSkeleton.js";
-import { useImageVariant as w } from "../../../../../../common/src/hooks/useImageVariant.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import N from "../../../Shared/MainCard.js";
-import { createStyles as O } from "./EventGameStandardScoreState.styles.js";
-import W from "../../../Shared/AlertMessage.js";
-import $ from "../../../Shared/Summary/PredictionSummary.js";
-import { useTranslation as H } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const de = (e) => {
-  const f = B(), c = w(
-    {
-      images: e.eventGame.images,
-      imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
-    },
-    y.STANDARD
-  ), { t: s } = H(), g = null, n = D(), h = e.imagePosition || "left", S = e.eventGame.status === "OPEN", C = (I) => {
-    console.log(`Edit prediction for fixture at index: ${I}`);
-  }, p = a().textColor, b = x().secondary, d = x().primary, m = M(), o = E(), j = `rgba(${U(a().surfaceVariant)}, 0.5)`, P = k(
-    y.STANDARD
-  ), T = "60%", u = a().textSecondary, l = a().secondaryContainer, A = z().size, r = O({
-    finalImage: c,
-    spacingScale: o,
-    borderRadius: m,
-    fontFamilyPrimary: d,
-    fontFamilySecondary: b,
-    textColor: p,
-    surfaceVariant: j,
-    brandingColors: g,
-    isMobile: n,
-    imageBackgroundGradient: P,
-    darkTextColor: f.colorSchemes.dark.textColor,
-    opacity: T,
-    secondaryColor: u
-  }), v = {
-    display: "flex",
-    py: n ? o.xs : o.sm,
-    px: n ? o.sm : o.md,
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    gap: "8px",
-    borderRadius: m.xl,
-    border: A + " solid " + l,
-    bgcolor: l,
-    "&:hover": {
-      bgcolor: l,
-      opacity: 0.9
-    }
-  }, R = {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    gap: "8px"
-  }, F = {
-    color: u,
-    fontFamily: d,
-    fontSize: n ? "0.750em" : "0.8125em",
-    fontStyle: "normal",
-    fontWeight: 500,
-    lineHeight: "22px",
-    letterSpacing: "0.46px",
-    textTransform: "uppercase"
-  }, G = () => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    e.isUnauthorized ? /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
-      W,
-      {
-        variant: "error",
-        title: s("common.authentication.accessRequired"),
-        message: s("common.authentication.invalidOrMissingAuth")
-      }
-    ) }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(i, { sx: r.questionArea, children: /* @__PURE__ */ t.jsx(i, { sx: r.questionContainer, children: /* @__PURE__ */ t.jsx(i, { sx: r.questionContentContainer, children: S ? /* @__PURE__ */ t.jsx(
-      $,
-      {
-        fixtures: e.eventGame.fixtures,
-        prediction: e.prediction,
-        onEditPrediction: C,
-        onPredictionUpdate: e.onPredictionUpdate,
-        play: e.play,
-        view: "score",
-        onPlayResult: e.onPlayResult
-      }
-    ) : null }) }) }) }),
-    e.additionalCTA && /* @__PURE__ */ t.jsx(i, { sx: r.footerContainer, children: /* @__PURE__ */ t.jsx(
-      q,
-      {
-        additionalCTA: e.additionalCTA,
-        buttonStyle: v,
-        buttonContentStyle: R,
-        textStyle: F
-      }
-    ) })
-  ] });
-  return /* @__PURE__ */ t.jsx(N, { brandingBorderColor: null, children: /* @__PURE__ */ t.jsx(
-    V,
-    {
-      entity: { ...e.eventGame, labels: null },
-      headline: s("eventGame.headline"),
-      finalImage: c,
-      imagePosition: h,
-      rulesDisplay: e.rulesDisplay,
-      children: G()
-    }
-  ) });
-};
-export {
-  de as default
-};