11650821356

Committed 03 Nov 2024 11:08AM UTC coverage: 31.259% (-0.008%) from 31.267%

Build # 11650821356

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9921 from ForumMagnum/giving-season-2024-banner

Giving season 2024 banner

Run Details

5045 of 42619 branches covered (11.84%)

Branch coverage included in aggregate %.

41 of 113 new or added lines in 11 files covered. (36.28%)

2 existing lines in 2 files now uncovered.

29711 of 68569 relevant lines covered (43.33%)

173.16 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

20.54

/packages/lesswrong/components/common/Header.tsx

import React, { useContext, useState, useCallback, useEffect, CSSProperties } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { Link } from '../../lib/reactRouterWrapper';
import Headroom from '../../lib/react-headroom'
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import TocIcon from '@material-ui/icons/Toc';
import { useCurrentUser } from '../common/withUser';
import { SidebarsContext } from './SidebarsWrapper';
import withErrorBoundary from '../common/withErrorBoundary';
import classNames from 'classnames';
import { AnalyticsContext, useTracking } from '../../lib/analyticsEvents';
import { PublicInstanceSetting, isEAForum } from '../../lib/instanceSettings';
import { useUnreadNotifications } from '../hooks/useUnreadNotifications';
import { isBookUI, isFriendlyUI } from '../../themes/forumTheme';
import { hasProminentLogoSetting } from '../../lib/publicSettings';
import { useLocation } from '../../lib/routeUtil';
import { useCurrentForumEvent } from '../hooks/useCurrentForumEvent';
import { makeCloudinaryImageUrl } from './CloudinaryImage2';
import { hasForumEvents } from '@/lib/betas';
import {
  GIVING_SEASON_MOBILE_WIDTH,
  useGivingSeasonEvents,
} from '../forumEvents/useGivingSeasonEvents';

export const forumHeaderTitleSetting = new PublicInstanceSetting<string>('forumSettings.headerTitle', "LESSWRONG", "warning")
export const forumShortTitleSetting = new PublicInstanceSetting<string>('forumSettings.shortForumTitle', "LW", "warning")
/** Height of top header. On Book UI sites, this is for desktop only */
export const HEADER_HEIGHT = isBookUI ? 64 : 66;
/** Height of top header on mobile. On Friendly UI sites, this is the same as the HEADER_HEIGHT */
export const MOBILE_HEADER_HEIGHT = isBookUI ? 56 : HEADER_HEIGHT;

const textColorOverrideStyles = ({
  theme,
  color,
  contrastColor,
  loginButtonBackgroundColor,
  loginButtonHoverBackgroundColor,
  loginButtonColor,
  signupButtonBackgroundColor,
  signupButtonHoverBackgroundColor,
  signupButtonColor,
}: {
  theme: ThemeType,
  color: string,
  contrastColor?: string,
  loginButtonBackgroundColor?: string,
  loginButtonHoverBackgroundColor?: string,
  loginButtonColor?: string,
  signupButtonBackgroundColor?: string,
  signupButtonHoverBackgroundColor?: string,
  signupButtonColor?: string,
}) => ({
  color,
  boxShadow: 'none',
  "& .Header-titleLink": {
    color,
  },
  "& .HeaderSubtitle-subtitle": {
    color,
  },
  "& .SearchBar-searchIcon": {
    color,
  },
  "& .ais-SearchBox-input": {
    color,
  },
  "& .ais-SearchBox-input::placeholder": {
    color,
  },
  "& .KarmaChangeNotifier-starIcon": {
    color,
  },
  "& .KarmaChangeNotifier-gainedPoints": {
    color,
  },
  "& .NotificationsMenuButton-badge": {
    color,
  },
  "& .NotificationsMenuButton-buttonClosed": {
    color,
  },
  "& .MessagesMenuButton-buttonClosed": {
    color,
  },
  "& .UsersMenu-arrowIcon": {
    color,
  },
  "& .EAButton-variantContained": {
    backgroundColor: signupButtonBackgroundColor ?? color,
    color: signupButtonColor ?? contrastColor,
    "&:hover": {
      backgroundColor: signupButtonHoverBackgroundColor ?? `color-mix(in oklab, ${signupButtonBackgroundColor ?? color} 90%, ${signupButtonColor ?? contrastColor})`,
    },
  },
  "& .EAButton-greyContained": {
    backgroundColor: loginButtonBackgroundColor ?? `color-mix(in oklab, ${loginButtonColor ?? color} 15%, ${contrastColor})`,
    color: loginButtonColor ?? color,
    "&:hover": {
      backgroundColor: loginButtonHoverBackgroundColor ?? `color-mix(in oklab, ${loginButtonColor ?? color} 10%, ${theme.palette.background.transparent}) !important`,
    },
  },
});

