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

package/packages/event-game-play/src/components/Variants/Overlay/FinishedGame/EventGameOverlayFinishedGame.styles.js

@@ -0,0 +1,712 @@
+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 g = (e) => ({
+  // Main container with background overlay
+  mainContainer: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    gap: "40px",
+    p: e.spacingScale.xl,
+    boxShadow: "md",
+    // border: props.brandingColors?.borderColor
+    //   ? `${props.borderSize} solid ${props.brandingColors.borderColor}`
+    //   : "none",
+    border: "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: props.brandingColors?.secondaryColor || props.darkTextColor,
+    color: 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: props.brandingColors?.contentColor || props.darkTextColor,
+    color: 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: props.brandingColors?.secondaryColor || props.darkTextColor,
+    color: 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",
+    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(${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%"
+  },
+  // Main container with prediction details
+  mainContainerWithPredictionDetails: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    gap: "40px",
+    boxShadow: "md",
+    border: "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 {
+  g as createStyles
+};