@material-ui/core/styles#fade TypeScript Examples

useStyles = makeStyles((theme: Theme) => {
  return createStyles({
    inputRoot: ({ open }: SearchBarProps) => ({
      paddingLeft: theme.spacing(1),
      paddingRight: theme.spacing(1),
      borderRadius: open
        ? `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`
        : `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
      color: open
        ? theme.palette.getContrastText(theme.palette.common.white)
        : "inherit",
      backgroundColor: open
        ? theme.palette.common.white
        : fade(theme.palette.common.white, 0.15),
      "&:hover": {
        backgroundColor: open
          ? theme.palette.common.white
          : fade(theme.palette.common.white, 0.25)
      }
    }),
    inputInput: {
      padding: theme.spacing(1, 1, 1, 0)
    },
    clearIcon: {
      color: "inherit"
    }
  });
})

useStyles = makeStyles(theme => ({
    root: {
        width: 600,
        margin: 'auto',
        borderStyle: 'solid',
        borderWidth: 1,
        borderColor:
            theme.palette.type === 'light'
                ? lighten(fade(theme.palette.divider, 1), 0.88)
                : darken(fade(theme.palette.divider, 1), 0.68),
    },
    spacer: { height: 20 },
    invoices: { margin: '10px 0' },
}))

useStyles = makeStyles((theme) => ({
  address: {
    display: 'flex',
    alignItems: 'center',
    marginLeft: theme.spacing(),
    marginRight: theme.spacing(),
    width: '100%',
    overflow: 'auto'
  },
  missingAddress: {
    color: theme.palette.text.disabled
  },
  tooltipIcon: {
    ...theme.typography.body1,
    marginTop: 2,
    marginLeft: 2,
    '&:not(:hover)': {
      color: fade(theme.palette.text.hint, 0.75)
    }
  }
}))

useStyles = makeStyles((theme) => ({
  container: {
    minHeight: '20px',
    display: 'flex'
  },
  tooltipIcon: {
    ...theme.typography.body1,
    marginTop: 2,
    marginLeft: 2,
    '&:not(:hover)': {
      color: fade(theme.palette.text.hint, 0.75)
    }
  },
  value: {
    backgroundColor: '#f5dada',
    fontFamily: 'monospace',
    paddingLeft: theme.spacing(0.7),
    paddingRight: theme.spacing(0.7),
    borderRadius: '3px'
  },
  textContainer: {
    marginLeft: theme.spacing(0.5)
  }
}))

useStyles = makeStyles((theme) =>
  createStyles({
    listItem: {
      color: theme.palette.text.secondary,
      minHeight: 48,
    },
    listItemSelected: {
      "&&, &&:hover": {
        color: theme.palette.primary.main,
        backgroundColor: fade(
          theme.palette.primary.main,
          theme.palette.action.selectedOpacity
        ),
      },
    },
    listItemIcon: {},
    listItemText: {
      ...theme.typography.button,
      display: "block",
      color: "inherit",
    },

    dropdownIcon: { transition: theme.transitions.create("transform") },
    dropdownIconOpen: { transform: "rotate(180deg)" },

    childListItem: {
      minHeight: 40,
      paddingLeft: theme.spacing(4),
    },
    childListItemText: {
      ...theme.typography.overline,
      display: "block",
      color: "inherit",
    },
  })
)

useStyles = makeStyles((theme) =>
  createStyles({
    active: {
      borderColor: "currentColor",
      backgroundColor: fade(
        theme.palette.primary.main,
        theme.palette.action.hoverOpacity
      ),

      "&:hover": {
        color: theme.palette.primary.dark,
        backgroundColor: fade(
          theme.palette.primary.dark,
          theme.palette.action.hoverOpacity
        ),
        borderColor: "currentColor",
      },
    },
  })
)

useStyles = makeStyles((theme) =>
  createStyles({
    paper: {
      width: NAV_DRAWER_WIDTH,
      overflowX: "hidden",
      backgroundColor:
        theme.palette.background.elevation?.[1] ??
        theme.palette.background.paper,
    },

    logoRow: {
      height: APP_BAR_HEIGHT,
      marginTop: 0,
      marginBottom: theme.spacing(1),

      padding: theme.spacing(0, 2, 0, 0.5),
    },
    logo: { marginLeft: theme.spacing(1.5) },

    nav: { height: "100%" },
    list: {
      display: "flex",
      flexDirection: "column",
      flexWrap: "nowrap",

      height: "100%",
    },

    listItem: {
      color: theme.palette.text.secondary,
      minHeight: 48,
      transition: theme.transitions.create(["background-color", "color"]),
      "& $listItemIcon": { transition: theme.transitions.create("color") },
    },
    listItemSelected: {
      "&&, &&:hover": {
        color: theme.palette.primary.main,
        backgroundColor: fade(
          theme.palette.primary.main,
          theme.palette.action.selectedOpacity
        ),
      },
    },
    listItemIcon: {},
    listItemText: {
      ...theme.typography.button,
      display: "block",
      color: "inherit",
    },

    createTable: { marginTop: "auto" },
  })
)

useStyles = makeStyles((theme) =>
  createStyles({
    tabPanel: { padding: theme.spacing(4) },
    continueButton: {
      margin: theme.spacing(-2, 2.5, 4),
      display: "flex",
      marginLeft: "auto",
    },

    dropzone: {
      height: 137,
      borderRadius: theme.shape.borderRadius,
      border: `dashed 3px ${fade(theme.palette.text.primary, 0.42)}`,
      backgroundColor: fade(theme.palette.text.primary, 0.09),
      color: theme.palette.text.secondary,
      cursor: "pointer",

      "&:focus": {
        backgroundColor: fade(theme.palette.primary.main, 0.09),
        borderColor: theme.palette.primary.main,
        color: theme.palette.primary.main,
        outline: "none",
      },
    },
    error: {
      "$dropzone&": {
        backgroundColor: fade(theme.palette.error.main, 0.09),
        borderColor: theme.palette.error.main,
        color: theme.palette.error.main,
      },
    },
    dropzoneError: { margin: theme.spacing(0.5, 1.5) },

    pasteField: {
      ...theme.typography.body2,
      fontFamily: theme.typography.fontFamilyMono,
    },
    pasteInput: {
      whiteSpace: "nowrap",
      overflow: "auto",
    },
  })
)

useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      width: "100%",
      margin: 0,
      padding: theme.spacing(0, 1.5),
      minHeight: TABLE_HEADER_HEIGHT,

      overflowX: "auto",
      whiteSpace: "nowrap",

      userSelect: "none",

      [theme.breakpoints.down("sm")]: {
        width: "100%",
        paddingRight: theme.spacing(1),
      },
    },

    addRowIcon: { fontSize: "26px !important" },

    spacer: { minWidth: theme.spacing(8) },

    dropdown: {
      minWidth: 120,
      margin: theme.spacing(0, 0, 0, -1),
    },
    inputBaseRoot: {
      borderRadius: theme.shape.borderRadius,
      backgroundColor:
        theme.palette.type === "dark"
          ? fade(theme.palette.text.primary, 0.06)
          : undefined,
    },
    select: {
      paddingTop: "6px !important",
      paddingBottom: "7px !important",
    },
  })
)

useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      width: "100%",
      height: 44,
      border: `1px solid ${theme.palette.divider}`,
      backgroundColor: theme.palette.background.default,

      padding: theme.spacing(0, 1, 0, 1.5),

      color: theme.palette.text.secondary,
      transition: theme.transitions.create("color", {
        duration: theme.transitions.duration.short,
      }),
      "&:hover": { color: theme.palette.text.primary },

      "& svg": { display: "block" },
    },

    active: {
      backgroundColor: fade(
        theme.palette.primary.main,
        theme.palette.action.activatedOpacity
      ),
      color: theme.palette.primary.main,
      borderColor: fade(
        theme.palette.primary.main,
        theme.palette.action.disabledOpacity
      ),

      "&:hover": { color: theme.palette.primary.dark },
    },

    columnNameContainer: {
      flexShrink: 1,
      overflow: "hidden",
    },
    columnName: {
      lineHeight: "44px",
      display: "block",

      userSelect: "none",

      marginLeft: theme.spacing(0.5),
    },

    secondaryItem: { marginLeft: theme.spacing(1) },
  })
)

useStyles = makeStyles((theme: Theme) =>
  createStyles({
    notesPanel: {
      position: "relative",
      display: "flex",
      flexDirection: "column",
      height: "100%",
      width: "100%",
      backgroundColor: theme.palette.background.default,
    },
    topPanel: {
      padding: theme.spacing(0, 1),
      borderRadius: 0,
      backgroundColor: theme.palette.background.paper,
    },
    row: {
      display: "flex",
      alignItems: "center",
    },
    sectionName: {
      marginLeft: theme.spacing(1),
    },
    search: {
      position: "relative",
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      "&:hover": {
        backgroundColor: fade(theme.palette.common.white, 0.25),
      },
      marginRight: 0, // theme.spacing(2),
      marginLeft: 0,
      width: "100%",
      [theme.breakpoints.up("sm")]: {
        // marginLeft: theme.spacing(3),
        // width: "auto"
      },
    },
    searchIcon: {
      width: theme.spacing(7),
      height: "100%",
      position: "absolute",
      pointerEvents: "none",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
    },
    inputRoot: {
      color: "inherit",
      border: "1px solid #bbb",
      borderRadius: "4px",
      width: "100%",
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 7),
      transition: theme.transitions.create("width"),
      width: "100%",
      [theme.breakpoints.up("md")]: {
        // width: 200
      },
    },
    notesList: {
      position: "relative",
      flex: "1",
      overflowY: "auto",
      paddingBottom: theme.spacing(12),
    },
    loading: {
      position: "absolute",
      top: "40%",
      left: "50%",
      transform: "translateX(-50%)",
    },
    sortSelected: {
      color: theme.palette.primary.main,
      "& svg": {
        color: theme.palette.primary.main,
      },
    },
  })
)

EnterTemplate = (props: {
  title: React.ReactNode;
  renderContent: (submitButton: React.ReactNode) => React.ReactNode;
  submitTitle?: React.ReactNode;
  submitDisabled?: boolean;
  isSubmitting?: boolean;
  onSubmit: () => void;
  footer?: {
    text: string;
    actionText: string;
    linkTo: React.ComponentProps<typeof Link>['to'];
  };
  layout?: Props['type'];
}) => {
  const classes = useStyles();
  const theme = useTheme();
  const bubbleColor = fade(theme.palette.primary.main, 0.15);
  return (
    <div className={classes.page}>
      <Container maxWidth='md' className={classes.enterTemplate}>
        <AnimBubble color={bubbleColor} delay='0ms' duration='400ms' size={props.layout === 'signup' ? 350 : (props.layout === 'login' ? 100 : 400)} x={props.layout === 'signup' ? 420 : (props.layout === 'login' ? 50 : 100)} y={props.layout === 'signup' ? 70 : (props.layout === 'login' ? 210 : 0)} />
        <AnimBubble color={bubbleColor} delay='20ms' duration='200ms' size={props.layout === 'signup' ? 100 : (props.layout === 'login' ? 300 : 200)} x={props.layout === 'signup' ? 800 : (props.layout === 'login' ? 400 : 650)} y={props.layout === 'signup' ? 130 : (props.layout === 'login' ? 50 : 250)} />
        <AnimBubble color={bubbleColor} delay='40ms' duration='300ms' size={props.layout === 'signup' ? 150 : (props.layout === 'login' ? 500 : 100)} x={props.layout === 'signup' ? 520 : (props.layout === 'login' ? -200 : 100)} y={props.layout === 'signup' ? 470 : (props.layout === 'login' ? 700 : 500)} />
        <AnimBubble color={bubbleColor} delay='100ms' duration='500ms' size={props.layout === 'signup' ? 300 : (props.layout === 'login' ? 150 : 700)} x={props.layout === 'signup' ? 900 : (props.layout === 'login' ? 350 : 800)} y={props.layout === 'signup' ? 700 : (props.layout === 'login' ? 500 : 950)} />
        <AnimBubble color={bubbleColor} delay='100ms' duration='500ms' size={props.layout === 'signup' ? 500 : (props.layout === 'login' ? 300 : 400)} x={props.layout === 'signup' ? 1300 : (props.layout === 'login' ? 900 : 1100)} y={props.layout === 'signup' ? 450 : (props.layout === 'login' ? 700 : 150)} />
        <div className={classes.paperContainerContainer}>
          <div className={classNames(
            classes.paperContainer,
            props.layout === 'login' && classes.paperContainerRight,
            (props.layout === 'invitation' || props.layout === 'coupon') && classes.paperContainerCenter,
          )}>
            {/* <CollapseV5 in={props.layout === 'login'} orientation='horizontal'>
              <Paper className={classes.paper}>
                sdfsdfasdffasd
              </Paper>
            </CollapseV5> */}
            <Paper className={classes.paper}>
              <Typography component='h1' variant='h4' color='textPrimary' className={classes.welcomeBack}>
                {props.title}
              </Typography>
              {props.renderContent(!props.submitTitle ? null : (
                <SubmitButton
                  className={classes.submitButton}
                  color='primary'
                  fullWidth
                  size='large'
                  variant='contained'
                  disableElevation
                  isSubmitting={props.isSubmitting}
                  disabled={props.submitDisabled}
                  onClick={props.onSubmit}
                >{props.submitTitle}</SubmitButton>
              ))}
              {props.footer && (
                <div>
                  <Typography component='span' variant='caption' color='textPrimary'>
                    {props.footer.text}&nbsp;
                  </Typography>
                  <Link to={props.footer.linkTo} className={classes.signUpHere}>
                    <Typography component='span' variant='caption' color='primary'>
                      {props.footer.actionText}
                    </Typography>
                  </Link>
                </div>
              )}
            </Paper>
            {/* <CollapseV5 in={props.layout === 'signup'} orientation='horizontal'>
              <Paper className={classes.paper}>
                sdfsdfasdffasd
              </Paper>
            </CollapseV5> */}
          </div>
        </div>
      </Container>
    </div>
  );
}

useStyles = makeStyles((theme) => ({
  ui: {
    display: 'flex',
    justifyContent: 'center',
    padding: theme.spacing(3),
    paddingLeft: 240 + theme.spacing(3),
    transition: 'padding-left .1s',
    backgroundColor: theme.palette.background.paper,
    '&.open': {
      paddingLeft: 600 + theme.spacing(3),
      [theme.breakpoints.down('md')]: {
        paddingLeft: 240 + theme.spacing(3)
      }
    },
    '& .MuiPaper-root, .MuiOutlinedInput-notchedOutline': {
      borderRadius: theme.spacing(1.5)
    },
    '& > .MuiPaper-root': {
      width: 480,
      maxWidth: '100%',
      padding: theme.spacing(2)
    }
  },
  sidebar: {
    position: 'fixed',
    zIndex: 1,
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'column',
    top: 0,
    width: 240,
    height: '100vh',
    padding: theme.spacing(3),
    backgroundColor: substrateGray[50],
    borderRight: `1px solid ${fade(theme.palette.divider, 0.5)}`,
    transition: 'width .1s, padding-right .1s',
    '&.open': {
      width: 600,
      paddingRight: 360 + theme.spacing(3)
    }
  }
}))

useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      backgroundBlendMode: "normal, overlay, normal, normal",
      // backgroundImage: `
      //   linear-gradient(to bottom, rgba(255,255,255,0), #fff),
      //   linear-gradient(155deg, #303030 -4%, ${theme.palette.primary.main} 92%),
      //   url('${bgPattern}'),
      //   linear-gradient(161deg, #ecf4ff -31%, #fff4f4 160%)
      // `,
      backgroundImage: `
        linear-gradient(to bottom, ${fade(
          theme.palette.background.default,
          0
        )}, ${theme.palette.background.default} 75%),
        linear-gradient(155deg, ${theme.palette.primary.main} 10%, ${
        theme.palette.secondary.main
      } 90%),
        url('${bgPattern}'),
        linear-gradient(161deg, ${fade(
          theme.palette.background.default,
          0.95
        )} -31%, ${fade(theme.palette.background.default, 0.98)} 160%)
      `,

      display: "grid",
      placeItems: "center",
      padding: theme.spacing(1),

      cursor: "default",
    },

    paper: {
      position: "relative",
      overflow: "hidden",

      maxWidth: 400,
      width: "100%",
      padding: theme.spacing(4),
      backgroundColor:
        theme.palette.background.elevation?.[8] ||
        theme.palette.background.paper,

      "--spacing-contents": theme.spacing(4) + "px",
      "& > * + *": { marginTop: "var(--spacing-contents)" },

      textAlign: "center",
    },

    wordmark: {
      display: "block",

      color: theme.palette.primary.main,
      letterSpacing: 0,
      fontVariantLigatures: "common-ligatures",
    },

    projectName: {
      display: "block",
      marginTop: theme.spacing(1),

      color: theme.palette.text.disabled,
    },

    progress: {
      position: "absolute",
      left: 0,
      right: 0,
      top: 0,
      marginTop: 0,
    },
  })
)

QuickActionArea = (props: {
  droppableId: string;
  isDragging: boolean;
  feedback?: FeedbackInstance | null;
  enabled?: boolean;
  onClick?: (droppableId: string) => Promise<any>;
  color?: string;
  title?: string;
}) => {
  const { t } = useTranslation('app');
  const theme = useTheme();
  const classes = useStyles();
  const [autoDragging, setAutoDragging] = useState<boolean>(false);
  return (
    <RenderControl freezeInitialRender={props.isDragging}>
      <HoverArea>
        {(hoverAreaProps, isHovering, isHoverDown) => (
          <Droppable
            droppableId={props.droppableId}
            ignoreContainerClipping
            isDropDisabled={!props.enabled || (!isHovering && !autoDragging)}
          >
            {(provided, snapshot) => (
              <CardActionArea
                {...hoverAreaProps}
                ref={provided.innerRef}
                {...provided.droppableProps}
                disabled={!props.enabled}
                className={classNames(
                  classes.postAction,
                  !props.enabled && classes.postActionDisabled,
                )}
                style={!props.enabled ? {
                  color: theme.palette.text.disabled,
                } : {
                  color: props.color,
                  borderColor: props.color || fade(theme.palette.common.black, 0.54),
                  background: !snapshot.isDraggingOver ? undefined : fade(props.color || theme.palette.common.black, 0.1),
                }}
                onClick={async e => {
                  if (!props.enabled || !props.onClick) return;
                  setAutoDragging(true);
                  try {
                    await props.onClick(props.droppableId);
                  } finally {
                    setAutoDragging(false);
                  }
                }}
              >
                {provided.placeholder && (<div style={{ display: 'none' }}>{provided.placeholder}</div>)}
                {props.title && (
                  <Typography>{t(props.title as any)}</Typography>
                )}
              </CardActionArea>
            )}
          </Droppable>
        )}
      </HoverArea>
    </RenderControl>
  );
}

render() {

    var content = this.props.content;
    if (this.props.svg) {
      content = (
        <svg
          viewBox={this.props.svg.viewBox}
          className={this.props.classes.svg}
          preserveAspectRatio={this.props.svg.flexible ? 'none' : undefined}
        >
          <path
            style={{
              fill: this.props.svg.fill || fade(this.props.theme.palette.primary.main, 0.05)
            }}
            d={this.props.svg.d}
          />
        </svg>
      );
    }

    return (
      <div className={this.props.classes.backgroundContainer} style={{
        backgroundColor: this.props.backgroundColor,
      }}>
        {content && (
          <div className={classNames(
            this.props.classes.background,
            this.props.align === 'top' ? this.props.classes.backgroundTop : this.props.classes.backgroundCenter,
          )} style={{
            top: this.props.offsetY === undefined
              ? (this.props.align === 'top' ? 0 : '50%')
              : (this.props.align === 'top' ? this.props.offsetY : `calc(50% + ${this.props.offsetY})`),
            left: this.props.offsetX === undefined ? '50%' : `calc(50% + ${this.props.offsetX})`,
            width: this.props.width || '100%',
            height: this.props.height || '100%',
            minHeight: this.props.minHeight,
          }}>
            {content}
          </div>
        )}
        {this.props.children}
      </div>
    );
  }

useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      "--spacing-modal": theme.spacing(3) + "px",
      "--spacing-modal-contents": theme.spacing(3) + "px",
      "--spacing-card": "var(--spacing-modal-contents)",

      [theme.breakpoints.down("sm")]: {
        "--spacing-modal": theme.spacing(2) + "px",
      },
    },

    paper: {
      userSelect: "none",
      overflowX: "hidden",

      padding: "var(--spacing-modal)",
      paddingBottom: "var(--spacing-modal-contents)",
    },

    closeButton: {
      alignSelf: "flex-end",
      margin:
        "calc(var(--spacing-modal) * -1) calc(var(--spacing-modal) * -1) 0 0",
    },

    titleRow: { paddingBottom: "var(--spacing-modal)" },
    titleContainer: { padding: 0 },
    title: {
      ...theme.typography.h5,
      [theme.breakpoints.down("sm")]: theme.typography.h6,
    },

    stepper: {
      padding: 0,
      background: "none",
      marginRight: theme.spacing(-10 / 8),

      marginBottom: theme.spacing(-0.5),
      [theme.breakpoints.down("sm")]: { marginBottom: theme.spacing(-0.75) },
    },
    stepperButton: { padding: theme.spacing(0.5) },

    stepperDot: {
      margin: theme.spacing(0, 0.5),
      backgroundColor: theme.palette.primary.main,
    },
    stepperDotActive: {
      margin: theme.spacing(0, 0.5),
      "& ~ $stepperDot": { backgroundColor: theme.palette.action.disabled },
    },

    content: {
      padding: "0 var(--spacing-modal)",
      margin: "0 calc(var(--spacing-modal) * -1)",

      ...theme.typography.body1,

      // https://codepen.io/evank/pen/wWbRNO
      background: `
        linear-gradient(
          var(--bg-paper) 50%,
          ${fade(theme.palette.background.paper, 0)}
        ),
        linear-gradient(
          ${fade(theme.palette.background.paper, 0)},
          var(--bg-paper) 50%
        ) 0 100%,
        linear-gradient(
          to top, ${theme.palette.divider} 1px,
          ${fade(theme.palette.divider, 0)}
        ),
        linear-gradient(to top,
          ${theme.palette.divider} 1px,
          ${fade(theme.palette.divider, 0)}
        ) 0 calc(100% - 0.5px)`,
      backgroundRepeat: "no-repeat",
      backgroundColor: "var(--bg-paper)",
      backgroundSize: "100% 2px, 100% 3px, 100% 1px, 100% 1px",
      backgroundAttachment: "local, local, scroll, scroll",

      "&:last-child": {
        marginBottom: "calc(var(--spacing-modal-contents) * -1)",
        paddingBottom: "var(--spacing-modal-contents)",
      },

      "& > * + *": { marginTop: "var(--spacing-modal-contents)" },
    },

    actions: {
      paddingTop: "var(--spacing-modal-contents)",
      "& button": { minWidth: 100 },
    },
  })
)

