From a59a076ffe26d57d254aff3fdb65c81f1bdceda4 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Tue, 27 Aug 2024 18:20:03 +0300
Subject: [PATCH] Shared: ModalDialog: Removed backdrop changes when swiping.

---
 .../modal-dialog/sub-components/Modal.tsx        |  1 -
 .../sub-components/ModalBackdrop.tsx             | 16 +++-------------
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/packages/shared/components/modal-dialog/sub-components/Modal.tsx b/packages/shared/components/modal-dialog/sub-components/Modal.tsx
index 77ef900f47..a29a2eac34 100644
--- a/packages/shared/components/modal-dialog/sub-components/Modal.tsx
+++ b/packages/shared/components/modal-dialog/sub-components/Modal.tsx
@@ -131,7 +131,6 @@ const Modal = ({
         className={visible ? "modal-backdrop-active backdrop-active" : ""}
         visible
         zIndex={zIndex}
-        modalSwipeOffset={modalSwipeOffset}
       >
         <Dialog
           id="modal-onMouseDown-close"
diff --git a/packages/shared/components/modal-dialog/sub-components/ModalBackdrop.tsx b/packages/shared/components/modal-dialog/sub-components/ModalBackdrop.tsx
index 6399d742d4..131e6ef912 100644
--- a/packages/shared/components/modal-dialog/sub-components/ModalBackdrop.tsx
+++ b/packages/shared/components/modal-dialog/sub-components/ModalBackdrop.tsx
@@ -42,13 +42,7 @@ const backdropBackground = (props: {
   return `rgba(${r}, ${g}, ${b}, ${a + swipeOffset * (a / 120)})`;
 };
 
-const StyledModalBackdrop = styled.div.attrs(
-  (props: { theme: TTheme; modalSwipeOffset?: number; zIndex?: number }) => ({
-    style: {
-      background: backdropBackground(props),
-    },
-  }),
-)<{ modalSwipeOffset?: number; zIndex?: number }>`
+const StyledModalBackdrop = styled.div<{ zIndex?: number }>`
   display: block;
   height: 100%;
   min-height: fill-available;
@@ -59,6 +53,7 @@ const StyledModalBackdrop = styled.div.attrs(
   left: 0;
   top: 0;
 
+  background: ${(props) => props.theme.backdrop.backgroundColor};
   z-index: ${(props) => props.zIndex};
 
   @media ${mobile} {
@@ -75,15 +70,10 @@ const StyledModalBackdrop = styled.div.attrs(
 const ModalBackdrop = ({
   className,
   zIndex,
-  modalSwipeOffset,
   children,
 }: ModalDialogBackdropProps) => {
   return (
-    <StyledModalBackdrop
-      zIndex={zIndex}
-      className={className}
-      modalSwipeOffset={modalSwipeOffset}
-    >
+    <StyledModalBackdrop zIndex={zIndex} className={className}>
       {children}
     </StyledModalBackdrop>
   );