diff --git a/web/components/menu-item.react.js b/web/components/menu-item.react.js --- a/web/components/menu-item.react.js +++ b/web/components/menu-item.react.js @@ -10,25 +10,36 @@ import Button from './button.react.js'; import css from './menu.css'; -type MenuItemProps = { +type MenuItemPropsBase = { +onClick?: () => mixed, - +icon: Icon, +text: string, +dangerous?: boolean, }; +type MenuItemProps = + | { + ...MenuItemPropsBase, + +icon: Icon, + } + | { + ...MenuItemPropsBase, + +iconComponent: React.Node, + }; function MenuItem(props: MenuItemProps): React.Node { - const { onClick, icon, text, dangerous } = props; + const { onClick, icon, iconComponent, text, dangerous } = props; const itemClasses = classNames(css.menuAction, { [css.menuActionDangerous]: dangerous, }); + let menuItemIcon = iconComponent; + if (icon) { + menuItemIcon = ; + } + return ( ); diff --git a/web/components/menu.css b/web/components/menu.css --- a/web/components/menu.css +++ b/web/components/menu.css @@ -12,6 +12,7 @@ flex-direction: column; background-color: var(--menu-bg); color: var(--menu-color); + stroke: var(--menu-color); border-radius: 4px; padding: 4px 0; line-height: var(--line-height-text); @@ -28,6 +29,7 @@ font-size: var(--xs-font-12); background-color: var(--menu-bg-light); color: var(--menu-color-light); + stroke: var(--menu-color-light); top: 0; right: 5px; } @@ -36,6 +38,7 @@ font-size: var(--m-font-16); background-color: var(--menu-bg-light); color: var(--menu-color); + stroke: var(--menu-color); top: 24px; } @@ -50,6 +53,7 @@ button.menuAction:hover { color: var(--menu-color-hover); + stroke: var(--menu-color-hover); } div.menuActionIcon { @@ -67,9 +71,11 @@ button.menuActionDangerous { color: var(--menu-color-dangerous); + stroke: var(--menu-color-dangerous); } button.menuActionDangerous:hover { color: var(--menu-color-dangerous-hover); + stroke: var(--menu-color-dangerous-hover); } hr.separator {