SelectableQuickActionPostList = React.memo((props: {
  server: Server;
  title?: {
    name: string;
    helpDescription?: string;
  };
  enabled?: boolean;
  selectedPostIds?: string[];
  onClick?: (postId: string) => void;
  PostListProps?: Partial<React.ComponentProps<typeof PostList>>;
  showSampleItem?: string;
  disabledDuringTour?: boolean;
  FirstTimeNoticeProps?: React.ComponentPropsWithoutRef<typeof FirstTimeNotice>;
}) => {
  const { t } = useTranslation('app');
  const classes = useStyles();
  const theme = useTheme();
  const { enqueueSnackbar } = useSnackbar();
  const noticeRef = useRef<FirstTimeNoticeHandle>(null);

  var content = (
    <PostList
      key={props.server.getProjectId()}
      server={props.server}
      layout='similar-merge-action'
      PanelPostProps={{
        overrideTitle: !props.title ? undefined : (
          <FilterControlTitle name={props.title.name} className={classes.feedbackTitle} help={{
            description: props.title.helpDescription,
          }} />
        ),
        renderPost: (idea, ideaIndex) => {
          const title = truncateWithElipsis(30, idea.title);
          return (
            <HoverArea>
              {(hoverAreaProps, isHovering, isHoverDown) => {
                const isLinked = props.selectedPostIds?.includes(idea.ideaId);
                const color = isLinked
                  ? theme.palette.primary.main
                  : theme.palette.common.black;
                return (
                  <CardActionArea
                    {...hoverAreaProps}
                    disabled={!props.enabled}
                    className={classNames(
                      classes.postAction,
                      !props.enabled && classes.postActionDisabled,
                    )}
                    style={!props.enabled ? {
                      color: theme.palette.text.disabled,
                    } : {
                      color: color,
                      borderColor: color || fade(theme.palette.common.black, 0.54),
                    }}
                    onClick={async e => {
                      if (!props.enabled || !props.onClick) return;

                      if (props.disabledDuringTour) {
                        enqueueSnackbar('Disabled during tutorial', { variant: 'warning', preventDuplicate: true });
                        return;
                      }
                      if (!!noticeRef.current && ! await noticeRef.current.invoke()) return;
                      props.onClick(idea.ideaId);
                    }}
                  >
                    {title && (
                      <Typography>{t(title as any)}</Typography>
                    )}
                  </CardActionArea>
                );
              }}
            </HoverArea>
          );
        },
        renderEmpty: !props.showSampleItem ? undefined : () => (
          <QuickActionArea
            key={`sample-item-${props.showSampleItem}`}
            isDragging={false}
            droppableId='disabled-for-dropping'
            enabled={false}
            title={props.showSampleItem}
          />
        ),
      }}
      hideIfEmpty={!props.showSampleItem}
      {...props.PostListProps}
    />
  );

  if (props.FirstTimeNoticeProps) {
    content = (
      <>
        {content}
        <Provider store={ServerAdmin.get().getStore()}>
          <FirstTimeNotice
            {...props.FirstTimeNoticeProps}
            ref={noticeRef}
          />
        </Provider>
      </>
    );
  }

  return content;
}, customReactMemoEquals({
  nested: new Set(['PostListProps', 'FirstTimeNoticeProps', 'title']),
}))

