11702185967

Committed 06 Nov 2024 10:59AM UTC coverage: 31.274% (-0.002%) from 31.276%

Build # 11702185967

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9978 from ForumMagnum/master

[EA] Deploy more giving season updates, fixes, LW stuff

Run Details

5073 of 42716 branches covered (11.88%)

Branch coverage included in aggregate %.

19 of 25 new or added lines in 6 files covered. (76.0%)

3 existing lines in 3 files now uncovered.

29757 of 68655 relevant lines covered (43.34%)

173.59 hits per line

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

14.29

/packages/lesswrong/components/forumEvents/GivingSeason2024Banner.tsx

import React, { useCallback, useEffect, useRef, useState } from "react";
import { Components, registerComponent } from "@/lib/vulcan-lib";
import { Link } from "@/lib/reactRouterWrapper";
import { useCurrentUser } from "../common/withUser";
import { formatStat } from "../users/EAUserTooltipContent";
import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from "../common/Header";
import {
  GIVING_SEASON_DESKTOP_WIDTH,
  GIVING_SEASON_MOBILE_WIDTH,
  getDonateLink,
  useGivingSeasonEvents,
} from "./useGivingSeasonEvents";
import classNames from "classnames";
import type { Moment } from "moment";

const DOT_SIZE = 12;

const styles = (theme: ThemeType) => ({
  root: {
    width: "100vw",
    maxWidth: "100vw",
    overflow: "hidden",
    position: "relative",
    color: theme.palette.text.alwaysWhite,
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 14,
    fontWeight: 500,
    marginTop: -HEADER_HEIGHT,
    paddingTop: HEADER_HEIGHT,
    [theme.breakpoints.down("xs")]: {
      marginTop: -MOBILE_HEADER_HEIGHT,
      paddingTop: MOBILE_HEADER_HEIGHT,
    },
  },
  backgrounds: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    zIndex: -1,
    background: theme.palette.text.alwaysWhite,
  },
  background: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    opacity: 0,
    transition: "opacity 0.5s ease",
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat",
    backgroundBlendMode: "darken",
  },
  backgroundActive: {
    opacity: 1,
  },
  darkText: {
    color: theme.palette.givingSeason.primary,
    "& $line, & $timelineDot": {
      background: theme.palette.givingSeason.primary,
    },
  },
  banner: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 15,
    fontWeight: 700,
    lineHeight: "150%",
    letterSpacing: "0.98px",
    textAlign: "center",
    margin: "-4px 0 16px 0",
    [theme.breakpoints.up(GIVING_SEASON_MOBILE_WIDTH)]: {
      display: "none",
    },
  },
  content: {
    transition: "color 0.5s ease",
    maxWidth: GIVING_SEASON_DESKTOP_WIDTH - 10,
    margin: "0 auto",
  },
  line: {
    width: "100%",
    height: 1,
    opacity: 0.6,
    background: theme.palette.text.alwaysWhite,
    transition: "background 0.5s ease",
  },
  timeline: {
    display: "flex",
    justifyContent: "space-between",
    gap: "24px",
    paddingTop: 14,
    marginTop: -12,
    overflow: "scroll hidden",
    scrollbarWidth: "none",
    "-ms-overflow-style": "none",
    "&::-webkit-scrollbar": {
      display: "none",
    },
    [theme.breakpoints.down(GIVING_SEASON_DESKTOP_WIDTH)]: {
      paddingLeft: 24,
      paddingRight: 24,
    },
  },
  timelineEvent: {
    cursor: "pointer",
    position: "relative",
    zIndex: theme.zIndexes.header + 1,
    margin: "12px 0",
    fontWeight: 400,
    whiteSpace: "nowrap",
    userSelect: "none",
    opacity: 0.6,
    transition: "opacity 0.5s ease",
    "&:hover": {
      opacity: 1,
    },
    // Use `after` to overlay the same text but with the higher font weight as
    // if it's selected, even if it's not. This means that the size of each
    // title won't change when they switch between active/inactive.
    "&:after": {
      display: "block",
      content: "attr(data-title)",
      fontWeight: 600,
      height: 1,
      color: "transparent",
      overflow: "hidden",
      visibility: "hidden",
    },
    "&:first-child": {
      scrollMarginLeft: "1000px",
    },
    "&:last-child": {
      scrollMarginRight: "1000px",
    },
  },
  timelineEventSelected: {
    fontWeight: 600,
    opacity: 1,
  },
  timelineDot: {
    position: "absolute",
    top: -20.5,
    left: `calc(50% - ${DOT_SIZE / 2}px)`,
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderRadius: "50%",
    background: theme.palette.text.alwaysWhite,
    transition: "background 0.5s ease",
  },
  mainContainer: {
    display: "flex",
    alignItems: "center",
    [theme.breakpoints.down(GIVING_SEASON_DESKTOP_WIDTH)]: {
      padding: "0 24px",
    },
  },
  detailsContainer: {
    whiteSpace: "nowrap",
    overflow: "scroll hidden",
    scrollSnapType: "x mandatory",
    scrollbarWidth: "none",
    "-ms-overflow-style": "none",
    "&::-webkit-scrollbar": {
      display: "none",
    },
  },
  eventDetails: {
    display: "inline-block",
    verticalAlign: "middle",
    width: "100%",
    scrollSnapAlign: "start",
    paddingTop: 24,
    paddingBottom: 40,
    [theme.breakpoints.down(GIVING_SEASON_MOBILE_WIDTH)]: {
      paddingTop: 12,
      paddingBottom: 24,
    },
  },
  eventDate: {
    maxWidth: 470,
    marginBottom: 8,
  },
  eventName: {
    maxWidth: 640,
    fontSize: 40,
    fontWeight: 700,
    marginBottom: 12,
    whiteSpace: "wrap",
  },
  eventDescription: {
    maxWidth: 470,
    lineHeight: "140%",
    whiteSpace: "wrap",
    "& a": {
      textDecoration: "underline",
      "&:hover": {
        textDecoration: "underline",
      },
    },
  },
  fund: {
    width: 260,
    minWidth: 260,
    padding: 16,
    marginTop: 8,
    marginBottom: 24,
    background: theme.palette.givingSeason.electionFundBackground,
    borderRadius: theme.borderRadius.default,
    [theme.breakpoints.down(GIVING_SEASON_MOBILE_WIDTH)]: {
      display: "none",
    },
  },
  fundTitle: {
    fontSize: 18,
    fontWeight: 700,
    letterSpacing: "-0.18px",
    marginBottom: 12,
  },
  fundInfo: {
    marginBottom: 12,
    lineHeight: "140%",
    whiteSpace: "wrap",
    "& a": {
      textDecoration: "underline",
      "&:hover": {
        textDecoration: "underline",
      },
    },
  },
  fundRaised: {
    fontSize: 16,
    fontWeight: 500,
    lineHeight: "140%",
    marginBottom: 4,
  },
  fundBarContainer: {
    width: "100%",
    height: 12,
    marginBottom: 20,
    background: theme.palette.givingSeason.electionFundBackground,
    borderRadius: theme.borderRadius.small,
    overflow: "hidden",
  },
  fundBar: {
    height: "100%",
    background: theme.palette.text.alwaysWhite,
    transition: "width 0.5s ease",
  },
  fundAmount: {
    fontWeight: 700,
  },
  donateButton: {
    width: "100%",
    color: theme.palette.givingSeason.primary,
    background: theme.palette.text.alwaysWhite,
    transition: "opacity 0.3s ease",
    "&:hover": {
      background: theme.palette.text.alwaysWhite,
      opacity: 0.85,
    },
  },
});

const formatDate = (start: Moment, end: Moment) => {
  const endFormat = start.month() === end.month() ? "D" : "MMM D";
  return `${start.format("MMM D")} - ${end.format(endFormat)}`;
}

const GivingSeason2024Banner = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const {
    events,
    currentEvent,
    selectedEvent,
    setSelectedEvent,
    amountRaised,
    amountTarget,
  } = useGivingSeasonEvents();
  const currentUser = useCurrentUser();
  const [timelineRef, setTimelineRef] = useState<HTMLDivElement | null>(null);
  const [detailsRef, setDetailsRef] = useState<HTMLDivElement | null>(null);
  const [lastTimelineClick, setLastTimelineClick] = useState<number>();
  const didInitialScroll = useRef(false);

  const amountRaisedPlusMatched = amountRaised + Math.min(amountRaised, 5000);
  const fundPercent = Math.round((amountRaisedPlusMatched / amountTarget) * 100);

  useEffect(() => {
    if (!detailsRef) {
      return;
    }
    const observer = new IntersectionObserver((entries) => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          const id = parseInt(entry.target.getAttribute("data-event-id") ?? "");
          if (Number.isSafeInteger(id) && events[id]) {
            setSelectedEvent(events[id]);
          }
        }
      }
    }, {threshold: 0.5});
    for (const child of Array.from(detailsRef.children)) {
      observer.observe(child);
    }
    return () => observer.disconnect();
  }, [timelineRef, detailsRef, events, setSelectedEvent]);

  useEffect(() => {
    // Disable for a short period after clicking an event to prevent spurious
    // scrolling on mobile
    if (lastTimelineClick && Date.now() - lastTimelineClick < 150) {
      return;
    }
    const id = events.findIndex((event) => event === selectedEvent);
    setTimeout(() => {
      timelineRef?.querySelector(`[data-event-id="${id}"]`)?.scrollIntoView({
        behavior: "smooth",
        block: "nearest",
        inline: "nearest",
      });
    }, 0);
  }, [timelineRef, selectedEvent, lastTimelineClick, events]);

  const onClickTimeline = useCallback((index: number) => {
    setLastTimelineClick(Date.now());
    setTimeout(() => {
      detailsRef?.querySelector(`[data-event-id="${index}"]`)?.scrollIntoView({
        behavior: "smooth",
        block: "nearest",
        inline: "start",
      });
    }, 0);
  }, [detailsRef]);

  useEffect(() => {
    if (currentEvent && detailsRef && !didInitialScroll.current) {
      didInitialScroll.current = true;
      onClickTimeline(events.findIndex(({name}) => name === currentEvent.name));
    }
  }, [events, onClickTimeline, currentEvent, detailsRef]);

  const {EAButton} = Components;
  return (
    <div className={classNames(
      classes.root,
      selectedEvent.darkText && classes.darkText,
    )}>
      <div className={classes.backgrounds}>
        {events.map(({name, background}) => (
          <div
            key={name}
            style={{backgroundImage: `url(${background})`}}
            className={classNames(
              classes.background,
              name === selectedEvent.name && classes.backgroundActive,
            )}
          />
        ))}
      </div>
      <div className={classes.banner}>
        <Link to="/posts/srZEX2r9upbwfnRKw/giving-season-2024-announcement">
          GIVING SEASON 2024
        </Link>
      </div>
      <div className={classes.line} />
      <div className={classes.content}>
        <div className={classes.timeline} ref={setTimelineRef}>
          {events.map((event, i) => (
            <div
              key={event.name}
              data-event-id={i}
              data-title={event.name}
              onClick={onClickTimeline.bind(null, i)}
              className={classNames(
                classes.timelineEvent,
                selectedEvent === event && classes.timelineEventSelected,
              )}
            >
              {event.name}
              {event === currentEvent &&
                <div className={classes.timelineDot} />
              }
            </div>
          ))}
        </div>
        <div className={classes.mainContainer}>
          <div className={classes.detailsContainer} ref={setDetailsRef}>
            {events.map(({name, description, start, end}, i) => (
              <div className={classes.eventDetails} data-event-id={i} key={name}>
                <div className={classes.eventDate}>{formatDate(start, end)}</div>
                <div className={classes.eventName}>{name}</div>
                <div className={classes.eventDescription}>{description}</div>
              </div>
            ))}
          </div>
          <div className={classes.fund}>
            <div className={classes.fundInfo}>
              Donate to the fund to boost the value of the{" "}
              <Link to="/posts/2WbDAAtGdyAEfcw6S/donation-election-fund-announcement-matching-rewards-and-faq">
                Donation Election
              </Link>.
            </div>
            <div className={classes.fundRaised}>
              <span className={classes.fundAmount}>
                ${formatStat(Math.round(amountRaisedPlusMatched))}
              </span> raised
            </div>
            <div className={classes.fundBarContainer}>
              <div
                style={{width: `${fundPercent}%`}}
                className={classes.fundBar}
              />
            </div>
            <EAButton
              href={getDonateLink(currentUser)}
              className={classes.donateButton}
            >
              Donate
            </EAButton>
          </div>
        </div>
      </div>
    </div>
  );
}

const GivingSeason2024BannerComponent = registerComponent(
  "GivingSeason2024Banner",
  GivingSeason2024Banner,
  {styles},
);

declare global {
  interface ComponentTypes {
    GivingSeason2024Banner: typeof GivingSeason2024BannerComponent
  }
}

1	import React, { useCallback, useEffect, useRef, useState } from "react";	1✔
2	import { Components, registerComponent } from "@/lib/vulcan-lib";	1✔
3	import { Link } from "@/lib/reactRouterWrapper";	1✔
4	import { useCurrentUser } from "../common/withUser";	1✔
5	import { formatStat } from "../users/EAUserTooltipContent";	1✔
6	import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from "../common/Header";	1✔
7	import {
8	GIVING_SEASON_DESKTOP_WIDTH,
9	GIVING_SEASON_MOBILE_WIDTH,
10	getDonateLink,
11	useGivingSeasonEvents,
12	} from "./useGivingSeasonEvents";	1✔
13	import classNames from "classnames";	1✔
14	import type { Moment } from "moment";
15
16	const DOT_SIZE = 12;	1✔
17
18	const styles = (theme: ThemeType) => ({	1✔
19	root: {
20	width: "100vw",
21	maxWidth: "100vw",
22	overflow: "hidden",
23	position: "relative",
24	color: theme.palette.text.alwaysWhite,
25	fontFamily: theme.palette.fonts.sansSerifStack,
26	fontSize: 14,
27	fontWeight: 500,
28	marginTop: -HEADER_HEIGHT,
29	paddingTop: HEADER_HEIGHT,
30	[theme.breakpoints.down("xs")]: {
31	marginTop: -MOBILE_HEADER_HEIGHT,
32	paddingTop: MOBILE_HEADER_HEIGHT,
33	},
34	},
35	backgrounds: {
36	position: "absolute",
37	top: 0,
38	left: 0,
39	width: "100%",
40	height: "100%",
41	zIndex: -1,
42	background: theme.palette.text.alwaysWhite,
43	},
44	background: {
45	position: "absolute",
46	top: 0,
47	left: 0,
48	width: "100%",
49	height: "100%",
50	opacity: 0,
51	transition: "opacity 0.5s ease",
52	backgroundSize: "cover",
53	backgroundRepeat: "no-repeat",
54	backgroundBlendMode: "darken",
55	},
56	backgroundActive: {
57	opacity: 1,
58	},
59	darkText: {
60	color: theme.palette.givingSeason.primary,
61	"& $line, & $timelineDot": {
62	background: theme.palette.givingSeason.primary,
63	},
64	},
65	banner: {
66	fontFamily: theme.palette.fonts.sansSerifStack,
67	fontSize: 15,
68	fontWeight: 700,
69	lineHeight: "150%",
70	letterSpacing: "0.98px",
71	textAlign: "center",
72	margin: "-4px 0 16px 0",
73	[theme.breakpoints.up(GIVING_SEASON_MOBILE_WIDTH)]: {
74	display: "none",
75	},
76	},
77	content: {
78	transition: "color 0.5s ease",
79	maxWidth: GIVING_SEASON_DESKTOP_WIDTH - 10,
80	margin: "0 auto",
81	},
82	line: {
83	width: "100%",
84	height: 1,
85	opacity: 0.6,
86	background: theme.palette.text.alwaysWhite,
87	transition: "background 0.5s ease",
88	},
89	timeline: {
90	display: "flex",
91	justifyContent: "space-between",
92	gap: "24px",
93	paddingTop: 14,
94	marginTop: -12,
95	overflow: "scroll hidden",
96	scrollbarWidth: "none",
97	"-ms-overflow-style": "none",
98	"&::-webkit-scrollbar": {
99	display: "none",
100	},
101	[theme.breakpoints.down(GIVING_SEASON_DESKTOP_WIDTH)]: {
102	paddingLeft: 24,
103	paddingRight: 24,
104	},
105	},
106	timelineEvent: {
107	cursor: "pointer",
108	position: "relative",
109	zIndex: theme.zIndexes.header + 1,
110	margin: "12px 0",
111	fontWeight: 400,
112	whiteSpace: "nowrap",
113	userSelect: "none",
114	opacity: 0.6,
115	transition: "opacity 0.5s ease",
116	"&:hover": {
117	opacity: 1,
118	},
119	// Use `after` to overlay the same text but with the higher font weight as
120	// if it's selected, even if it's not. This means that the size of each
121	// title won't change when they switch between active/inactive.
122	"&:after": {
123	display: "block",
124	content: "attr(data-title)",
125	fontWeight: 600,
126	height: 1,
127	color: "transparent",
128	overflow: "hidden",
129	visibility: "hidden",
130	},
131	"&:first-child": {
132	scrollMarginLeft: "1000px",
133	},
134	"&:last-child": {
135	scrollMarginRight: "1000px",
136	},
137	},
138	timelineEventSelected: {
139	fontWeight: 600,
140	opacity: 1,
141	},
142	timelineDot: {
143	position: "absolute",
144	top: -20.5,
145	left: `calc(50% - ${DOT_SIZE / 2}px)`,
146	width: DOT_SIZE,
147	height: DOT_SIZE,
148	borderRadius: "50%",
149	background: theme.palette.text.alwaysWhite,
150	transition: "background 0.5s ease",
151	},
152	mainContainer: {
153	display: "flex",
154	alignItems: "center",
155	[theme.breakpoints.down(GIVING_SEASON_DESKTOP_WIDTH)]: {
156	padding: "0 24px",
157	},
158	},
159	detailsContainer: {
160	whiteSpace: "nowrap",
161	overflow: "scroll hidden",
162	scrollSnapType: "x mandatory",
163	scrollbarWidth: "none",
164	"-ms-overflow-style": "none",
165	"&::-webkit-scrollbar": {
166	display: "none",
167	},
168	},
169	eventDetails: {
170	display: "inline-block",
171	verticalAlign: "middle",
172	width: "100%",
173	scrollSnapAlign: "start",
174	paddingTop: 24,
175	paddingBottom: 40,
176	[theme.breakpoints.down(GIVING_SEASON_MOBILE_WIDTH)]: {
177	paddingTop: 12,
178	paddingBottom: 24,
179	},
180	},
181	eventDate: {
182	maxWidth: 470,
183	marginBottom: 8,
184	},
185	eventName: {
186	maxWidth: 640,
187	fontSize: 40,
188	fontWeight: 700,
189	marginBottom: 12,
190	whiteSpace: "wrap",
191	},
192	eventDescription: {
193	maxWidth: 470,
194	lineHeight: "140%",
195	whiteSpace: "wrap",
196	"& a": {
197	textDecoration: "underline",
198	"&:hover": {
199	textDecoration: "underline",
200	},
201	},
202	},
203	fund: {
204	width: 260,
205	minWidth: 260,
206	padding: 16,
207	marginTop: 8,
208	marginBottom: 24,
209	background: theme.palette.givingSeason.electionFundBackground,
210	borderRadius: theme.borderRadius.default,
211	[theme.breakpoints.down(GIVING_SEASON_MOBILE_WIDTH)]: {
212	display: "none",
213	},
214	},
215	fundTitle: {
216	fontSize: 18,
217	fontWeight: 700,
218	letterSpacing: "-0.18px",
219	marginBottom: 12,
220	},
221	fundInfo: {
222	marginBottom: 12,
223	lineHeight: "140%",
224	whiteSpace: "wrap",
225	"& a": {
226	textDecoration: "underline",
227	"&:hover": {
228	textDecoration: "underline",
229	},
230	},
231	},
232	fundRaised: {
233	fontSize: 16,
234	fontWeight: 500,
235	lineHeight: "140%",
236	marginBottom: 4,
237	},
238	fundBarContainer: {
239	width: "100%",
240	height: 12,
241	marginBottom: 20,
242	background: theme.palette.givingSeason.electionFundBackground,
243	borderRadius: theme.borderRadius.small,
244	overflow: "hidden",
245	},
246	fundBar: {
247	height: "100%",
248	background: theme.palette.text.alwaysWhite,
249	transition: "width 0.5s ease",
250	},
251	fundAmount: {
252	fontWeight: 700,
253	},
254	donateButton: {
255	width: "100%",
256	color: theme.palette.givingSeason.primary,
257	background: theme.palette.text.alwaysWhite,
258	transition: "opacity 0.3s ease",
259	"&:hover": {
260	background: theme.palette.text.alwaysWhite,
261	opacity: 0.85,
262	},
263	},
264	});
265
266	const formatDate = (start: Moment, end: Moment) => {	1✔
267	const endFormat = start.month() === end.month() ? "D" : "MMM D";	×
268	return `${start.format("MMM D")} - ${end.format(endFormat)}`;	×
269	}
270
271	const GivingSeason2024Banner = ({classes}: {	1✔
272	classes: ClassesType<typeof styles>,
273	}) => {
274	const {
275	events,
276	currentEvent,
277	selectedEvent,
278	setSelectedEvent,
279	amountRaised,
280	amountTarget,
281	} = useGivingSeasonEvents();	×
282	const currentUser = useCurrentUser();	×
283	const [timelineRef, setTimelineRef] = useState<HTMLDivElement \| null>(null);	×
284	const [detailsRef, setDetailsRef] = useState<HTMLDivElement \| null>(null);	×
285	const [lastTimelineClick, setLastTimelineClick] = useState<number>();	×
286	const didInitialScroll = useRef(false);	×
287
NEW 288	const amountRaisedPlusMatched = amountRaised + Math.min(amountRaised, 5000);	×
NEW 289	const fundPercent = Math.round((amountRaisedPlusMatched / amountTarget) * 100);	×
290
291	useEffect(() => {	×
292	if (!detailsRef) {	×
293	return;	×
294	}
295	const observer = new IntersectionObserver((entries) => {	×
296	for (const entry of entries) {	×
297	if (entry.isIntersecting) {	×
298	const id = parseInt(entry.target.getAttribute("data-event-id") ?? "");	×
299	if (Number.isSafeInteger(id) && events[id]) {	×
300	setSelectedEvent(events[id]);	×
301	}
302	}
303	}
304	}, {threshold: 0.5});
305	for (const child of Array.from(detailsRef.children)) {	×
306	observer.observe(child);	×
307	}
308	return () => observer.disconnect();	×
309	}, [timelineRef, detailsRef, events, setSelectedEvent]);
310
311	useEffect(() => {	×
312	// Disable for a short period after clicking an event to prevent spurious
313	// scrolling on mobile
314	if (lastTimelineClick && Date.now() - lastTimelineClick < 150) {	×
315	return;	×
316	}
317	const id = events.findIndex((event) => event === selectedEvent);	×
318	setTimeout(() => {	×
319	timelineRef?.querySelector(`[data-event-id="${id}"]`)?.scrollIntoView({	×
320	behavior: "smooth",
321	block: "nearest",
322	inline: "nearest",
323	});
324	}, 0);
325	}, [timelineRef, selectedEvent, lastTimelineClick, events]);
326
327	const onClickTimeline = useCallback((index: number) => {	×
328	setLastTimelineClick(Date.now());	×
329	setTimeout(() => {	×
330	detailsRef?.querySelector(`[data-event-id="${index}"]`)?.scrollIntoView({	×
331	behavior: "smooth",
332	block: "nearest",
333	inline: "start",
334	});
335	}, 0);
336	}, [detailsRef]);
337
338	useEffect(() => {	×
339	if (currentEvent && detailsRef && !didInitialScroll.current) {	×
340	didInitialScroll.current = true;	×
341	onClickTimeline(events.findIndex(({name}) => name === currentEvent.name));	×
342	}
343	}, [events, onClickTimeline, currentEvent, detailsRef]);
344
345	const {EAButton} = Components;	×
346	return (	×
347	<div className={classNames(
348	classes.root,
349	selectedEvent.darkText && classes.darkText,	×
350	)}>
351	<div className={classes.backgrounds}>
352	{events.map(({name, background}) => (
353	<div	×
354	key={name}
355	style={{backgroundImage: `url(${background})`}}
356	className={classNames(
357	classes.background,
358	name === selectedEvent.name && classes.backgroundActive,	×
359	)}
360	/>
361	))}
362	</div>
363	<div className={classes.banner}>
364	<Link to="/posts/srZEX2r9upbwfnRKw/giving-season-2024-announcement">
365	GIVING SEASON 2024
366	</Link>
367	</div>
368	<div className={classes.line} />
369	<div className={classes.content}>
370	<div className={classes.timeline} ref={setTimelineRef}>
371	{events.map((event, i) => (
372	<div	×
373	key={event.name}
374	data-event-id={i}
375	data-title={event.name}
376	onClick={onClickTimeline.bind(null, i)}
377	className={classNames(
378	classes.timelineEvent,
379	selectedEvent === event && classes.timelineEventSelected,	×
380	)}
381	>
382	{event.name}
383	{event === currentEvent &&	×
384	<div className={classes.timelineDot} />
385	}
386	</div>
387	))}
388	</div>
389	<div className={classes.mainContainer}>
390	<div className={classes.detailsContainer} ref={setDetailsRef}>
391	{events.map(({name, description, start, end}, i) => (
392	<div className={classes.eventDetails} data-event-id={i} key={name}>	×
393	<div className={classes.eventDate}>{formatDate(start, end)}</div>
394	<div className={classes.eventName}>{name}</div>
395	<div className={classes.eventDescription}>{description}</div>
396	</div>
397	))}
398	</div>
399	<div className={classes.fund}>
400	<div className={classes.fundInfo}>
401	Donate to the fund to boost the value of the{" "}
402	<Link to="/posts/2WbDAAtGdyAEfcw6S/donation-election-fund-announcement-matching-rewards-and-faq">
403	Donation Election
404	</Link>.
405	</div>
406	<div className={classes.fundRaised}>
407	<span className={classes.fundAmount}>
408	${formatStat(Math.round(amountRaisedPlusMatched))}
409	</span> raised
410	</div>
411	<div className={classes.fundBarContainer}>
412	<div
413	style={{width: `${fundPercent}%`}}
414	className={classes.fundBar}
415	/>
416	</div>
417	<EAButton
418	href={getDonateLink(currentUser)}
419	className={classes.donateButton}
420	>
421	Donate
422	</EAButton>
423	</div>
424	</div>
425	</div>
426	</div>
427	);
428	}
429
430	const GivingSeason2024BannerComponent = registerComponent(	1✔
431	"GivingSeason2024Banner",
432	GivingSeason2024Banner,
433	{styles},
434	);
435
436	declare global {
437	interface ComponentTypes {
438	GivingSeason2024Banner: typeof GivingSeason2024BannerComponent
439	}
440	}

ForumMagnum / ForumMagnum / 11702185967

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