r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

💄 update styling for dropdown with <IconButton /> component

Browse source
This commit is contained in:
ghalestrilo 2020-08-12 10:25:41 -03:00
parent 32efc40298
commit 589bdd5a11
1 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/components/Dropdown.jsx
View file

@ -36,9 +36,7 @@ const DropdownWrapper = styled.ul`
background-color: ${prop('Button.hover.background')};
color: ${prop('Button.hover.foreground')};
& button, & a {
color: ${prop('Button.hover.foreground')};
}
* { color: ${prop('Button.hover.foreground')}; }
}
li {
@ -48,17 +46,21 @@ const DropdownWrapper = styled.ul`
align-items: center;
& button,
& button span,
& a {
color: ${prop('primaryTextColor')};
width: 100%;
text-align: left;
justify-content: left;
padding: ${remSize(8)} ${remSize(16)};
}
& button span { padding: 0px }
}
`;
// TODO: Add Icon to the left of the items in the menu
const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
// const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
const Dropdown = ({ items, align }) => (
<DropdownWrapper align={align} >
@ -67,7 +69,7 @@ const Dropdown = ({ items, align }) => (
title, icon, href, action
}) => (
<li key={`nav-${title && title.toLowerCase()}`}>
{MaybeIcon(icon, `Navigate to ${title}`)}
{/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
{href
? <IconButton to={href}>{title}</IconButton>
: <IconButton onClick={() => action()}>{title}</IconButton>}