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

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

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