useStyles = makeStyles((theme: Theme) => createStyles({
  pageContainer: {
    display: 'flex',
    '& h2': {
      margin: theme.spacing(12, 0, 2),
    },
    '& h3': {
      margin: theme.spacing(8, 0, 1),
    },
    '& h4': {
      margin: theme.spacing(4, 0, 0),
    },
    '& p': {
      marginTop: 7,
    },
  },
  appBarSpacer: theme.mixins.toolbar,
  heroBrandList: {
    display: 'flex',
    justifyContent: 'flex-end',
    flexWrap: 'wrap',
    margin: theme.spacing(2, 0),
  },
  heroBrandListBreak: {
    width: '100%',
  },
  heroBrandImg: {
    maxWidth: 14,
    width: 14,
    maxHeight: 14,
    margin: theme.spacing(1),
  },
  stickyOuterContainer: {
    marginTop: theme.spacing(20),
    minHeight: '100%',
  },
  stickyContainerLeft: {
    marginRight: theme.spacing(6),
  },
  stickyContainerRight: {
    marginLeft: theme.spacing(6),
  },
  stickyContainer: {
    position: 'sticky',
    top: 0,
    maxHeight: vh(100),
    display: 'flex',
    flexDirection: 'column',
  },
  stickyScroll: {
    display: 'flex',
    flexDirection: 'column',
    ...contentScrollApplyStyles({ theme, orientation: Orientation.Vertical }),
  },
  competitorSelectReset: {
    alignSelf: 'flex-end',
    margin: theme.spacing(3),
  },
  competitorSelectHeading: {
    margin: theme.spacing(2, 1, 2, 6),
  },
  competitorSelectRow: {
    display: 'flex',
    alignItems: 'center',
  },
  pageContent: {
    minWidth: 0,
    marginBottom: theme.spacing(6),
  },
  emphasize: {
    fontWeight: 'bolder',
  },
  tableHeading: {
    verticalAlign: 'bottom',
    textAlign: 'center',
    [theme.breakpoints.down(dontHoverBelow)]: {
      verticalAlign: 'baseline', // Align the filter icons
    },
  },
  tableDivider: {
    verticalAlign: 'bottom',
    padding: theme.spacing(0, 1),
    '& div': {
      height: theme.spacing(5),
      borderLeft: `1px solid ${
        // From TableCell.js root
        theme.palette.type === 'light'
          ? lighten(fade(theme.palette.divider, 1), 0.88)
          : darken(fade(theme.palette.divider, 1), 0.68)
        }`,
    }
  },
  tableGrouping: {
    textAlign: 'center',
    color: theme.palette.text.hint,
  },
  check: {
    margin: 'auto',
    display: 'block',
    color: theme.palette.primary.main,
  },
  table: {
    maxWidth: '100%',
    width: 'min-content',
    ...contentScrollApplyStyles({ theme, orientation: Orientation.Horizontal }),
  },
  hiddenPlatform: {
    filter: 'grayscale(100%)',
    opacity: 0.4,
  },
  sliderValueHorizontal: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'baseline',
  },
  sliderFloatingInfo: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    textAlign: 'center',
    position: 'relative',
    transition: theme.transitions.create(['bottom'], {
      duration: theme.transitions.duration.shortest,
      easing: theme.transitions.easing.easeOut,
    }),
    transform: 'translateY(50%)',
    flex: '1',
    overflow: 'visible',
  },
  sliderOuterContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    height: 400,
    width: 250,
  },
  sliderDisclaimer: {
    marginTop: theme.spacing(1),
    display: 'flex',
    alignItems: 'baseline',
  },
  sliderContainer: {
    flex: '1',
    height: '100%',
    width: '100%',
    position: 'relative',
    display: 'flex',
    alignItems: 'flex-end',
    justifyContent: 'center',
    padding: theme.spacing(4, 0),
  },
  filterButtonAlert: {
    width: 'max-content',
  },
  tocHeading: {
    alignSelf: 'flex-end',
    margin: theme.spacing(2, 3, 2, 2),
  },
  tocIndicator: {
  },
  tocItem: {
    height: 'auto',
    minHeight: 40,
  },
  tocItemRead: {
    opacity: 0.4,
  },
  tocItemIcon: {
    margin: theme.spacing(0, 0, 0, 1),
  },
  tocItemWrapper: {
    alignItems: 'flex-end',
    flexDirection: 'row-reverse',
    justifyContent: 'flex-start',
  },
  brandListSelected: {
    '& $brandName': {
      fontWeight: 'bold',
    },
  },
  brandListSmall: {
    margin: theme.spacing(1, 0, 0),
    '& $brandCheckbox': {
      padding: theme.spacing(0.5),
      marginRight: theme.spacing(1),
    },
    '& $brandImg': {
      width: 11,
    },
    '& div': {
      fontSize: '0.8em',
    },
    '& svg': {
      fontSize: 16,
    },
  },
  brandListOther: {
    padding: theme.spacing(0.5, 0, 0, 6),
  },
  brandListContainer: {
    margin: theme.spacing(1, 0, 1, 2),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
  },
  transparentTransition: {
    opacity: 1,
    transition: theme.transitions.create('opacity'),
  },
  transparent: {
    opacity: '0!important',
    transition: theme.transitions.create('opacity'),
  },
  brandContainer: {
    display: 'inline-flex',
    alignItems: 'center',
  },
  brandImg: {
    width: 14,
    marginRight: theme.spacing(1),
  },
  brandCheckbox: {
    [theme.breakpoints.down(dontHoverBelow)]: {
      opacity: 0.3,
    },
  },
  brandName: {
    // Used as a ref, don't delete
  },
  platformOther: {
    textAlign: 'center',
    minHeight: 38,
  },
  pricingContainer: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    flexWrap: 'wrap',
  },
  platformOpenButton: {
    fontSize: '0.9em',
    color: theme.palette.text.hint,
  },
  pricingCell: {
    border: 'none',
  },
  pricingPriceCell: {
    display: 'flex',
    justifyContent: 'flex-end',
  },
  priceContainer: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'baseline',
  },
  designContainer: {
    width: '100%',
    maxWidth: 570,
    margin: 'auto',
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
    justifyContent: 'flex-end'
  },
  designBrandAndSwitcher: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
}))

