xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix user menu styles

Browse source
This commit is contained in:
Robert Long 2022-01-18 13:34:42 -08:00
parent d6567658c0
commit 97ab7ee2c0
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/Menu.module.css
View file

@ -16,7 +16,7 @@
} }
.menuItem > * { .menuItem > * {
margin-right: 10px; margin: 0 10px 0 0;
} }
.menuItem > :last-child { .menuItem > :last-child {

7
src/UserMenu.jsx
View file

@ -10,6 +10,7 @@ import { ReactComponent as LoginIcon } from "./icons/Login.svg";
import { ReactComponent as LogoutIcon } from "./icons/Logout.svg"; import { ReactComponent as LogoutIcon } from "./icons/Logout.svg";
import styles from "./UserMenu.module.css"; import styles from "./UserMenu.module.css";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { Body } from "./typography/Typography";
export function UserMenu({ export function UserMenu({
disableLogout, disableLogout,
@ -83,9 +84,9 @@ export function UserMenu({
{(props) => ( {(props) => (
<Menu {...props} label="User menu" onAction={onAction}> <Menu {...props} label="User menu" onAction={onAction}>
{items.map(({ key, icon: Icon, label }) => ( {items.map(({ key, icon: Icon, label }) => (
<Item key={key} textValue={label}> <Item key={key} textValue={label} className={styles.menuItem}>
<Icon /> <Icon width={24} height={24} className={styles.menuIcon} />
<span>{label}</span> <Body overflowEllipsis>{label}</Body>
</Item> </Item>
))} ))}
</Menu> </Menu>

5
src/UserMenu.module.css
View file

@ -1,3 +1,8 @@
.menuIcon {
width: 24px;
height: 24px;
}
.userButton svg * { .userButton svg * {
fill: var(--textColor1); fill: var(--textColor1);
} }