From 7a70842daef411ad1363ea2fd3712a9d666025dd Mon Sep 17 00:00:00 2001
From: gazizova-vlada <vlada.gazizova@onlyoffice.com>
Date: Wed, 23 Nov 2022 14:24:29 +0300
Subject: [PATCH] Web:Client:Add event keyup.

---
 .../common/sub-components/colorSchemeDialog.js         | 10 +++++++++-
 .../common/sub-components/modalDialogDelete.js         | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
index adaa83c989..f351fb8181 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ModalDialog from "@docspace/components/modal-dialog";
 import styled from "styled-components";
 import Button from "@docspace/components/button";
@@ -74,6 +74,14 @@ const ColorSchemeDialog = (props) => {
     currentColorButtons,
   } = props;
 
+  const onKeyPress = (e) =>
+    (e.key === "Esc" || e.key === "Escape") && onClose();
+
+  useEffect(() => {
+    window.addEventListener("keyup", onKeyPress);
+    return () => window.removeEventListener("keyup", onKeyPress);
+  });
+
   return (
     <StyledComponent
       visible={visible}
diff --git a/packages/client/src/pages/PortalSettings/categories/common/sub-components/modalDialogDelete.js b/packages/client/src/pages/PortalSettings/categories/common/sub-components/modalDialogDelete.js
index b207abeb0a..ff223f42ec 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/sub-components/modalDialogDelete.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/sub-components/modalDialogDelete.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ModalDialog from "@docspace/components/modal-dialog";
 import Button from "@docspace/components/button";
 import styled from "styled-components";
@@ -13,6 +13,14 @@ const StyledModalDialogDelete = styled(ModalDialog)`
 const ModalDialogDelete = (props) => {
   const { visible, onClose, onClickDelete, t } = props;
 
+  const onKeyPress = (e) =>
+    (e.key === "Esc" || e.key === "Escape") && onClose();
+
+  useEffect(() => {
+    window.addEventListener("keyup", onKeyPress);
+    return () => window.removeEventListener("keyup", onKeyPress);
+  });
+
   return (
     <StyledModalDialogDelete
       visible={visible}