export const styles = (theme: ThemeType) => ({
  appBar: {
    boxShadow: theme.palette.boxShadow.appBar,
    color: theme.palette.header.text,
    backgroundColor: theme.palette.header.background,
    position: "static",
    width: "100%",
    display: "flex",
    zIndex: 1100,
    boxSizing: "border-box",
    flexShrink: 0,
    flexDirection: "column",
    ...(isFriendlyUI ? {
      maxWidth: "100vw",
      overflow: "hidden",
      padding: '1px 20px',
      [theme.breakpoints.down('sm')]: {
        padding: '1px 11px',
      },
      [theme.breakpoints.down('xs')]: {
        padding: '9px 11px',
      },
    } : {}),
  },
  appBarDarkBackground: {
    ...textColorOverrideStyles({
      theme,
      color: theme.palette.text.alwaysWhite,
      contrastColor: theme.palette.text.alwaysBlack,

      // Custom button styles for giving season 2024
      signupButtonBackgroundColor: theme.palette.givingSeason.electionFundBackground,
      signupButtonColor: theme.palette.text.alwaysWhite,
      loginButtonBackgroundColor: theme.palette.givingSeason.electionFundBackground,
      loginButtonColor: theme.palette.text.alwaysWhite,
      loginButtonHoverBackgroundColor: `color-mix(in oklab, ${theme.palette.givingSeason.electionFundBackground} 90%, ${theme.palette.text.alwaysWhite})`,
    }),
  },
  root: {
    // This height (including the breakpoint at xs/600px) is set by Headroom, and this wrapper (which surrounds
    // Headroom and top-pads the page) has to match.
    height: HEADER_HEIGHT,
    [theme.breakpoints.down('xs')]: {
      height: MOBILE_HEADER_HEIGHT,
    },
    "@media print": {
      display: "none"
    }
  },
  titleSubtitleContainer: {
    display: 'flex',
    alignItems: 'center'
  },
  title: {
    flex: 1,
    position: "relative",
    top: 3,
    paddingRight: theme.spacing.unit,
    color: theme.palette.text.secondary,
  },
  titleLink: {
    color: theme.palette.header.text,
    fontSize: 19,
    '&:hover, &:active': {
      textDecoration: 'none',
      opacity: 0.7,
    },
    display: 'flex',
    alignItems: 'center',
    fontWeight: isFriendlyUI ? 400 : undefined,
    height: isFriendlyUI ? undefined : '19px'
  },
  menuButton: {
    marginLeft: -theme.spacing.unit,
    marginRight: theme.spacing.unit,
  },
  siteLogo: {
    marginLeft:  -7,
    marginRight: 6,
    [theme.breakpoints.down('sm')]: {
      marginLeft: -12,
      marginRight: 3
    },
  },
  hideLgUp: {
    [theme.breakpoints.up('lg')]: {
      display:"none !important"
    }
  },
  hideMdDown: {
    [theme.breakpoints.down('md')]: {
      display:"none !important"
    }
  },
  hideSmDown: {
    [theme.breakpoints.down('sm')]: {
      display: "none !important",
    },
  },
  hideXsDown: {
    [theme.breakpoints.down('xs')]: {
      display: "none !important",
    },
  },
  hideMdUp: {
    [theme.breakpoints.up('md')]: {
      display: "none !important",
    },
  },
  rightHeaderItems: {
    marginRight: -theme.spacing.unit,
    marginLeft: "auto",
    display: "flex",
    alignItems: isFriendlyUI ? 'center' : undefined,
  },
  // Prevent rearranging of mobile header when search loads after SSR
  searchSSRStandin: {
    minWidth: 48
  },
  headroom: {
    // Styles for header scrolling, provided by react-headroom
    // https://github.com/KyleAMathews/react-headroom
    "& .headroom": {
      top: "unset",
      left: 0,
      right: 0,
      zIndex: 1300,
    },
    "& .headroom--unfixed": {
      position: "relative",
      transform: "translateY(0)",
    },
    "& .headroom--scrolled": {
      transition: "transform 200ms ease-in-out",
    },
    "& .headroom--unpinned": {
      position: "fixed",
      transform: "translateY(-100%)",
    },
    "& .headroom--pinned": {
      position: "fixed",
      transform: "translateY(0%)",
    },
  },
  headroomPinnedOpen: {
    "& .headroom--unpinned": {
      transform: "none !important",
    },
    "& .headroom--unfixed": {
      position: "fixed !important",
    },
  },

  // Giving season 2024 styles
  gsBackground: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    opacity: 0,
    transition: "opacity 0.5s ease",
    backgroundSize: "100% 400px",
    backgroundRepeat: "no-repeat",
    backgroundBlendMode: "darken",
  },
  gsBackgroundActive: {
    opacity: 1,
  },
  gsAppBarText: {
    ...textColorOverrideStyles({
      theme,
      color: theme.palette.givingSeason.primary,
      contrastColor: theme.palette.text.alwaysWhite,
    }),
  },
  gsBanner: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 14,
    fontWeight: 600,
    lineHeight: "150%",
    letterSpacing: "1.12px",
    textAlign: "center",
    flex: 1,
    [theme.breakpoints.down(GIVING_SEASON_MOBILE_WIDTH)]: {
      display: "none",
    },
  },
  gsRightHeaderItems: {
    flex: 1,
    justifyContent: "flex-end",
  },
});