useStyles = makeStyles((theme) =>
  createStyles({
    "@global": {
      ".firetable-firebaseui": {
        "& .firebaseui-container": {
          backgroundColor: "transparent",
          color: theme.palette.text.primary,
          fontFamily: theme.typography.fontFamily,
        },
        "& .firebaseui-text": {
          color: theme.palette.text.secondary,
          fontFamily: theme.typography.fontFamily,
        },
        "& .firebaseui-tos": {
          ...theme.typography.caption,
          color: theme.palette.text.disabled,
        },
        "& .firebaseui-country-selector": {
          color: theme.palette.text.primary,
        },
        "& .firebaseui-title": {
          ...theme.typography.h5,
          color: theme.palette.text.primary,
        },
        "& .firebaseui-subtitle": {
          ...theme.typography.h6,
          color: theme.palette.text.secondary,
        },
        "& .firebaseui-error": {
          ...theme.typography.caption,
          color: theme.palette.error.main,
        },

        "& .firebaseui-card-content, & .firebaseui-card-footer": { padding: 0 },
        "& .firebaseui-idp-list, & .firebaseui-tenant-list": { margin: 0 },
        "& .firebaseui-idp-list>.firebaseui-list-item, & .firebaseui-tenant-list>.firebaseui-list-item": {
          margin: 0,
        },
        "& .firebaseui-list-item + .firebaseui-list-item": {
          paddingTop: theme.spacing(2),
        },

        "& .mdl-button": {
          borderRadius: 24,
          ...theme.typography.button,
        },
        "& .mdl-button--raised": { boxShadow: "none" },
        "& .mdl-card": {
          boxShadow: "none",
          minHeight: 0,
        },
        "& .mdl-button--primary.mdl-button--primary": {
          color: theme.palette.primary.main,
        },
        "& .mdl-button--raised.mdl-button--colored": {
          backgroundColor: theme.palette.primary.main,
          color: theme.palette.primary.contrastText,

          "&:active, &:focus:not(:active), &:hover": {
            backgroundColor: theme.palette.primary.main,
          },
        },

        "& .firebaseui-idp-button, & .firebaseui-tenant-button": {
          maxWidth: "none",
          minHeight: 48,
        },
        "& .firebaseui-idp-text": {
          ...theme.typography.button,

          paddingLeft: theme.spacing(2),
          paddingRight: theme.spacing(2) + 18,
          marginLeft: -18,
          width: "100%",
          textAlign: "center",

          [theme.breakpoints.down("xs")]: {
            "&.firebaseui-idp-text-long": { display: "none" },
            "&.firebaseui-idp-text-short": { display: "table-cell" },
          },
        },

        "& .firebaseui-idp-google": {
          "& .firebaseui-idp-icon-wrapper::before": {
            content: "''",
            display: "block",
            position: "absolute",
            top: 2,
            left: 2,
            width: 48 - 4,
            height: 48 - 4,
            zIndex: 0,

            backgroundColor: "#fff",
            borderRadius: "50%",
          },
          "& .firebaseui-idp-icon-wrapper img": {
            position: "relative",
            left: -1,
          },

          "&>.firebaseui-idp-text": {
            color: "#fff",
          },
        },

        "& .firebaseui-card-header": { padding: 0 },
        "& .firebaseui-card-actions": { padding: 0 },

        "& .firebaseui-input, & .firebaseui-input-invalid": {
          ...theme.typography.body1,
          color: theme.palette.text.primary,
        },
        "& .firebaseui-textfield.mdl-textfield .firebaseui-input": {
          borderColor: theme.palette.divider,
        },
        "& .mdl-textfield.is-invalid .mdl-textfield__input": {
          borderColor: theme.palette.error.main,
        },
        "& .firebaseui-label": {
          ...theme.typography.subtitle2,
          color: theme.palette.text.secondary,
        },
        "& .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.is-focused .mdl-textfield__label": {
          color: theme.palette.text.primary,
        },
        "& .firebaseui-textfield.mdl-textfield .firebaseui-label:after": {
          backgroundColor: theme.palette.primary.main,
        },
        "& .mdl-textfield.is-invalid .mdl-textfield__label:after": {
          backgroundColor: theme.palette.error.main,
        },

        "& .mdl-progress>.bufferbar": {
          background: fade(theme.palette.primary.main, 0.33),
        },
        "& .mdl-progress>.progressbar": {
          backgroundColor: theme.palette.primary.main + " !important",
        },
      },
    },

    signInText: {
      display: "none",
      [theme.breakpoints.down("xs")]: { display: "block" },

      textAlign: "center",
      color: theme.palette.text.disabled,
      marginBottom: theme.spacing(-1),
    },

    skeleton: {
      marginBottom: "calc(var(--spacing-contents) * -1)",

      "& > *": {
        width: "100%",
        height: 48,
        borderRadius: 24,
      },

      "& > * + *": {
        marginTop: theme.spacing(2),
      },
    },
  })
)

