diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.js b/frontend/app/components/ui/ItemMenu/ItemMenu.js
index b4b7170f7..cd1dff700 100644
--- a/frontend/app/components/ui/ItemMenu/ItemMenu.js
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.js
@@ -3,11 +3,21 @@ import styles from './itemMenu.css';
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
import cn from 'classnames';
import { Tooltip } from 'react-tippy';
+
export default class ItemMenu extends React.PureComponent {
state = {
displayed: false,
};
+ handleEsc = (e) => e.key === 'Escape' && this.closeMenu()
+
+ componentDidMount() {
+ document.addEventListener("keydown", this.handleEsc, false);
+ }
+ componentWillUnmount() {
+ document.removeEventListener("keydown", this.handleEsc, false);
+ }
+
onClick = callback => (e) => {
e.stopPropagation();
callback(e);
@@ -44,7 +54,7 @@ export default class ItemMenu extends React.PureComponent {
{ items.filter(({ hidden }) => !hidden).map(({ onClick, text, icon, disabled = false, disabledMessage = '' }) => (
@@ -63,7 +73,7 @@ export default class ItemMenu extends React.PureComponent {
position="left"
disabled={ !disabled }
>
-
+
{ icon && (
diff --git a/frontend/app/components/ui/ItemMenu/itemMenu.css b/frontend/app/components/ui/ItemMenu/itemMenu.css
index f6095b8b3..8c892a8e1 100644
--- a/frontend/app/components/ui/ItemMenu/itemMenu.css
+++ b/frontend/app/components/ui/ItemMenu/itemMenu.css
@@ -23,6 +23,16 @@
background-color: #fff;
}
}
+
+.menuDim {
+ border: none!important;
+ box-shadow: 0 1px 3px 0 $gray-light!important;
+
+ & .menuItem {
+ color: $gray-dark!important;
+ }
+}
+
.menu {
&[data-displayed=false] {
display: none;
@@ -36,7 +46,9 @@
min-width: 150px;
background-color: $white;
border-radius: 3px;
- box-shadow: 0px 1px 3px 0 $gray-light;
+ border: 1px solid rgba(34,36,38,.15);
+ box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);
+
& .menuItem {
cursor: pointer;
@@ -44,7 +56,6 @@
display: flex;
align-items: center;
border-bottom: 1px solid $gray-light;
- color: $gray-dark;
& .iconWrapper {
width: 13px;