fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC7

package/packages/match-quiz-play/src/components/Variants/Overlay/FinishedGame/MatchQuizOverlayFinishedGame.styles.js

@@ -1,710 +0,0 @@
-import "react";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import { hexToRgb as i } 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 b = (e) => {
-  var t, n, a, l, o;
-  return {
-    // Main container with background overlay
-    mainContainer: {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      gap: "40px",
-      p: e.spacingScale.xl,
-      boxShadow: "md",
-      border: (t = e.brandingColors) != null && t.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
-      overflow: "hidden",
-      backgroundImage: `url(${e.finalImage})`,
-      backgroundPosition: "center",
-      backgroundSize: "cover",
-      position: "relative",
-      borderRadius: e.borderRadius.md,
-      minHeight: "250px",
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        background: e.imageBackgroundGradient,
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: "inherit",
-        zIndex: 0
-      }
-    },
-    // Headline section
-    headlineSection: {
-      display: "flex",
-      justifyContent: "space-between",
-      flex: "1 0 0",
-      alignSelf: "stretch"
-    },
-    // Headline content
-    headlineContent: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      flex: "1 0 0",
-      gap: e.spacingScale.md
-    },
-    // Headline content inner
-    headlineContentInner: {
-      zIndex: 10
-    },
-    // Headline text
-    headlineText: {
-      fontWeight: 500,
-      lineHeight: "166%",
-      letterSpacing: "1px",
-      textAlign: e.isMobile ? "center" : "left",
-      color: e.secondaryColor,
-      opacity: "70%",
-      textTransform: "uppercase",
-      fontFamily: e.fontFamilySecondary,
-      fontSize: "0.75em"
-    },
-    // Content container
-    contentContainer: {
-      display: "flex",
-      flexDirection: "column",
-      gap: e.spacingScale["3xs"]
-    },
-    // Title text
-    titleText: {
-      fontWeight: 700,
-      lineHeight: "133%",
-      letterSpacing: "0px",
-      textAlign: e.isMobile ? "center" : "left",
-      fontSize: "1.5em",
-      color: e.darkTextColor,
-      fontFamily: e.fontFamilyPrimary
-    },
-    // Description text
-    descriptionText: {
-      fontWeight: 400,
-      lineHeight: "140%",
-      letterSpacing: "0.15px",
-      fontSize: "1.25em",
-      textAlign: e.isMobile ? "center" : "left",
-      color: e.secondaryColor,
-      opacity: "70%",
-      fontFamily: e.fontFamilyPrimary
-    },
-    // Main content section
-    mainContentSection: {
-      display: "flex",
-      flexDirection: "column",
-      gap: e.spacingScale.md
-    },
-    // Content container with backdrop
-    contentContainerWithBackdrop: {
-      borderRadius: e.borderRadius.md,
-      p: e.spacingScale.md,
-      display: "flex",
-      flexDirection: "column",
-      gap: e.spacingScale.md,
-      backdropFilter: "blur(4px)",
-      position: "relative",
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: e.bgcolor,
-        opacity: 0.5,
-        borderRadius: "inherit",
-        zIndex: 0
-      },
-      "& > *": {
-        position: "relative",
-        zIndex: 1
-      }
-    },
-    // Footer container
-    footerContainer: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "relative",
-      zIndex: 1
-    },
-    // Mobile footer container
-    mobileFooterContainer: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "relative",
-      zIndex: 1,
-      mt: e.spacingScale.md
-    },
-    // 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: ((n = e.brandingColors) == null ? void 0 : n.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
-    },
-    // Title typography (mobile with image)
-    titleTypographyMobileImage: {
-      fontWeight: 700,
-      lineHeight: "133%",
-      fontSize: "1.5em",
-      letterSpacing: "0.15px",
-      color: ((a = e.brandingColors) == null ? void 0 : a.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: ((l = e.brandingColors) == null ? void 0 : l.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(${i(e.surfaceVariant)}, 0.3)`,
-      border: `1px solid rgba(${i(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(${i(e.primaryColor)}, 0.2)`
-    },
-    table: {
-      backgroundColor: e.surfaceVariant,
-      "--TableCell-paddingX": "0.5rem",
-      "--TableCell-paddingY": "0.375rem",
-      cursor: "default",
-      fontSize: "1em",
-      "& > 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(${i(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(${i(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(${i(e.primaryColor)}, 0.1)`
-      },
-      "&:disabled": {
-        color: `rgba(${i(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%"
-    },
-    // Main container with prediction details
-    mainContainerWithPredictionDetails: {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      gap: "40px",
-      // p: props.spacingScale.xl,
-      boxShadow: "md",
-      border: (o = e.brandingColors) != null && o.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
-      overflow: "hidden",
-      backgroundImage: `url(${e.finalImage})`,
-      backgroundPosition: "center",
-      backgroundSize: "cover",
-      position: "relative",
-      borderRadius: e.borderRadius.md,
-      minHeight: "250px",
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        background: e.imageBackgroundGradient,
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: "inherit",
-        zIndex: 0
-      }
-    },
-    // Finished game wrapper content
-    finishedGameWrapperContent: {
-      position: "relative",
-      zIndex: 1
-    }
-  };
-};
-export {
-  b as createStyles
-};