const Header = ({
  standaloneNavigationPresent,
  sidebarHidden,
  toggleStandaloneNavigation,
  stayAtTop=false,
  searchResultsArea,
  backgroundColor,
  classes,
}: {
  standaloneNavigationPresent: boolean,
  sidebarHidden: boolean,
  toggleStandaloneNavigation: () => void,
  stayAtTop?: boolean,
  searchResultsArea: React.RefObject<HTMLDivElement>,
  // CSS var corresponding to the background color you want to apply (see also appBarDarkBackground above)
  backgroundColor?: string,
  classes: ClassesType<typeof styles>,
}) => {
  const [navigationOpen, setNavigationOpenState] = useState(false);
  const [notificationOpen, setNotificationOpen] = useState(false);
  const [notificationHasOpened, setNotificationHasOpened] = useState(false);
  const [searchOpen, setSearchOpenState] = useState(false);
  const [unFixed, setUnFixed] = useState(true);
  const currentUser = useCurrentUser();
  const {toc} = useContext(SidebarsContext)!;
  const { captureEvent } = useTracking()
  const { notificationsOpened } = useUnreadNotifications();
  const { currentRoute, pathname, hash } = useLocation();
  const {currentForumEvent} = useCurrentForumEvent();
  const isGivingSeason =
    currentForumEvent?.customComponent === "GivingSeason2024Banner" &&
    currentRoute?.name === "home";
  const {events, selectedEvent} = useGivingSeasonEvents();

  const {
    SearchBar, UsersMenu, UsersAccountMenu, NotificationsMenuButton, NavigationDrawer,
    NotificationsMenu, KarmaChangeNotifier, HeaderSubtitle, Typography, ForumIcon,
    ActiveDialogues, SiteLogo, MessagesMenuButton,
  } = Components;

  useEffect(() => {
    // When we move to a different page we will be positioned at the top of
    // the page (unless the hash is set) but Headroom doesn't run this callback
    // on navigation so we have to do it manually
    if (!hash) {
      setUnFixed(true);
    }
  }, [pathname, hash]);

  const hasNotificationsPopover = isFriendlyUI;
  const hasKarmaChangeNotifier = !isFriendlyUI && currentUser && !currentUser.usernameUnset;
  const hasMessagesButton = isFriendlyUI && currentUser && !currentUser.usernameUnset;

  const setNavigationOpen = (open: boolean) => {
    setNavigationOpenState(open);
    captureEvent("navigationBarToggle", {open: open})
  }

  const handleSetNotificationDrawerOpen = async (isOpen: boolean): Promise<void> => {
    if (!currentUser) return;
    if (isOpen) {
      setNotificationOpen(true);
      setNotificationHasOpened(true);
      await notificationsOpened();
    } else {
      setNotificationOpen(false);
    }
  }

  const handleNotificationToggle = () => {
    if (!currentUser) return;
    const { lastNotificationsCheck } = currentUser

    if (hasNotificationsPopover) {
      captureEvent("notificationsIconToggle", {
        previousCheck: lastNotificationsCheck,
      });
    } else {
      captureEvent("notificationsIconToggle", {
        open: !notificationOpen,
        previousCheck: lastNotificationsCheck,
      });
      void handleSetNotificationDrawerOpen(!notificationOpen);
    }
  }

  // We do two things when the search is open:
  //  1) Pin the header open with the Headroom component
  //  2) Hide the username on mobile so users with long usernames can still
  //     enter search queries
  // Called by SearchBar.
  const setSearchOpen = useCallback((isOpen: boolean) => {
    if (isOpen) { captureEvent("searchToggle", {"open": isOpen}) }
    setSearchOpenState(isOpen);
  }, [captureEvent]);

  const navigationMenuButton = (
    // The navigation menu button either toggles a free floating sidebar, opens
    // a drawer with site navigation, or a drawer with table of contents. (This
    // is structured a little oddly because the hideSmDown/hideMdUp filters
    // cause a misalignment if they're in the wrong part of the tree.)
    <React.Fragment>
      {toc?.sectionData?.sections
        ? <>
            <div className={classes.hideSmDown}>
              <IconButton
                className={classNames(
                  classes.menuButton,
                  {[classes.hideLgUp]: standaloneNavigationPresent && unFixed}
                )}
                color="inherit"
                aria-label="Menu"
                onClick={()=>setNavigationOpen(true)}
              >
                <ForumIcon icon="Menu" />
              </IconButton>
            </div>
            <div className={classes.hideMdUp}>
              <IconButton
                className={classNames(
                  classes.menuButton,
                  {[classes.hideLgUp]: standaloneNavigationPresent && unFixed}
                )}
                color="inherit"
                aria-label="Menu"
                onClick={()=>setNavigationOpen(true)}
              >
                <TocIcon />
              </IconButton>
            </div>
          </>
        : <IconButton
            className={classNames(
              classes.menuButton,
              {[classes.hideLgUp]: standaloneNavigationPresent && unFixed}
            )}
            color="inherit"
            aria-label="Menu"
            onClick={()=>setNavigationOpen(true)}
          >
            <ForumIcon icon="Menu" />
          </IconButton>
      }
      {standaloneNavigationPresent && unFixed && <IconButton
        className={classNames(
          classes.menuButton,
          classes.hideMdDown
        )}
        color="inherit"
        aria-label="Menu"
        onClick={toggleStandaloneNavigation}
      >
        {(isFriendlyUI && !sidebarHidden) ? <ForumIcon icon="CloseMenu" /> : <ForumIcon icon="Menu" />}
      </IconButton>}
    </React.Fragment>
  )

  const usersMenuClass = isFriendlyUI ? classes.hideXsDown : classes.hideMdDown
  const usersMenuNode = currentUser && <div className={searchOpen ? usersMenuClass : undefined}>
    <AnalyticsContext pageSectionContext="usersMenu">
      <UsersMenu />
    </AnalyticsContext>
  </div>

  // the items on the right-hand side (search, notifications, user menu, login/sign up buttons)
  const rightHeaderItemsNode = <div className={classNames(
    classes.rightHeaderItems,
    isGivingSeason && classes.gsRightHeaderItems,
  )}>
    <SearchBar onSetIsActive={setSearchOpen} searchResultsArea={searchResultsArea} />
    {!isFriendlyUI && usersMenuNode}
    {!currentUser && <UsersAccountMenu />}
    {hasKarmaChangeNotifier && <KarmaChangeNotifier
      currentUser={currentUser}
      className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}
    />}
    {currentUser && !currentUser.usernameUnset && <NotificationsMenuButton
      toggle={handleNotificationToggle}
      open={notificationOpen}
      className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}
    />}
    {hasMessagesButton &&
      <MessagesMenuButton
        className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}
      />
    }
    {isFriendlyUI && usersMenuNode}
  </div>

  // the left side nav menu
  const headerNavigationDrawer = <NavigationDrawer
    open={navigationOpen}
    handleOpen={() => setNavigationOpen(true)}
    handleClose={() => setNavigationOpen(false)}
    toc={toc?.sectionData ?? null}
  />

  // the right side notifications menu
  const headerNotificationsMenu = currentUser && !hasNotificationsPopover
    && (
      <NotificationsMenu
        open={notificationOpen}
        hasOpened={notificationHasOpened}
        setIsOpen={handleSetNotificationDrawerOpen}
      />
    );

  const headerStyle: CSSProperties = {}
  const bannerImageId = currentForumEvent?.bannerImageId
  // If we're explicitly given a backgroundColor, that overrides any event header
  if (backgroundColor) {
    headerStyle.backgroundColor = backgroundColor
  } else if (hasForumEvents && currentRoute?.name === "home") {
    // On EAF, forum events with polls also update the home page header background
    if (bannerImageId && currentForumEvent?.includesPoll) {
      const darkColor = currentForumEvent.darkColor;
      const background = `top / cover no-repeat url(${makeCloudinaryImageUrl(bannerImageId, {
        c: "fill",
        dpr: "auto",
        q: "auto",
        f: "auto",
        g: "north",
      })})${darkColor ? `, ${darkColor}` : ''}`;
      headerStyle.background = background;
    } else if (isGivingSeason) {
      headerStyle.background = unFixed ? "transparent" : "#fff";
    }
  }

  const useGivingSeasonText = isGivingSeason && selectedEvent.darkText;

  // Make all the text and icons white when we have some sort of color in the header background
  const useWhiteText = Object.keys(headerStyle).length > 0 && !useGivingSeasonText;

  return (
    <AnalyticsContext pageSectionContext="header">
      <div className={classes.root}>
        <Headroom
          disableInlineStyles
          downTolerance={10} upTolerance={10}
          height={HEADER_HEIGHT}
          className={classNames(classes.headroom, {
            [classes.headroomPinnedOpen]: searchOpen,
          })}
          onUnfix={() => setUnFixed(true)}
          onUnpin={() => setUnFixed(false)}
          disable={stayAtTop}
        >
          <header
            className={classNames(
              classes.appBar,
              useWhiteText && classes.appBarDarkBackground,
              useGivingSeasonText && classes.gsAppBarText,
            )}
            style={headerStyle}
          >
            {isGivingSeason && !unFixed &&
              <div>
                {events.map(({name, background}) => (
                <div
                  key={name}
                  style={{backgroundImage: `url(${background})`}}
                  className={classNames(
                    classes.gsBackground,
                    name === selectedEvent.name && classes.gsBackgroundActive,
                  )}
                />
                ))}
              </div>
            }
            <Toolbar disableGutters={isFriendlyUI}>
              {navigationMenuButton}
              <Typography className={classes.title} variant="title">
                <div className={classes.hideSmDown}>
                  <div className={classes.titleSubtitleContainer}>
                    <Link to="/" className={classes.titleLink}>
                      {hasProminentLogoSetting.get() && <div className={classes.siteLogo}><SiteLogo eaWhite={useWhiteText}/></div>}
                      {forumHeaderTitleSetting.get()}
                    </Link>
                    <HeaderSubtitle />
                  </div>
                </div>
                <div className={classes.hideMdUp}>
                  <Link to="/" className={classes.titleLink}>
                    {hasProminentLogoSetting.get() && <div className={classes.siteLogo}><SiteLogo eaWhite={useWhiteText}/></div>}
                    {forumShortTitleSetting.get()}
                  </Link>
                </div>
              </Typography>
              {!isEAForum &&<ActiveDialogues />}
              {isGivingSeason && !searchOpen &&
                <div className={classes.gsBanner}>
                  <Link to="#">
                    GIVING SEASON 2024
                  </Link>
                </div>
              }
              {rightHeaderItemsNode}
            </Toolbar>
          </header>
          {headerNavigationDrawer}
        </Headroom>
        {headerNotificationsMenu}
      </div>
    </AnalyticsContext>
  )
}

