fansunited-frontend-components 0.0.31-RC4 → 0.0.31-RC5

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

@@ -0,0 +1,710 @@
+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
+};