diff --git a/src/components/context-menu/context-menu.css b/src/components/context-menu/context-menu.css index 32fc00f226f7e65b52649e1be6ab693d15e2b28a..37512018ed244d193c96d11b4f74ca04b1188525 100644 --- a/src/components/context-menu/context-menu.css +++ b/src/components/context-menu/context-menu.css @@ -17,23 +17,20 @@ z-index: $z-index-context-menu; } -.menu-item, .menu-item-bordered { +.menu-item { padding: 8px 12px; white-space: nowrap; cursor: pointer; transition: 0.1s ease; } -.menu-item-bordered { - border-top: 3px solid $text-primary; -} - -.menu-item:hover, .menu-item-bordered:hover { +.menu-item:hover { + background: $motion-primary; color: white; } -.menu-item:hover { - background: $motion-primary; +.menu-item-bordered { + border-top: 2px solid $text-primary-transparent; } .menu-item-bordered:hover { diff --git a/src/components/context-menu/context-menu.jsx b/src/components/context-menu/context-menu.jsx index 445ac222eb62557d1539c238e15ceae573cb0bd8..677f8944190d3b4c0b208a56f2243b418bbfcddd 100644 --- a/src/components/context-menu/context-menu.jsx +++ b/src/components/context-menu/context-menu.jsx @@ -1,5 +1,6 @@ import React from 'react'; import {ContextMenu, MenuItem} from 'react-contextmenu'; +import classNames from 'classnames'; import styles from './context-menu.css'; @@ -20,7 +21,7 @@ const StyledMenuItem = props => ( const BorderedMenuItem = props => ( <MenuItem {...props} - attributes={{className: styles.menuItemBordered}} + attributes={{className: classNames(styles.menuItem, styles.menuItemBordered)}} /> );