From 6a801a2026fc4c33f8a36f0b3e3646c87c83d70a Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 20 May 2022 13:38:11 +0200
Subject: [PATCH] fix(ui): make menuitem configurable

---
 frontend/app/components/ui/ItemMenu/ItemMenu.js  | 14 ++++++++++++--
 frontend/app/components/ui/ItemMenu/itemMenu.css | 15 +++++++++++++--
 2 files changed, 25 insertions(+), 4 deletions(-)

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 {
           </div>
         </OutsideClickDetectingDiv>
         <div
-          className={ styles.menu }
+          className={ cn(styles.menu, { [styles.menuDim]: !bold }) }
           data-displayed={ displayed }
         >
           { 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 }
               >
-                  <div className={cn(styles.menuItem, {'disabled' : disabled })}>
+                  <div className={cn(styles.menuItem, 'text-neutral-700', {'disabled' : disabled })}>
                     { icon && (
                         <div className={ styles.iconWrapper }>
                           <Icon name={ icon } size="13" color="gray-dark" />
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;