const HeaderComponent = registerComponent('Header', Header, {
  styles,
  hocs: [withErrorBoundary]
});

declare global {
  interface ComponentTypes {
    Header: typeof HeaderComponent
  }
}

1	import React, { useContext, useState, useCallback, useEffect, CSSProperties } from 'react';	73✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	18✔
3	import { Link } from '../../lib/reactRouterWrapper';	18✔
4	import Headroom from '../../lib/react-headroom'	18✔
5	import Toolbar from '@material-ui/core/Toolbar';	18✔
6	import IconButton from '@material-ui/core/IconButton';	18✔
7	import TocIcon from '@material-ui/icons/Toc';	18✔
8	import { useCurrentUser } from '../common/withUser';	18✔
9	import { SidebarsContext } from './SidebarsWrapper';	18✔
10	import withErrorBoundary from '../common/withErrorBoundary';	18✔
11	import classNames from 'classnames';	18✔
12	import { AnalyticsContext, useTracking } from '../../lib/analyticsEvents';	18✔
13	import { PublicInstanceSetting, isEAForum } from '../../lib/instanceSettings';	18✔
14	import { useUnreadNotifications } from '../hooks/useUnreadNotifications';	18✔
15	import { isBookUI, isFriendlyUI } from '../../themes/forumTheme';	18✔
16	import { hasProminentLogoSetting } from '../../lib/publicSettings';	18✔
17	import { useLocation } from '../../lib/routeUtil';	18✔
18	import { useCurrentForumEvent } from '../hooks/useCurrentForumEvent';	18✔
19	import { makeCloudinaryImageUrl } from './CloudinaryImage2';	18✔
20	import { hasForumEvents } from '@/lib/betas';	18✔
21	import {
22	GIVING_SEASON_MOBILE_WIDTH,
23	useGivingSeasonEvents,
24	} from '../forumEvents/useGivingSeasonEvents';	18✔
25
26	export const forumHeaderTitleSetting = new PublicInstanceSetting<string>('forumSettings.headerTitle', "LESSWRONG", "warning")	18✔
27	export const forumShortTitleSetting = new PublicInstanceSetting<string>('forumSettings.shortForumTitle', "LW", "warning")	18✔
28	/** Height of top header. On Book UI sites, this is for desktop only */
29	export const HEADER_HEIGHT = isBookUI ? 64 : 66;	18!
30	/** Height of top header on mobile. On Friendly UI sites, this is the same as the HEADER_HEIGHT */
31	export const MOBILE_HEADER_HEIGHT = isBookUI ? 56 : HEADER_HEIGHT;	18!
32
33	const textColorOverrideStyles = ({	18✔
34	theme,
35	color,
36	contrastColor,
37	loginButtonBackgroundColor,
38	loginButtonHoverBackgroundColor,
39	loginButtonColor,
40	signupButtonBackgroundColor,
41	signupButtonHoverBackgroundColor,
42	signupButtonColor,
43	}: {
44	theme: ThemeType,
45	color: string,
46	contrastColor?: string,
47	loginButtonBackgroundColor?: string,
48	loginButtonHoverBackgroundColor?: string,
49	loginButtonColor?: string,
50	signupButtonBackgroundColor?: string,
51	signupButtonHoverBackgroundColor?: string,
52	signupButtonColor?: string,
53	}) => ({	2✔
54	color,
55	boxShadow: 'none',
56	"& .Header-titleLink": {
57	color,
58	},
59	"& .HeaderSubtitle-subtitle": {
60	color,
61	},
62	"& .SearchBar-searchIcon": {
63	color,
64	},
65	"& .ais-SearchBox-input": {
66	color,
67	},
68	"& .ais-SearchBox-input::placeholder": {
69	color,
70	},
71	"& .KarmaChangeNotifier-starIcon": {
72	color,
73	},
74	"& .KarmaChangeNotifier-gainedPoints": {
75	color,
76	},
77	"& .NotificationsMenuButton-badge": {
78	color,
79	},
80	"& .NotificationsMenuButton-buttonClosed": {
81	color,
82	},
83	"& .MessagesMenuButton-buttonClosed": {
84	color,
85	},
86	"& .UsersMenu-arrowIcon": {
87	color,
88	},
89	"& .EAButton-variantContained": {
90	backgroundColor: signupButtonBackgroundColor ?? color,	2✔
91	color: signupButtonColor ?? contrastColor,	2✔
92	"&:hover": {
93	backgroundColor: signupButtonHoverBackgroundColor ?? `color-mix(in oklab, ${signupButtonBackgroundColor ?? color} 90%, ${signupButtonColor ?? contrastColor})`,	6!
94	},
95	},
96	"& .EAButton-greyContained": {
97	backgroundColor: loginButtonBackgroundColor ?? `color-mix(in oklab, ${loginButtonColor ?? color} 15%, ${contrastColor})`,	3!
98	color: loginButtonColor ?? color,	2✔
99	"&:hover": {
100	backgroundColor: loginButtonHoverBackgroundColor ?? `color-mix(in oklab, ${loginButtonColor ?? color} 10%, ${theme.palette.background.transparent}) !important`,	3!
101	},
102	},
103	});
104
105	export const styles = (theme: ThemeType) => ({	18✔
106	appBar: {
107	boxShadow: theme.palette.boxShadow.appBar,
108	color: theme.palette.header.text,
109	backgroundColor: theme.palette.header.background,
110	position: "static",
111	width: "100%",
112	display: "flex",
113	zIndex: 1100,
114	boxSizing: "border-box",
115	flexShrink: 0,
116	flexDirection: "column",
117	...(isFriendlyUI ? {	1!
118	maxWidth: "100vw",
119	overflow: "hidden",
120	padding: '1px 20px',
121	[theme.breakpoints.down('sm')]: {
122	padding: '1px 11px',
123	},
124	[theme.breakpoints.down('xs')]: {
125	padding: '9px 11px',
126	},
127	} : {}),
128	},
129	appBarDarkBackground: {
130	...textColorOverrideStyles({
131	theme,
132	color: theme.palette.text.alwaysWhite,
133	contrastColor: theme.palette.text.alwaysBlack,
134
135	// Custom button styles for giving season 2024
136	signupButtonBackgroundColor: theme.palette.givingSeason.electionFundBackground,
137	signupButtonColor: theme.palette.text.alwaysWhite,
138	loginButtonBackgroundColor: theme.palette.givingSeason.electionFundBackground,
139	loginButtonColor: theme.palette.text.alwaysWhite,
140	loginButtonHoverBackgroundColor: `color-mix(in oklab, ${theme.palette.givingSeason.electionFundBackground} 90%, ${theme.palette.text.alwaysWhite})`,
141	}),
142	},
143	root: {
144	// This height (including the breakpoint at xs/600px) is set by Headroom, and this wrapper (which surrounds
145	// Headroom and top-pads the page) has to match.
146	height: HEADER_HEIGHT,
147	[theme.breakpoints.down('xs')]: {
148	height: MOBILE_HEADER_HEIGHT,
149	},
150	"@media print": {
151	display: "none"
152	}
153	},
154	titleSubtitleContainer: {
155	display: 'flex',
156	alignItems: 'center'
157	},
158	title: {
159	flex: 1,
160	position: "relative",
161	top: 3,
162	paddingRight: theme.spacing.unit,
163	color: theme.palette.text.secondary,
164	},
165	titleLink: {
166	color: theme.palette.header.text,
167	fontSize: 19,
168	'&:hover, &:active': {
169	textDecoration: 'none',
170	opacity: 0.7,
171	},
172	display: 'flex',
173	alignItems: 'center',
174	fontWeight: isFriendlyUI ? 400 : undefined,	1!
175	height: isFriendlyUI ? undefined : '19px'	1!
176	},
177	menuButton: {
178	marginLeft: -theme.spacing.unit,
179	marginRight: theme.spacing.unit,
180	},
181	siteLogo: {
182	marginLeft: -7,
183	marginRight: 6,
184	[theme.breakpoints.down('sm')]: {
185	marginLeft: -12,
186	marginRight: 3
187	},
188	},
189	hideLgUp: {
190	[theme.breakpoints.up('lg')]: {
191	display:"none !important"
192	}
193	},
194	hideMdDown: {
195	[theme.breakpoints.down('md')]: {
196	display:"none !important"
197	}
198	},
199	hideSmDown: {
200	[theme.breakpoints.down('sm')]: {
201	display: "none !important",
202	},
203	},
204	hideXsDown: {
205	[theme.breakpoints.down('xs')]: {
206	display: "none !important",
207	},
208	},
209	hideMdUp: {
210	[theme.breakpoints.up('md')]: {
211	display: "none !important",
212	},
213	},
214	rightHeaderItems: {
215	marginRight: -theme.spacing.unit,
216	marginLeft: "auto",
217	display: "flex",
218	alignItems: isFriendlyUI ? 'center' : undefined,	1!
219	},
220	// Prevent rearranging of mobile header when search loads after SSR
221	searchSSRStandin: {
222	minWidth: 48
223	},
224	headroom: {
225	// Styles for header scrolling, provided by react-headroom
226	// https://github.com/KyleAMathews/react-headroom
227	"& .headroom": {
228	top: "unset",
229	left: 0,
230	right: 0,
231	zIndex: 1300,
232	},
233	"& .headroom--unfixed": {
234	position: "relative",
235	transform: "translateY(0)",
236	},
237	"& .headroom--scrolled": {
238	transition: "transform 200ms ease-in-out",
239	},
240	"& .headroom--unpinned": {
241	position: "fixed",
242	transform: "translateY(-100%)",
243	},
244	"& .headroom--pinned": {
245	position: "fixed",
246	transform: "translateY(0%)",
247	},
248	},
249	headroomPinnedOpen: {
250	"& .headroom--unpinned": {
251	transform: "none !important",
252	},
253	"& .headroom--unfixed": {
254	position: "fixed !important",
255	},
256	},
257
258	// Giving season 2024 styles
259	gsBackground: {
260	position: "absolute",
261	top: 0,
262	left: 0,
263	width: "100%",
264	height: "100%",
265	opacity: 0,
266	transition: "opacity 0.5s ease",
267	backgroundSize: "100% 400px",
268	backgroundRepeat: "no-repeat",
269	backgroundBlendMode: "darken",
270	},
271	gsBackgroundActive: {
272	opacity: 1,
273	},
274	gsAppBarText: {
275	...textColorOverrideStyles({
276	theme,
277	color: theme.palette.givingSeason.primary,
278	contrastColor: theme.palette.text.alwaysWhite,
279	}),
280	},
281	gsBanner: {
282	fontFamily: theme.palette.fonts.sansSerifStack,
283	fontSize: 14,
284	fontWeight: 600,
285	lineHeight: "150%",
286	letterSpacing: "1.12px",
287	textAlign: "center",
288	flex: 1,
289	[theme.breakpoints.down(GIVING_SEASON_MOBILE_WIDTH)]: {
290	display: "none",
291	},
292	},
293	gsRightHeaderItems: {
294	flex: 1,
295	justifyContent: "flex-end",
296	},
297	});
298
299	const Header = ({	18✔
300	standaloneNavigationPresent,
301	sidebarHidden,
302	toggleStandaloneNavigation,
303	stayAtTop=false,	×
304	searchResultsArea,
305	backgroundColor,
306	classes,
307	}: {
308	standaloneNavigationPresent: boolean,
309	sidebarHidden: boolean,
310	toggleStandaloneNavigation: () => void,
311	stayAtTop?: boolean,
312	searchResultsArea: React.RefObject<HTMLDivElement>,
313	// CSS var corresponding to the background color you want to apply (see also appBarDarkBackground above)
314	backgroundColor?: string,
315	classes: ClassesType<typeof styles>,
316	}) => {
317	const [navigationOpen, setNavigationOpenState] = useState(false);	×
318	const [notificationOpen, setNotificationOpen] = useState(false);	×
319	const [notificationHasOpened, setNotificationHasOpened] = useState(false);	×
320	const [searchOpen, setSearchOpenState] = useState(false);	×
321	const [unFixed, setUnFixed] = useState(true);	×
322	const currentUser = useCurrentUser();	×
323	const {toc} = useContext(SidebarsContext)!;	×
324	const { captureEvent } = useTracking()	×
325	const { notificationsOpened } = useUnreadNotifications();	×
326	const { currentRoute, pathname, hash } = useLocation();	×
327	const {currentForumEvent} = useCurrentForumEvent();	×
NEW 328	const isGivingSeason =	×
329	currentForumEvent?.customComponent === "GivingSeason2024Banner" &&	×
330	currentRoute?.name === "home";	×
NEW 331	const {events, selectedEvent} = useGivingSeasonEvents();	×
332
333	const {
334	SearchBar, UsersMenu, UsersAccountMenu, NotificationsMenuButton, NavigationDrawer,
335	NotificationsMenu, KarmaChangeNotifier, HeaderSubtitle, Typography, ForumIcon,
336	ActiveDialogues, SiteLogo, MessagesMenuButton,
337	} = Components;	×
338
339	useEffect(() => {	×
340	// When we move to a different page we will be positioned at the top of
341	// the page (unless the hash is set) but Headroom doesn't run this callback
342	// on navigation so we have to do it manually
343	if (!hash) {	×
344	setUnFixed(true);	×
345	}
346	}, [pathname, hash]);
347
348	const hasNotificationsPopover = isFriendlyUI;	×
349	const hasKarmaChangeNotifier = !isFriendlyUI && currentUser && !currentUser.usernameUnset;	×
350	const hasMessagesButton = isFriendlyUI && currentUser && !currentUser.usernameUnset;	×
351
352	const setNavigationOpen = (open: boolean) => {	×
353	setNavigationOpenState(open);	×
354	captureEvent("navigationBarToggle", {open: open})	×
355	}
356
357	const handleSetNotificationDrawerOpen = async (isOpen: boolean): Promise<void> => {	×
358	if (!currentUser) return;	×
359	if (isOpen) {	×
360	setNotificationOpen(true);	×
361	setNotificationHasOpened(true);	×
362	await notificationsOpened();	×
363	} else {
364	setNotificationOpen(false);	×
365	}
366	}
367
368	const handleNotificationToggle = () => {	×
369	if (!currentUser) return;	×
370	const { lastNotificationsCheck } = currentUser	×
371
372	if (hasNotificationsPopover) {	×
373	captureEvent("notificationsIconToggle", {	×
374	previousCheck: lastNotificationsCheck,
375	});
376	} else {
377	captureEvent("notificationsIconToggle", {	×
378	open: !notificationOpen,
379	previousCheck: lastNotificationsCheck,
380	});
381	void handleSetNotificationDrawerOpen(!notificationOpen);	×
382	}
383	}
384
385	// We do two things when the search is open:
386	// 1) Pin the header open with the Headroom component
387	// 2) Hide the username on mobile so users with long usernames can still
388	// enter search queries
389	// Called by SearchBar.
390	const setSearchOpen = useCallback((isOpen: boolean) => {	×
391	if (isOpen) { captureEvent("searchToggle", {"open": isOpen}) }	×
392	setSearchOpenState(isOpen);	×
393	}, [captureEvent]);
394
395	const navigationMenuButton = (
396	// The navigation menu button either toggles a free floating sidebar, opens
397	// a drawer with site navigation, or a drawer with table of contents. (This
398	// is structured a little oddly because the hideSmDown/hideMdUp filters
399	// cause a misalignment if they're in the wrong part of the tree.)
400	<React.Fragment>	×
401	{toc?.sectionData?.sections	×
402	? <>	×
403	<div className={classes.hideSmDown}>
404	<IconButton
405	className={classNames(
406	classes.menuButton,
407	{[classes.hideLgUp]: standaloneNavigationPresent && unFixed}	×
408	)}
409	color="inherit"
410	aria-label="Menu"
411	onClick={()=>setNavigationOpen(true)}	×
412	>
413	<ForumIcon icon="Menu" />
414	</IconButton>
415	</div>
416	<div className={classes.hideMdUp}>
417	<IconButton
418	className={classNames(
419	classes.menuButton,
420	{[classes.hideLgUp]: standaloneNavigationPresent && unFixed}	×
421	)}
422	color="inherit"
423	aria-label="Menu"
424	onClick={()=>setNavigationOpen(true)}	×
425	>
426	<TocIcon />
427	</IconButton>
428	</div>
429	</>
430	: <IconButton
431	className={classNames(
432	classes.menuButton,
433	{[classes.hideLgUp]: standaloneNavigationPresent && unFixed}	×
434	)}
435	color="inherit"
436	aria-label="Menu"
437	onClick={()=>setNavigationOpen(true)}	×
438	>
439	<ForumIcon icon="Menu" />
440	</IconButton>
441	}
442	{standaloneNavigationPresent && unFixed && <IconButton	×
443	className={classNames(
444	classes.menuButton,
445	classes.hideMdDown
446	)}
447	color="inherit"
448	aria-label="Menu"
449	onClick={toggleStandaloneNavigation}
450	>
451	{(isFriendlyUI && !sidebarHidden) ? <ForumIcon icon="CloseMenu" /> : <ForumIcon icon="Menu" />}	×
452	</IconButton>}
453	</React.Fragment>
454	)
455
456	const usersMenuClass = isFriendlyUI ? classes.hideXsDown : classes.hideMdDown	×
457	const usersMenuNode = currentUser && <div className={searchOpen ? usersMenuClass : undefined}>	×
458	<AnalyticsContext pageSectionContext="usersMenu">
459	<UsersMenu />
460	</AnalyticsContext>
461	</div>
462
463	// the items on the right-hand side (search, notifications, user menu, login/sign up buttons)
NEW 464	const rightHeaderItemsNode = <div className={classNames(	×
465	classes.rightHeaderItems,
466	isGivingSeason && classes.gsRightHeaderItems,	×
467	)}>
468	<SearchBar onSetIsActive={setSearchOpen} searchResultsArea={searchResultsArea} />
469	{!isFriendlyUI && usersMenuNode}	×
470	{!currentUser && <UsersAccountMenu />}	×
471	{hasKarmaChangeNotifier && <KarmaChangeNotifier	×
472	currentUser={currentUser}
473	className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}	×
474	/>}
475	{currentUser && !currentUser.usernameUnset && <NotificationsMenuButton	×
476	toggle={handleNotificationToggle}
477	open={notificationOpen}
478	className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}	×
479	/>}
480	{hasMessagesButton &&	×
481	<MessagesMenuButton
482	className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}	×
483	/>
484	}
485	{isFriendlyUI && usersMenuNode}	×
486	</div>
487
488	// the left side nav menu
489	const headerNavigationDrawer = <NavigationDrawer	×
490	open={navigationOpen}
491	handleOpen={() => setNavigationOpen(true)}	×
492	handleClose={() => setNavigationOpen(false)}	×
493	toc={toc?.sectionData ?? null}	×
494	/>
495
496	// the right side notifications menu
497	const headerNotificationsMenu = currentUser && !hasNotificationsPopover	×
498	&& (
499	<NotificationsMenu
500	open={notificationOpen}
501	hasOpened={notificationHasOpened}
502	setIsOpen={handleSetNotificationDrawerOpen}
503	/>
504	);
505
506	const headerStyle: CSSProperties = {}	×
507	const bannerImageId = currentForumEvent?.bannerImageId	×
508	// If we're explicitly given a backgroundColor, that overrides any event header
509	if (backgroundColor) {	×
510	headerStyle.backgroundColor = backgroundColor	×
NEW 511	} else if (hasForumEvents && currentRoute?.name === "home") {	×
512	// On EAF, forum events with polls also update the home page header background
NEW 513	if (bannerImageId && currentForumEvent?.includesPoll) {	×
NEW 514	const darkColor = currentForumEvent.darkColor;	×
NEW 515	const background = `top / cover no-repeat url(${makeCloudinaryImageUrl(bannerImageId, {	×
516	c: "fill",
517	dpr: "auto",
518	q: "auto",
519	f: "auto",
520	g: "north",
521	})})${darkColor ? `, ${darkColor}` : ''}`;	×
NEW 522	headerStyle.background = background;	×
NEW 523	} else if (isGivingSeason) {	×
NEW 524	headerStyle.background = unFixed ? "transparent" : "#fff";	×
525	}
526	}
527
NEW 528	const useGivingSeasonText = isGivingSeason && selectedEvent.darkText;	×
529
530	// Make all the text and icons white when we have some sort of color in the header background
NEW 531	const useWhiteText = Object.keys(headerStyle).length > 0 && !useGivingSeasonText;	×
532
533	return (	×
534	<AnalyticsContext pageSectionContext="header">
535	<div className={classes.root}>
536	<Headroom
537	disableInlineStyles
538	downTolerance={10} upTolerance={10}
539	height={HEADER_HEIGHT}
540	className={classNames(classes.headroom, {
541	[classes.headroomPinnedOpen]: searchOpen,
542	})}
543	onUnfix={() => setUnFixed(true)}	×
544	onUnpin={() => setUnFixed(false)}	×
545	disable={stayAtTop}
546	>
547	<header
548	className={classNames(
549	classes.appBar,
550	useWhiteText && classes.appBarDarkBackground,	×
551	useGivingSeasonText && classes.gsAppBarText,	×
552	)}
553	style={headerStyle}
554	>
555	{isGivingSeason && !unFixed &&	×
556	<div>
557	{events.map(({name, background}) => (
NEW 558	<div	×
559	key={name}
560	style={{backgroundImage: `url(${background})`}}
561	className={classNames(
562	classes.gsBackground,
563	name === selectedEvent.name && classes.gsBackgroundActive,	×
564	)}
565	/>
566	))}
567	</div>
568	}
569	<Toolbar disableGutters={isFriendlyUI}>
570	{navigationMenuButton}
571	<Typography className={classes.title} variant="title">
572	<div className={classes.hideSmDown}>
573	<div className={classes.titleSubtitleContainer}>
574	<Link to="/" className={classes.titleLink}>
575	{hasProminentLogoSetting.get() && <div className={classes.siteLogo}><SiteLogo eaWhite={useWhiteText}/></div>}	×
576	{forumHeaderTitleSetting.get()}
577	</Link>
578	<HeaderSubtitle />
579	</div>
580	</div>
581	<div className={classes.hideMdUp}>
582	<Link to="/" className={classes.titleLink}>
583	{hasProminentLogoSetting.get() && <div className={classes.siteLogo}><SiteLogo eaWhite={useWhiteText}/></div>}	×
584	{forumShortTitleSetting.get()}
585	</Link>
586	</div>
587	</Typography>
588	{!isEAForum &&<ActiveDialogues />}	×
589	{isGivingSeason && !searchOpen &&	×
590	<div className={classes.gsBanner}>
591	<Link to="#">
592	GIVING SEASON 2024
593	</Link>
594	</div>
595	}
596	{rightHeaderItemsNode}
597	</Toolbar>
598	</header>
599	{headerNavigationDrawer}
600	</Headroom>
601	{headerNotificationsMenu}
602	</div>
603	</AnalyticsContext>
604	)
605	}
606
607	const HeaderComponent = registerComponent('Header', Header, {	18✔
608	styles,
609	hocs: [withErrorBoundary]
610	});
611
612	declare global {
613	interface ComponentTypes {
614	Header: typeof HeaderComponent
615	}
616	}

ForumMagnum / ForumMagnum / 11650821356

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous