9003335213

Committed 08 May 2024 02:12PM UTC coverage: 31.825% (-0.1%) from 31.93%

Build # 9003335213

Build Type

Pull #9244

github

Committed by

oetherington

Commit Message

Fix banner alignment on mobile

Pull Request Pull Request #9244: [EA] Emoji Banner May '24

Run Details

4768 of 39019 branches covered (12.22%)

Branch coverage included in aggregate %.

52 of 215 new or added lines in 11 files covered. (24.19%)

2 existing lines in 2 files now uncovered.

27688 of 62963 relevant lines covered (43.98%)

176.94 hits per line

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

42.11

/packages/lesswrong/components/users/UsersAccountMenu.tsx

import React, { MouseEvent, useCallback, useState } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import Popover from '@material-ui/core/Popover';
import Button from '@material-ui/core/Button';
import { useTracking } from '../../lib/analyticsEvents';
import { isFriendlyUI } from '../../themes/forumTheme';
import { blackBarTitle } from '../../lib/publicSettings';
import { useLoginPopoverContext } from '../hooks/useLoginPopoverContext';

const styles = (theme: ThemeType) => ({
  root: {
    marginTop: isFriendlyUI ? undefined : 5,
  },
  userButton: {
    fontSize: '14px',
    fontWeight: isFriendlyUI ? undefined : 400,
    opacity: .8,
    color: blackBarTitle.get() ? theme.palette.text.alwaysWhite : theme.palette.header.text,
  },
  login: {
    marginLeft: 12,
    marginRight: 8
  },
  signUp: {
    display: 'inline-block',
    marginRight: 8,
    '@media (max-width: 540px)': {
      display: 'none'
    }
  },
})

const EAUsersAccountMenu = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const {onLogin, onSignup} = useLoginPopoverContext();
  const {EAButton, EALoginPopover} = Components;
  return (
    <div className={classes.root}>
      <EAButton
        style="grey"
        onClick={onLogin}
        className={classes.login}
      >
        Login
      </EAButton>
      <EAButton
        onClick={onSignup}
        className={classes.signUp}
      >
        Sign up
      </EAButton>
      <EALoginPopover />
    </div>
  );
}

const LWUsersAccountMenu = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const {captureEvent} = useTracking();
  const [open, setOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

  const handleClick = useCallback((ev: MouseEvent) => {
    ev.preventDefault();
    captureEvent("loginButtonClicked", {open: true});
    setOpen(true);
    setAnchorEl(ev.currentTarget as HTMLElement);
  }, [captureEvent]);

  const handleRequestClose = useCallback(() => {
    captureEvent("loginButtonClicked", {open: false});
    setOpen(false);
  }, [captureEvent]);

  const {LoginForm} = Components;
  return (
    <div className={classes.root}>
      <Button onClick={handleClick}>
        <span className={classes.userButton}>
          Login
        </span>
      </Button>
      <Popover
        open={open}
        anchorEl={anchorEl}
        anchorOrigin={{horizontal: "left", vertical: "bottom"}}
        onClose={handleRequestClose}
      >
        {open && <LoginForm />}
      </Popover>
    </div>
  );
}

const UsersAccountMenuComponent = registerComponent(
  "UsersAccountMenu",
  isFriendlyUI ? EAUsersAccountMenu : LWUsersAccountMenu,
  {styles},
);

declare global {
  interface ComponentTypes {
    UsersAccountMenu: typeof UsersAccountMenuComponent
  }
}

1	import React, { MouseEvent, useCallback, useState } from 'react';	1✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import Popover from '@material-ui/core/Popover';	1✔
4	import Button from '@material-ui/core/Button';	1✔
5	import { useTracking } from '../../lib/analyticsEvents';	1✔
6	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
7	import { blackBarTitle } from '../../lib/publicSettings';	1✔
8	import { useLoginPopoverContext } from '../hooks/useLoginPopoverContext';	1✔
9
10	const styles = (theme: ThemeType) => ({	1✔
11	root: {
12	marginTop: isFriendlyUI ? undefined : 5,	1!
13	},
14	userButton: {
15	fontSize: '14px',
16	fontWeight: isFriendlyUI ? undefined : 400,	1!
17	opacity: .8,
18	color: blackBarTitle.get() ? theme.palette.text.alwaysWhite : theme.palette.header.text,	1!
19	},
20	login: {
21	marginLeft: 12,
22	marginRight: 8
23	},
24	signUp: {
25	display: 'inline-block',
26	marginRight: 8,
27	'@media (max-width: 540px)': {
28	display: 'none'
29	}
30	},
31	})
32
33	const EAUsersAccountMenu = ({classes}: {	1✔
34	classes: ClassesType<typeof styles>,
35	}) => {
NEW 36	const {onLogin, onSignup} = useLoginPopoverContext();	×
UNCOV 37	const {EAButton, EALoginPopover} = Components;	×
38	return (	×
39	<div className={classes.root}>
40	<EAButton
41	style="grey"
42	onClick={onLogin}
43	className={classes.login}
44	>
45	Login
46	</EAButton>
47	<EAButton
48	onClick={onSignup}
49	className={classes.signUp}
50	>
51	Sign up
52	</EAButton>
53	<EALoginPopover />
54	</div>
55	);
56	}
57
58	const LWUsersAccountMenu = ({classes}: {	1✔
59	classes: ClassesType<typeof styles>,
60	}) => {
61	const {captureEvent} = useTracking();	×
62	const [open, setOpen] = useState(false);	×
63	const [anchorEl, setAnchorEl] = useState<HTMLElement \| null>(null);	×
64
65	const handleClick = useCallback((ev: MouseEvent) => {	×
66	ev.preventDefault();	×
67	captureEvent("loginButtonClicked", {open: true});	×
68	setOpen(true);	×
69	setAnchorEl(ev.currentTarget as HTMLElement);	×
70	}, [captureEvent]);
71
72	const handleRequestClose = useCallback(() => {	×
73	captureEvent("loginButtonClicked", {open: false});	×
74	setOpen(false);	×
75	}, [captureEvent]);
76
77	const {LoginForm} = Components;	×
78	return (	×
79	<div className={classes.root}>
80	<Button onClick={handleClick}>
81	<span className={classes.userButton}>
82	Login
83	</span>
84	</Button>
85	<Popover
86	open={open}
87	anchorEl={anchorEl}
88	anchorOrigin={{horizontal: "left", vertical: "bottom"}}
89	onClose={handleRequestClose}
90	>
91	{open && <LoginForm />}	×
92	</Popover>
93	</div>
94	);
95	}
96
97	const UsersAccountMenuComponent = registerComponent(	1✔
98	"UsersAccountMenu",
99	isFriendlyUI ? EAUsersAccountMenu : LWUsersAccountMenu,	1!
100	{styles},
101	);
102
103	declare global {
104	interface ComponentTypes {
105	UsersAccountMenu: typeof UsersAccountMenuComponent
106	}
107	}

ForumMagnum / ForumMagnum / 9003335213

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