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 > * {
margin-right: 10px;
margin: 0 10px 0 0;
}
.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 styles from "./UserMenu.module.css";
import { useLocation } from "react-router-dom";
import { Body } from "./typography/Typography";
export function UserMenu({
disableLogout,
@ -83,9 +84,9 @@ export function UserMenu({
{(props) => (
<Menu {...props} label="User menu" onAction={onAction}>
{items.map(({ key, icon: Icon, label }) => (
<Item key={key} textValue={label}>
<Icon />
<span>{label}</span>
<Item key={key} textValue={label} className={styles.menuItem}>
<Icon width={24} height={24} className={styles.menuIcon} />
<Body overflowEllipsis>{label}</Body>
</Item>
))}
</Menu>

5
src/UserMenu.module.css
View file

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