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