defaultOverrides = (theme: Theme): ThemeOptions => ({
  transitions: {
    easing: { custom: "cubic-bezier(0.25, 0.1, 0.25, 1)" },
  },
  overrides: {
    MuiContainer: {
      root: {
        "@supports (padding: max(0px))": {
          paddingLeft: `max(${theme.spacing(2)}px, env(safe-area-inset-left))`,
          paddingRight: `max(${theme.spacing(
            2
          )}px, env(safe-area-inset-right))`,

          "@media (min-width: 640px)": {
            paddingLeft: `max(${theme.spacing(
              3
            )}px, env(safe-area-inset-left))`,
            paddingRight: `max(${theme.spacing(
              3
            )}px, env(safe-area-inset-right))`,
          },
        },
      },
    },
    MuiTooltip: {
      tooltip: theme.typography.caption,
    },
    MuiButton: {
      root: {
        minHeight: 32,
        padding: theme.spacing(0.25, 2),
      },
      sizeSmall: { minHeight: 30 },
      sizeLarge: { minHeight: 48 },

      contained: {
        borderRadius: 500,
        boxShadow: "none",
      },
      containedSizeLarge: { padding: theme.spacing(1, 4) },

      outlined: { padding: theme.spacing(3 / 8, 15 / 8) },
      outlinedPrimary: {
        // Same as outlined text field
        borderColor: fade(theme.palette.divider, 0.23),
      },
      outlinedSizeLarge: {
        padding: theme.spacing(1, 4),
        borderRadius: 500,

        "&$outlinedPrimary": { borderColor: theme.palette.primary.main },
      },

      iconSizeMedium: {
        "& > *:first-child": { fontSize: 24 },
      },
    },
    MuiSvgIcon: {
      fontSizeLarge: { fontSize: toRem(36) },
    },
    // Override text field label
    MuiFormLabel: {
      root: {
        ...theme.typography.subtitle2,
        lineHeight: 1,
      },
    },
    // Override radio & checkbox labels
    MuiFormControlLabel: {
      root: { display: "flex" },
      label: theme.typography.body1,
    },
    MuiChip: {
      root: {
        borderRadius: 4,
        maxWidth: "100%",

        height: "auto",
        minHeight: 32,

        color: theme.palette.text.secondary,
      },
      label: {
        ...theme.typography.caption,
        color: "inherit",
        padding: theme.spacing(1, 1.5),
        // whiteSpace: "normal",

        "$outlined &": {
          paddingTop: theme.spacing(0.875),
          paddingBottom: theme.spacing(0.875),
        },
      },
      sizeSmall: { minHeight: 24 },
      labelSmall: {
        padding: theme.spacing(0.5, 1.5),
      },

      outlined: {
        backgroundColor: theme.palette.action.selected,
        borderColor: theme.palette.action.selected,
      },
      outlinedPrimary: {
        backgroundColor: fade(
          theme.palette.primary.main,
          theme.palette.action.selectedOpacity
        ),
      },

      deleteIcon: { color: "inherit" },
    },
    MuiBadge: {
      badge: {
        ...theme.typography.caption,
        fontFeatureSettings: '"tnum"',
      },
    },
    MuiPaper: {
      root: {
        backgroundColor: "var(--bg-paper)",
        "--bg-paper": theme.palette.background.paper,
      },
      rounded: { borderRadius: 8 },
      // Dark theme paper elevation backgrounds
      ...(() => {
        const classes: Record<string, any> = {};
        for (let i = 0; i <= 24; i++) {
          if (theme.palette.background.elevation === undefined) continue;

          let closestElevation = i;
          for (let j = i; j > 0; j--) {
            if (theme.palette.background.elevation[j] !== undefined) {
              closestElevation = j;
              break;
            }
          }

          classes["elevation" + i] = {
            "&&": {
              "--bg-paper":
                theme.palette.background.elevation[closestElevation],
            },
          };
        }
        return classes;
      })(),
    },
    MuiSlider: {
      disabled: {},
      rail: {
        backgroundColor: "#e7e7e7",
        opacity: 1,
      },

      mark: {
        width: 4,
        height: 4,
        borderRadius: "50%",
        marginLeft: -2,
        marginTop: -1,
        backgroundColor: "#69696a",
        "$disabled &": { backgroundColor: "currentColor" },
      },
      markActive: {
        opacity: 1,
        backgroundColor: "currentColor",
        "$disabled &": { backgroundColor: "currentColor" },
      },

      thumb: {
        width: 16,
        height: 16,
        marginTop: -7,
        marginLeft: -8,

        "$disabled &": {
          width: 12,
          height: 12,
          marginTop: -5,
          marginLeft: -6,
        },
      },

      valueLabel: {
        top: -22,
        left: "calc(-25%)",
        ...theme.typography.caption,
        color: theme.palette.primary.main,

        "& > *": {
          width: "auto",
          minWidth: 24,
          height: 24,

          whiteSpace: "nowrap",
          borderRadius: 500,

          padding: theme.spacing(0, 1),
          paddingRight: theme.spacing(0.875),
        },
        "& *": { transform: "none" },
      },
      markLabel: theme.typography.caption,
    },
    MuiFormHelperText: {
      contained: {
        marginLeft: theme.spacing(1.5),
        marginRight: theme.spacing(1.5),
      },
    },
    MuiListItemIcon: {
      root: { minWidth: theme.spacing(40 / 8) },
    },

    MuiSnackbar: {
      root: {
        ..._omit(theme.typography.overline, ["color"]),

        "&& > *": {
          ..._mapValues(
            _omit(theme.typography.overline, ["color"]),
            () => "inherit"
          ),
          alignItems: "center",
        },
      },
    },
    MuiSnackbarContent: {
      root: {
        backgroundColor: antlerPalette.aGray[700],
        color: theme.palette.common.white,
        userSelect: "none",

        padding: theme.spacing(0.5, 2),
        boxShadow: "none",
      },

      message: {
        padding: theme.spacing(1, 2),
      },
    },
  },
  props: {
    MuiTypography: {
      variantMapping: {
        subtitle1: "div",
        subtitle2: "div",
      },
    },
    MuiRadio: { color: "primary" },
    MuiCheckbox: { color: "primary" },
    MuiButton: { color: "primary" },
    MuiTabs: {
      indicatorColor: "primary",
      textColor: "primary",
    },
    MuiCircularProgress: { size: 44 },
    // Select: show dropdown below text field to follow new Material spec
    MuiSelect: {
      MenuProps: {
        getContentAnchorEl: null,
        anchorOrigin: { vertical: "bottom", horizontal: "center" },
        transformOrigin: { vertical: "top", horizontal: "center" },
      },
    },
    MuiLink: {
      color: "primary",
      underline: "hover",
    },
    MuiChip: { deleteIcon: <ClearIcon /> },
    MuiTextField: { variant: "filled" },
    MuiDialog: {
      PaperProps: { elevation: 4 },
    },
  },
})