From e7af5267f672f4f1307573f1ed3b6c59ae60f2b3 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Tue, 20 Aug 2024 18:44:51 +0300
Subject: [PATCH 01/41] Shared: Components: Modal-dialog: An icon has been
 added to the dialog.

---
 .../sub-components/CloseButton.tsx            | 50 +------------------
 .../modal-dialog/sub-components/Modal.tsx     | 37 +++++++-------
 2 files changed, 21 insertions(+), 66 deletions(-)

diff --git a/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx b/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
index 5e11b8c91b..e9f21603c3 100644
--- a/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
+++ b/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
@@ -25,12 +25,11 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 
 import CrossIconReactSvgUrl from "PUBLIC_DIR/images/icons/17/cross.react.svg?url";
 
 import { IconButton } from "../../icon-button";
-import { mobile } from "../../../utils";
 import { Base } from "../../../themes";
 
 import { ModalDialogCloseButtonProps } from "../ModalDialog.types";
@@ -42,54 +41,9 @@ const StyledCloseButtonWrapper = styled.div<{
   width: 17px;
   height: 17px;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin-left: auto;
 
   cursor: pointer;
-  position: absolute;
-
-  ${(props) =>
-    props.currentDisplayType === "modal"
-      ? css`
-          top: 18px;
-
-          ${props.theme.interfaceDirection === "rtl"
-            ? `left: -30px;`
-            : `right: -30px;`}
-
-          @media ${mobile} {
-            ${props.theme.interfaceDirection === "rtl"
-              ? `left: 10px;`
-              : `right: 10px;`}
-            top: -27px;
-          }
-        `
-      : css`
-          top: 18px;
-          ${props.theme.interfaceDirection === "rtl"
-            ? `right: -27px;`
-            : `left: -27px;`}
-          @media ${mobile} {
-            top: -27px;
-            ${props.theme.interfaceDirection === "rtl"
-              ? css`
-                  right: auto;
-                  left: 10px;
-                `
-              : css`
-                  left: auto;
-                  right: 10px;
-                `}
-          }
-        `}
-
-  .close-button, .close-button:hover {
-    cursor: pointer;
-    path {
-      stroke: ${(props) => props.theme.modalDialog.closeButton.fillColor};
-    }
-  }
 `;
 
 StyledCloseButtonWrapper.defaultProps = { theme: Base };
diff --git a/packages/shared/components/modal-dialog/sub-components/Modal.tsx b/packages/shared/components/modal-dialog/sub-components/Modal.tsx
index cbcd04703d..2099bcd667 100644
--- a/packages/shared/components/modal-dialog/sub-components/Modal.tsx
+++ b/packages/shared/components/modal-dialog/sub-components/Modal.tsx
@@ -158,12 +158,6 @@ const Modal = ({
             embedded={embedded}
             ref={contentRef}
           >
-            {isCloseable && (
-              <CloseButton
-                currentDisplayType={currentDisplayType}
-                onClick={onClose}
-              />
-            )}
             {isLoading ? (
               currentDisplayType === "modal" ? (
                 <DialogSkeleton
@@ -183,16 +177,16 @@ const Modal = ({
               containerComponent
             ) : (
               <FormWrapper withForm={withForm || false}>
-                {header && (
-                  <StyledHeader
-                    id="modal-header-swipe"
-                    className={
-                      classNames(["modal-header", headerProps.className]) ||
-                      "modal-header"
-                    }
-                    {...headerProps}
-                    currentDisplayType={currentDisplayType}
-                  >
+                <StyledHeader
+                  id="modal-header-swipe"
+                  className={
+                    classNames(["modal-header", headerProps.className]) ||
+                    "modal-header"
+                  }
+                  {...headerProps}
+                  currentDisplayType={currentDisplayType}
+                >
+                  {header && (
                     <Heading
                       level={1}
                       className="heading"
@@ -201,8 +195,15 @@ const Modal = ({
                     >
                       {headerComponent}
                     </Heading>
-                  </StyledHeader>
-                )}
+                  )}
+                  {isCloseable && (
+                    <CloseButton
+                      currentDisplayType={currentDisplayType}
+                      onClick={onClose}
+                    />
+                  )}
+                </StyledHeader>
+
                 {body && (
                   <StyledBody
                     className={

From 925cbc7be7a84b7f27a49f0d8859a4465edd108c Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Wed, 21 Aug 2024 10:47:50 +0300
Subject: [PATCH 02/41] Shared: Components: Fixed styles.

---
 .../components/modal-dialog/sub-components/CloseButton.tsx   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx b/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
index e9f21603c3..5b34ee03e9 100644
--- a/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
+++ b/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
@@ -42,8 +42,11 @@ const StyledCloseButtonWrapper = styled.div<{
   height: 17px;
 
   margin-left: auto;
+  padding-left: 2px;
 
-  cursor: pointer;
+  svg {
+    cursor: pointer;
+  }
 `;
 
 StyledCloseButtonWrapper.defaultProps = { theme: Base };

From 5c462bb58819b579f27e87d50fcf8ae829b54b68 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Wed, 21 Aug 2024 11:04:25 +0300
Subject: [PATCH 03/41] Shared/Client: Fixed styles for invite panel.

---
 .../panels/InvitePanel/StyledInvitePanel.js   | 37 ++++++------
 .../components/panels/InvitePanel/index.js    | 11 +++-
 .../shared/components/aside/Aside.styled.tsx  | 57 ++++---------------
 packages/shared/components/aside/Aside.tsx    | 22 +++----
 4 files changed, 52 insertions(+), 75 deletions(-)

diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
index 25669afd61..e5f399fc72 100644
--- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
+++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
@@ -38,7 +38,6 @@ import { ToggleButton } from "@docspace/shared/components/toggle-button";
 import { mobile, commonIconsStyles } from "@docspace/shared/utils";
 import CheckIcon from "PUBLIC_DIR/images/check.edit.react.svg";
 import CrossIcon from "PUBLIC_DIR/images/cross.edit.react.svg";
-import CrossIconMobile from "PUBLIC_DIR/images/cross.react.svg";
 import DeleteIcon from "PUBLIC_DIR/images/mobile.actions.remove.react.svg";
 import { isMobile, desktop, commonInputStyles } from "@docspace/shared/utils";
 import Base from "@docspace/shared/themes/base";
@@ -125,8 +124,18 @@ const ScrollList = styled.div`
 `;
 
 const StyledBlock = styled.div`
-  padding: ${(props) => (props.noPadding ? "0px" : "0 16px")};
   border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
+
+  ${(props) =>
+    props.theme.interfaceDirection === "rtl"
+      ? css`
+          padding-right: 16px;
+          padding-left: 37px;
+        `
+      : css`
+          padding-left: 16px;
+          padding-right: 37px;
+        `}
 `;
 
 StyledBlock.defaultProps = { theme: Base };
@@ -513,11 +522,16 @@ const StyledControlContainer = styled.div`
   z-index: 450;
 
   @media ${mobile} {
-    display: flex;
-
-    top: -27px;
-    right: 10px;
-    left: unset;
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            left: 13px;
+            top: 17px;
+          `
+        : css`
+            right: 13px;
+            top: 17px;
+          `}
   }
 `;
 const StyledInviteLanguage = styled.div`
@@ -574,14 +588,6 @@ const StyledInviteLanguage = styled.div`
     gap: 2px;
   }
 `;
-const StyledCrossIconMobile = styled(CrossIconMobile)`
-  width: 17px;
-  height: 17px;
-  z-index: 455;
-  path {
-    fill: ${(props) => props.theme.catalog.control.fill};
-  }
-`;
 
 StyledCrossIcon.defaultProps = { theme: Base };
 export {
@@ -609,6 +615,5 @@ export {
   StyledDescription,
   StyledInviteLanguage,
   StyledControlContainer,
-  StyledCrossIconMobile,
   StyledInviteUserBody,
 };
diff --git a/packages/client/src/components/panels/InvitePanel/index.js b/packages/client/src/components/panels/InvitePanel/index.js
index 29047271a8..c0fa601eec 100644
--- a/packages/client/src/components/panels/InvitePanel/index.js
+++ b/packages/client/src/components/panels/InvitePanel/index.js
@@ -64,6 +64,8 @@ import { Link } from "@docspace/shared/components/link";
 import { Text } from "@docspace/shared/components/text";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
+import { IconButton } from "@docspace/shared/components/icon-button";
+import CrossIconMobile from "PUBLIC_DIR/images/cross.react.svg?url";
 
 const InvitePanel = ({
   folders,
@@ -430,7 +432,7 @@ const InvitePanel = ({
   const invitePanelNode = (
     <>
       <StyledBlock>
-        <StyledHeading>{t("Common:InviteUsers")}</StyledHeading>
+        <StyledHeading truncate>{t("Common:InviteUsers")}</StyledHeading>
       </StyledBlock>
       {invitePanelIsLoding ? (
         <InvitePanelLoader />
@@ -480,7 +482,12 @@ const InvitePanel = ({
       {isMobileView ? (
         <div className="invite_panel" ref={invitePanelRef}>
           <StyledControlContainer onClick={onClose}>
-            <StyledCrossIconMobile />
+            <IconButton
+              size={17}
+              className="close-button"
+              iconName={CrossIconMobile}
+              isClickable
+            />
           </StyledControlContainer>
           {invitePanelNode}
         </div>
diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx
index f83f6a025f..baeac90f27 100644
--- a/packages/shared/components/aside/Aside.styled.tsx
+++ b/packages/shared/components/aside/Aside.styled.tsx
@@ -27,8 +27,6 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
-import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";
-
 import { Base } from "../../themes";
 import { MOBILE_FOOTER_HEIGHT } from "../../constants";
 import { tablet, mobile } from "../../utils";
@@ -127,53 +125,18 @@ const StyledControlContainer = styled.div`
   justify-content: center;
   z-index: 450;
 
-  top: 18px;
-
   ${(props) =>
-    props.theme.interfaceDirection === "rtl" ? `right: -27px;` : `left: -27px;`}
-
-  @media ${tablet} {
-    display: flex;
-
-    top: 18px;
-
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? `right: -27px;`
-        : `left: -27px;`}
-  }
-
-  @media ${mobile} {
-    display: flex;
-
-    top: -27px;
-    right: 10px;
-    left: unset;
-
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            right: unset;
-            left: 10px;
-          `
-        : css`
-            right: 10px;
-            left: unset;
-          `}
-  }
+    props.theme.interfaceDirection === "rtl"
+      ? css`
+          left: 13px;
+          top: 17px;
+        `
+      : css`
+          right: 13px;
+          top: 17px;
+        `}
 `;
 
 StyledControlContainer.defaultProps = { theme: Base };
 
-const StyledCrossIcon = styled(CrossReactSvg)`
-  width: 17px;
-  height: 17px;
-  z-index: 455;
-  path {
-    fill: ${(props) => props.theme.catalog.control.fill};
-  }
-`;
-
-StyledCrossIcon.defaultProps = { theme: Base };
-
-export { StyledAside, StyledControlContainer, StyledCrossIcon };
+export { StyledAside, StyledControlContainer };
diff --git a/packages/shared/components/aside/Aside.tsx b/packages/shared/components/aside/Aside.tsx
index 8846d1807f..d475dc77b4 100644
--- a/packages/shared/components/aside/Aside.tsx
+++ b/packages/shared/components/aside/Aside.tsx
@@ -27,14 +27,13 @@
 import React from "react";
 
 import { Scrollbar } from "../scrollbar";
+import { IconButton } from "../icon-button";
 
-import {
-  StyledAside,
-  StyledControlContainer,
-  StyledCrossIcon,
-} from "./Aside.styled";
+import { StyledAside, StyledControlContainer } from "./Aside.styled";
 import { AsideProps } from "./Aside.types";
 
+import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg?url";
+
 const AsidePure = (props: AsideProps) => {
   const {
     visible,
@@ -47,7 +46,7 @@ const AsidePure = (props: AsideProps) => {
     onClose,
   } = props;
   const contentRef = React.useRef<HTMLElement | null>(null);
-
+  console.log("AsidePure");
   return (
     <StyledAside
       visible={visible}
@@ -58,14 +57,17 @@ const AsidePure = (props: AsideProps) => {
       forwardRef={contentRef}
       data-testid="aside"
     >
-      {/* <CloseButton  displayType="aside" zIndex={zIndex}/> */}
-      {withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
-
       {visible && (
         <StyledControlContainer className="close-button" onClick={onClose}>
-          <StyledCrossIcon />
+          <IconButton
+            size={17}
+            className="close-button"
+            iconName={CrossReactSvg}
+            isClickable
+          />
         </StyledControlContainer>
       )}
+      {withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
     </StyledAside>
   );
 };

From 0c8ddea8982e0c40c9f109acd49d55e449a258a4 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Wed, 21 Aug 2024 11:54:06 +0300
Subject: [PATCH 04/41] Client: Components: Fixed styles for history panel.

---
 packages/client/src/components/panels/StyledPanels.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/panels/StyledPanels.js b/packages/client/src/components/panels/StyledPanels.js
index ad65ed113a..1146f2860c 100644
--- a/packages/client/src/components/panels/StyledPanels.js
+++ b/packages/client/src/components/panels/StyledPanels.js
@@ -259,15 +259,16 @@ StyledContent.defaultProps = { theme: Base };
 const StyledHeaderContent = styled.div`
   display: flex;
   align-items: center;
-  padding: 0 16px;
 
   ${(props) =>
     props.theme.interfaceDirection === "rtl"
       ? css`
-          margin-left: -16px;
+          padding-right: 16px;
+          padding-left: 37px;
         `
       : css`
-          margin-right: -16px;
+          padding-left: 16px;
+          padding-right: 37px;
         `}
 
   border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};

From 4e1c69a1aa14a385857de9bf5182dbbb257599fc Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Wed, 21 Aug 2024 12:13:32 +0300
Subject: [PATCH 05/41] Client: Components: Fixed styles for hotkeys panel.

---
 .../components/panels/HotkeysPanel/StyledHotkeys.js  | 12 +++++++++++-
 .../src/components/panels/HotkeysPanel/index.js      |  4 +++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js b/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
index b4f40c7186..9736733e32 100644
--- a/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
+++ b/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
@@ -44,9 +44,19 @@ const StyledHotkeysPanel = styled.div`
   }
 
   .hotkeys_header {
-    padding: 0 16px;
     border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
 
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            padding-right: 16px;
+            padding-left: 37px;
+          `
+        : css`
+            padding-left: 16px;
+            padding-right: 37px;
+          `}
+
     .hotkeys_heading {
       font-weight: 700;
       font-size: 18px;
diff --git a/packages/client/src/components/panels/HotkeysPanel/index.js b/packages/client/src/components/panels/HotkeysPanel/index.js
index 17c090f81c..7c8a322d70 100644
--- a/packages/client/src/components/panels/HotkeysPanel/index.js
+++ b/packages/client/src/components/panels/HotkeysPanel/index.js
@@ -92,7 +92,9 @@ const HotkeyPanel = ({
         withoutBodyScroll={true}
       >
         <div className="hotkeys_header">
-          <Heading className="hotkeys_heading">{t("Common:Hotkeys")}</Heading>
+          <Heading className="hotkeys_heading" truncate>
+            {t("Common:Hotkeys")}
+          </Heading>
         </div>
         <StyledScrollbar ref={scrollRef}>
           <Heading className="hotkeys_sub-header">

From ee6b1e8511e17cca7744666f0ec8983f77ef5f58 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Wed, 21 Aug 2024 13:19:04 +0300
Subject: [PATCH 06/41] Shared: Selector: Fixed styles for selector header
 because of icon adding.

---
 .../shared/components/selector/Selector.styled.ts    | 12 +++++++++++-
 .../components/selector/sub-components/Header.tsx    |  4 +++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/shared/components/selector/Selector.styled.ts b/packages/shared/components/selector/Selector.styled.ts
index a98ff30cfc..684b7f29c4 100644
--- a/packages/shared/components/selector/Selector.styled.ts
+++ b/packages/shared/components/selector/Selector.styled.ts
@@ -64,7 +64,7 @@ const StyledSelector = styled.div`
 `;
 
 const StyledHeader = styled.div<{ withoutBorder?: boolean }>`
-  width: calc(100% - 32px);
+  width: calc(100% - 53px);
   min-height: 53px;
   height: 53px;
   max-height: 53px;
@@ -79,9 +79,19 @@ const StyledHeader = styled.div<{ withoutBorder?: boolean }>`
   display: flex;
   align-items: center;
 
+  ${(props) =>
+    props.theme.interfaceDirection === "rtl"
+      ? css`
+          padding-left: 37px;
+        `
+      : css`
+          padding-right: 37px;
+        `}
+
   .arrow-button {
     cursor: pointer;
     margin-right: 12px;
+    min-width: 17px;
     ${(props) =>
       props.theme.interfaceDirection === "rtl" &&
       css`
diff --git a/packages/shared/components/selector/sub-components/Header.tsx b/packages/shared/components/selector/sub-components/Header.tsx
index a3e781c5c1..c3deb7b7c3 100644
--- a/packages/shared/components/selector/sub-components/Header.tsx
+++ b/packages/shared/components/selector/sub-components/Header.tsx
@@ -52,7 +52,9 @@ const Header = React.memo(
           />
         )}
 
-        <Heading className="heading-text">{headerLabel}</Heading>
+        <Heading className="heading-text" truncate>
+          {headerLabel}
+        </Heading>
       </StyledHeader>
     );
   },

From 855f79a51d0fd7baac3db5f883b44b133c6d72e9 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Wed, 21 Aug 2024 15:44:44 +0300
Subject: [PATCH 07/41] Shared/Client: Fixed styles after adding an icon to the
 dialog header.

---
 .../components/RoomsSelectorInput/index.js    |  1 +
 .../shared/components/filter/Filter.styled.ts | 48 ++++++-------------
 .../filter/sub-components/FilterBlock.tsx     | 23 +++++----
 .../components/selector/Selector.styled.ts    | 14 ++----
 .../selectors/Groups/GroupsSelector.types.ts  |  1 +
 packages/shared/selectors/Groups/index.tsx    | 14 +++++-
 .../selectors/People/PeopleSelector.types.ts  |  1 +
 packages/shared/selectors/People/index.tsx    | 13 ++++-
 .../selectors/Room/RoomSelector.types.ts      |  1 +
 packages/shared/selectors/Room/index.tsx      | 15 +++++-
 10 files changed, 75 insertions(+), 56 deletions(-)

diff --git a/packages/client/src/components/RoomsSelectorInput/index.js b/packages/client/src/components/RoomsSelectorInput/index.js
index bac3c36877..c1a5142346 100644
--- a/packages/client/src/components/RoomsSelectorInput/index.js
+++ b/packages/client/src/components/RoomsSelectorInput/index.js
@@ -111,6 +111,7 @@ const RoomsSelectorInput = (props) => {
     />
   );
 
+  console.log("ROOMS");
   return (
     <StyledBodyWrapper maxWidth={maxWidth} className={className}>
       <FileInput
diff --git a/packages/shared/components/filter/Filter.styled.ts b/packages/shared/components/filter/Filter.styled.ts
index 2e59390171..e1c3deb2f0 100644
--- a/packages/shared/components/filter/Filter.styled.ts
+++ b/packages/shared/components/filter/Filter.styled.ts
@@ -26,8 +26,6 @@
 
 import styled, { css } from "styled-components";
 
-import CrossIcon from "PUBLIC_DIR/images/cross.react.svg";
-
 import { tablet, mobile } from "../../utils";
 import { Base } from "../../themes";
 import { TViewAs } from "../../types";
@@ -222,9 +220,19 @@ const StyledFilterBlockHeader = styled.div<{ isSelector?: boolean }>`
   height: 53px;
   min-height: 53px;
 
-  padding: 0 16px;
   margin: 0;
 
+  ${(props) =>
+    props.theme.interfaceDirection === "rtl"
+      ? css`
+          padding-right: 16px;
+          padding-left: 37px;
+        `
+      : css`
+          padding-left: 16px;
+          padding-right: 37px;
+        `}
+
   box-sizing: border-box;
 
   border-bottom: ${(props) =>
@@ -504,45 +512,20 @@ const StyledControlContainer = styled.div`
   justify-content: center;
   z-index: 450;
 
-  top: 14px;
   ${(props) =>
     props.theme.interfaceDirection === "rtl"
       ? css`
-          right: -34px;
+          left: 13px;
+          top: 17px;
         `
       : css`
-          left: -34px;
+          right: 13px;
+          top: 17px;
         `}
-
-  @media ${mobile} {
-    top: -34px;
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            left: 10px;
-            right: unset;
-          `
-        : css`
-            right: 10px;
-
-            left: unset;
-          `}
-  }
 `;
 
 StyledControlContainer.defaultProps = { theme: Base };
 
-const StyledCrossIcon = styled(CrossIcon)`
-  width: 17px;
-  height: 17px;
-  z-index: 455;
-  path {
-    fill: ${(props) => props.theme.catalog.control.fill};
-  }
-`;
-
-StyledCrossIcon.defaultProps = { theme: Base };
-
 const selectedViewIcon = css`
   svg {
     path {
@@ -727,7 +710,6 @@ export {
   StyledFilterBlockItemSeparator,
   StyledFilterBlockFooter,
   StyledControlContainer,
-  StyledCrossIcon,
 };
 
 export { StyledFilterInput, StyledSearchInput, StyledButton };
diff --git a/packages/shared/components/filter/sub-components/FilterBlock.tsx b/packages/shared/components/filter/sub-components/FilterBlock.tsx
index 857cddd827..e5c7dfc9cd 100644
--- a/packages/shared/components/filter/sub-components/FilterBlock.tsx
+++ b/packages/shared/components/filter/sub-components/FilterBlock.tsx
@@ -28,6 +28,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 
 import ClearReactSvgUrl from "PUBLIC_DIR/images/clear.react.svg?url";
+import CrossIcon from "PUBLIC_DIR/images/cross.react.svg?url";
 
 import GroupsSelector from "../../../selectors/Groups";
 import PeopleSelector from "../../../selectors/People";
@@ -45,7 +46,6 @@ import { TSelectorItem } from "../../selector";
 
 import {
   StyledControlContainer,
-  StyledCrossIcon,
   StyledFilterBlock,
   StyledFilterBlockFooter,
   StyledFilterBlockHeader,
@@ -481,7 +481,7 @@ const FilterBlock = ({
   const showFooter = isLoading ? false : isEqualFilter();
   const showClearFilterBtn =
     !isLoading && (selectedFilterValue.length > 0 || filterValues.length > 0);
-
+  console.log("showSelector.type", showSelector.type);
   const filterBlockComponent = (
     <>
       {showSelector.show ? (
@@ -500,6 +500,7 @@ const FilterBlock = ({
                 withoutBackButton: false,
               }}
               currentUserId={userId}
+              onClose={hideFilterBlock}
             />
           ) : showSelector.type === FilterSelectorTypes.groups ? (
             <GroupsSelector
@@ -511,6 +512,7 @@ const FilterBlock = ({
                 headerLabel: selectorLabel,
                 withoutBackButton: false,
               }}
+              onClose={hideFilterBlock}
             />
           ) : (
             <RoomSelector
@@ -525,11 +527,9 @@ const FilterBlock = ({
               isMultiSelect={false}
               withSearch
               disableThirdParty={disableThirdParty}
+              onClose={hideFilterBlock}
             />
           )}
-          <StyledControlContainer onClick={hideFilterBlock}>
-            <StyledCrossIcon />
-          </StyledControlContainer>
         </StyledFilterBlock>
       ) : (
         <StyledFilterBlock>
@@ -546,6 +546,15 @@ const FilterBlock = ({
                 size={17}
               />
             )}
+
+            <StyledControlContainer onClick={hideFilterBlock}>
+              <IconButton
+                size={17}
+                className="close-button"
+                iconName={CrossIcon}
+                isClickable
+              />
+            </StyledControlContainer>
           </StyledFilterBlockHeader>
           <div className="filter-body">
             {isLoading ? (
@@ -598,10 +607,6 @@ const FilterBlock = ({
               isDisabled={isLoading}
             />
           </StyledFilterBlockFooter>
-
-          <StyledControlContainer id="filter_close" onClick={hideFilterBlock}>
-            <StyledCrossIcon />
-          </StyledControlContainer>
         </StyledFilterBlock>
       )}
 
diff --git a/packages/shared/components/selector/Selector.styled.ts b/packages/shared/components/selector/Selector.styled.ts
index 684b7f29c4..7246ee7de3 100644
--- a/packages/shared/components/selector/Selector.styled.ts
+++ b/packages/shared/components/selector/Selector.styled.ts
@@ -63,7 +63,10 @@ const StyledSelector = styled.div`
   overflow: hidden;
 `;
 
-const StyledHeader = styled.div<{ withoutBorder?: boolean }>`
+const StyledHeader = styled.div<{
+  withoutBorder?: boolean;
+  withoutIcon: boolean;
+}>`
   width: calc(100% - 53px);
   min-height: 53px;
   height: 53px;
@@ -79,15 +82,6 @@ const StyledHeader = styled.div<{ withoutBorder?: boolean }>`
   display: flex;
   align-items: center;
 
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          padding-left: 37px;
-        `
-      : css`
-          padding-right: 37px;
-        `}
-
   .arrow-button {
     cursor: pointer;
     margin-right: 12px;
diff --git a/packages/shared/selectors/Groups/GroupsSelector.types.ts b/packages/shared/selectors/Groups/GroupsSelector.types.ts
index f1f5ad93dc..a322ef19a6 100644
--- a/packages/shared/selectors/Groups/GroupsSelector.types.ts
+++ b/packages/shared/selectors/Groups/GroupsSelector.types.ts
@@ -33,6 +33,7 @@ import { TSelectorItem } from "../../components/selector";
 export type GroupsSelectorProps = TSelectorHeader & {
   id?: string;
   className?: string;
+  onClose?: () => void;
   onSubmit: (
     selectedItems: TSelectorItem[],
     access?: TAccessRight | null,
diff --git a/packages/shared/selectors/Groups/index.tsx b/packages/shared/selectors/Groups/index.tsx
index d0795434e9..81947ebad3 100644
--- a/packages/shared/selectors/Groups/index.tsx
+++ b/packages/shared/selectors/Groups/index.tsx
@@ -43,7 +43,7 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
     className,
 
     headerProps,
-
+    onClose,
     onSubmit,
   } = props;
 
@@ -143,7 +143,7 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
     [searchValue],
   );
 
-  return (
+  const SelectorGroups = (
     <Selector
       id={id}
       className={className}
@@ -187,6 +187,16 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
       }
     />
   );
+
+  if (!onClose) {
+    return SelectorGroups;
+  }
+
+  return (
+    <Aside visible onClose={onClose} withoutBodyScroll>
+      {SelectorGroups}
+    </Aside>
+  );
 };
 
 export default GroupsSelector;
diff --git a/packages/shared/selectors/People/PeopleSelector.types.ts b/packages/shared/selectors/People/PeopleSelector.types.ts
index 3e283eaea8..75dd5b2af5 100644
--- a/packages/shared/selectors/People/PeopleSelector.types.ts
+++ b/packages/shared/selectors/People/PeopleSelector.types.ts
@@ -64,4 +64,5 @@ export type PeopleSelectorProps = TSelectorHeader &
 
     emptyScreenHeader?: string;
     emptyScreenDescription?: string;
+    onClose?: () => void;
   };
diff --git a/packages/shared/selectors/People/index.tsx b/packages/shared/selectors/People/index.tsx
index bda1660d16..f45aea8244 100644
--- a/packages/shared/selectors/People/index.tsx
+++ b/packages/shared/selectors/People/index.tsx
@@ -52,6 +52,7 @@ import { AvatarRole } from "../../components/avatar";
 import { Text } from "../../components/text";
 
 import { PeopleSelectorProps } from "./PeopleSelector.types";
+import { Aside } from "../../components/aside";
 
 const toListItem = (
   item: TUser,
@@ -142,6 +143,7 @@ const PeopleSelector = ({
 
   emptyScreenHeader,
   emptyScreenDescription,
+  onClose,
 }: PeopleSelectorProps) => {
   const { t }: { t: TTranslation } = useTranslation(["Common"]);
 
@@ -377,7 +379,7 @@ const PeopleSelector = ({
     );
   };
 
-  return (
+  const SelectorUser = (
     <Selector
       id={id}
       alwaysShowFooter={itemsList.length !== 0 || Boolean(searchValue)}
@@ -414,6 +416,15 @@ const PeopleSelector = ({
       {...infoProps}
     />
   );
+  if (!onClose) {
+    return SelectorUser;
+  }
+
+  return (
+    <Aside visible onClose={onClose} withoutBodyScroll>
+      {SelectorUser}
+    </Aside>
+  );
 };
 
 export default PeopleSelector;
diff --git a/packages/shared/selectors/Room/RoomSelector.types.ts b/packages/shared/selectors/Room/RoomSelector.types.ts
index bfa38caf8f..0f3ca64cf7 100644
--- a/packages/shared/selectors/Room/RoomSelector.types.ts
+++ b/packages/shared/selectors/Room/RoomSelector.types.ts
@@ -48,4 +48,5 @@ export type RoomSelectorProps = TSelectorHeader &
     withSearch?: boolean;
 
     disableThirdParty?: boolean;
+    onClose?: () => void;
   };
diff --git a/packages/shared/selectors/Room/index.tsx b/packages/shared/selectors/Room/index.tsx
index aa73fc615c..718473f014 100644
--- a/packages/shared/selectors/Room/index.tsx
+++ b/packages/shared/selectors/Room/index.tsx
@@ -44,6 +44,7 @@ import { TTranslation } from "../../types";
 
 import { RoomSelectorProps } from "./RoomSelector.types";
 import { convertToItems } from "./RoomSelector.utils";
+import { Aside } from "../../components/aside";
 
 const PAGE_COUNT = 100;
 
@@ -73,6 +74,8 @@ const RoomSelector = ({
   roomType,
 
   disableThirdParty,
+
+  onClose,
 }: RoomSelectorProps) => {
   const { t }: { t: TTranslation } = useTranslation(["Common"]);
 
@@ -208,7 +211,7 @@ const RoomSelector = ({
       }
     : {};
 
-  return (
+  const SelectorRoom = (
     <Selector
       id={id}
       className={className}
@@ -243,6 +246,16 @@ const RoomSelector = ({
       }
     />
   );
+
+  if (!onClose) {
+    return SelectorRoom;
+  }
+
+  return (
+    <Aside visible onClose={onClose} withoutBodyScroll>
+      {SelectorRoom}
+    </Aside>
+  );
 };
 
 export default RoomSelector;

From 80cacd09c34a0422101c76731d8c6cb447b594aa Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Wed, 21 Aug 2024 16:31:44 +0300
Subject: [PATCH 08/41] Shared/Client: Fixed styles for upload panel because of
 adding  an icon.

---
 .../client/src/components/panels/StyledPanels.js    | 13 ++++++++++++-
 .../src/components/panels/UploadPanel/index.js      |  4 ++--
 packages/shared/components/filter/Filter.styled.ts  |  4 +++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/panels/StyledPanels.js b/packages/client/src/components/panels/StyledPanels.js
index 1146f2860c..5f6e897cdd 100644
--- a/packages/client/src/components/panels/StyledPanels.js
+++ b/packages/client/src/components/panels/StyledPanels.js
@@ -716,7 +716,18 @@ const StyledUploadHeader = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+
+  .icons-container {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+
+  .title-container {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    user-select: none;
+  }
 `;
 
 const StyledUploadBody = styled.div`
diff --git a/packages/client/src/components/panels/UploadPanel/index.js b/packages/client/src/components/panels/UploadPanel/index.js
index dc0ee3c326..d38f788d94 100644
--- a/packages/client/src/components/panels/UploadPanel/index.js
+++ b/packages/client/src/components/panels/UploadPanel/index.js
@@ -132,8 +132,8 @@ class UploadPanelComponent extends React.Component {
       >
         <ModalDialog.Header>
           <StyledUploadHeader>
-            <div>{title}</div>
-            <div>
+            <div className="title-container">{title}</div>
+            <div className="icons-container">
               {uploaded && converted ? (
                 <IconButton
                   size={17}
diff --git a/packages/shared/components/filter/Filter.styled.ts b/packages/shared/components/filter/Filter.styled.ts
index e1c3deb2f0..ec88bdbe2c 100644
--- a/packages/shared/components/filter/Filter.styled.ts
+++ b/packages/shared/components/filter/Filter.styled.ts
@@ -240,12 +240,14 @@ const StyledFilterBlockHeader = styled.div<{ isSelector?: boolean }>`
 
   display: flex;
   align-items: center;
-  justify-content: ${(props) => (props.isSelector ? "start" : "space-between")};
 
   h1 {
     font-weight: 700;
   }
 
+  #filter_search-options-clear {
+    margin-left: 16px;
+  }
   .arrow-button {
     ${(props) =>
       props.theme.interfaceDirection === "rtl"

From bf9402870e64d36918992229e3aaa2a37dbc7917 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 12:54:47 +0300
Subject: [PATCH 09/41] Shared: Aside: The header is placed in a separate
 component.

---
 .../shared/components/aside/Aside.styled.tsx  | 29 +++++-
 packages/shared/components/aside/Aside.tsx    | 21 ++---
 .../shared/components/aside/Aside.types.ts    | 16 +++-
 .../shared/components/aside/AsideHeader.tsx   | 89 +++++++++++++++++++
 packages/shared/components/aside/index.tsx    |  1 +
 5 files changed, 138 insertions(+), 18 deletions(-)
 create mode 100644 packages/shared/components/aside/AsideHeader.tsx

diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx
index baeac90f27..a3ee4d60d5 100644
--- a/packages/shared/components/aside/Aside.styled.tsx
+++ b/packages/shared/components/aside/Aside.styled.tsx
@@ -139,4 +139,31 @@ const StyledControlContainer = styled.div`
 
 StyledControlContainer.defaultProps = { theme: Base };
 
-export { StyledAside, StyledControlContainer };
+const StyledHeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 16px;
+  height: 53px;
+
+  .additional-icons-container {
+    display: flex;
+    margin-inline: 16px 16px;
+    gap: 16px;
+  }
+  .arrow-button {
+    margin-inline: 0 12px;
+  }
+  .close-button {
+    margin-inline: auto 0;
+  }
+  ::after {
+    content: "";
+    border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 53px;
+  }
+`;
+export { StyledAside, StyledControlContainer, StyledHeaderContainer };
diff --git a/packages/shared/components/aside/Aside.tsx b/packages/shared/components/aside/Aside.tsx
index d475dc77b4..a00dc943c7 100644
--- a/packages/shared/components/aside/Aside.tsx
+++ b/packages/shared/components/aside/Aside.tsx
@@ -27,12 +27,9 @@
 import React from "react";
 
 import { Scrollbar } from "../scrollbar";
-import { IconButton } from "../icon-button";
-
-import { StyledAside, StyledControlContainer } from "./Aside.styled";
+import { StyledAside } from "./Aside.styled";
 import { AsideProps } from "./Aside.types";
-
-import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg?url";
+import { AsideHeader } from "./AsideHeader";
 
 const AsidePure = (props: AsideProps) => {
   const {
@@ -44,9 +41,10 @@ const AsidePure = (props: AsideProps) => {
     contentPaddingBottom,
     withoutBodyScroll = false,
     onClose,
+    ...rest
   } = props;
   const contentRef = React.useRef<HTMLElement | null>(null);
-  console.log("AsidePure");
+
   return (
     <StyledAside
       visible={visible}
@@ -57,16 +55,7 @@ const AsidePure = (props: AsideProps) => {
       forwardRef={contentRef}
       data-testid="aside"
     >
-      {visible && (
-        <StyledControlContainer className="close-button" onClick={onClose}>
-          <IconButton
-            size={17}
-            className="close-button"
-            iconName={CrossReactSvg}
-            isClickable
-          />
-        </StyledControlContainer>
-      )}
+      <AsideHeader onCloseClick={onClose} {...rest} />
       {withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
     </StyledAside>
   );
diff --git a/packages/shared/components/aside/Aside.types.ts b/packages/shared/components/aside/Aside.types.ts
index f74daa4da6..aca9c7d441 100644
--- a/packages/shared/components/aside/Aside.types.ts
+++ b/packages/shared/components/aside/Aside.types.ts
@@ -33,8 +33,22 @@ export interface AsideProps {
   children: React.ReactNode;
   withoutBodyScroll?: boolean;
   onClose: () => void;
-}
 
+  header: AsideHeaderProps["header"];
+  isBackButton?: AsideHeaderProps["isBackButton"];
+  isCloseable?: AsideHeaderProps["isCloseable"];
+  hederIcons?: AsideHeaderProps["hederIcons"];
+  onBackClick?: AsideHeaderProps["onBackClick"];
+  onCloseClick?: AsideHeaderProps["onCloseClick"];
+}
+export interface AsideHeaderProps {
+  header: string;
+  isBackButton?: boolean;
+  isCloseable?: boolean;
+  hederIcons?: { id: string; url: string; onClick: () => void }[];
+  onBackClick?: () => void;
+  onCloseClick?: () => void;
+}
 export interface StyledAsideProps {
   visible: boolean;
   scale?: boolean;
diff --git a/packages/shared/components/aside/AsideHeader.tsx b/packages/shared/components/aside/AsideHeader.tsx
new file mode 100644
index 0000000000..5a9bfefcd1
--- /dev/null
+++ b/packages/shared/components/aside/AsideHeader.tsx
@@ -0,0 +1,89 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
+import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg?url";
+
+import { IconButton } from "../icon-button";
+import { Text } from "../text";
+import { AsideHeaderProps } from "./Aside.types";
+import { StyledHeaderContainer } from "./Aside.styled";
+
+const AsideHeader = (props: AsideHeaderProps) => {
+  const {
+    isBackButton = false,
+    onBackClick,
+    onCloseClick,
+    header,
+    hederIcons = [],
+    isCloseable = true,
+  } = props;
+
+  const backButtonRender = (
+    <IconButton
+      className="arrow-button"
+      iconName={ArrowPathReactSvgUrl}
+      size={17}
+      onClick={onBackClick}
+    />
+  );
+
+  const closeIconRender = (
+    <IconButton
+      size={17}
+      className="close-button"
+      iconName={CrossReactSvg}
+      onClick={onCloseClick}
+      isClickable
+    />
+  );
+
+  return (
+    <StyledHeaderContainer>
+      {isBackButton && backButtonRender}
+      <Text fontSize="21px" fontWeight={700}>
+        {header}
+      </Text>
+      {hederIcons.length > 0 && (
+        <div className="additional-icons-container">
+          {hederIcons.map((item) => (
+            <IconButton
+              key={item.id}
+              size={17}
+              className="close-button"
+              iconName={item.url}
+              onClick={item.onClick}
+              isClickable
+            />
+          ))}
+        </div>
+      )}
+      {isCloseable && closeIconRender}
+    </StyledHeaderContainer>
+  );
+};
+
+export { AsideHeader };
diff --git a/packages/shared/components/aside/index.tsx b/packages/shared/components/aside/index.tsx
index 6cf8688684..c065ddb580 100644
--- a/packages/shared/components/aside/index.tsx
+++ b/packages/shared/components/aside/index.tsx
@@ -25,3 +25,4 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 export { Aside } from "./Aside";
+export { AsideHeader } from "./AsideHeader";

From 96bf6d1ab6df493ce5e835798895c131fa612005 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 12:56:00 +0300
Subject: [PATCH 10/41] Client: HotkeysPanel: Added a header component.

---
 .../panels/HotkeysPanel/StyledHotkeys.js      | 20 -------------------
 .../components/panels/HotkeysPanel/index.js   |  6 +-----
 2 files changed, 1 insertion(+), 25 deletions(-)

diff --git a/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js b/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
index 9736733e32..e6200a3cae 100644
--- a/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
+++ b/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
@@ -43,26 +43,6 @@ const StyledHotkeysPanel = styled.div`
     }
   }
 
-  .hotkeys_header {
-    border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
-
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            padding-right: 16px;
-            padding-left: 37px;
-          `
-        : css`
-            padding-left: 16px;
-            padding-right: 37px;
-          `}
-
-    .hotkeys_heading {
-      font-weight: 700;
-      font-size: 18px;
-    }
-  }
-
   .hotkeys_sub-header {
     font-weight: 700;
     font-size: 16px;
diff --git a/packages/client/src/components/panels/HotkeysPanel/index.js b/packages/client/src/components/panels/HotkeysPanel/index.js
index 7c8a322d70..3a4c959d4e 100644
--- a/packages/client/src/components/panels/HotkeysPanel/index.js
+++ b/packages/client/src/components/panels/HotkeysPanel/index.js
@@ -90,12 +90,8 @@ const HotkeyPanel = ({
         visible={visible}
         onClose={onClose}
         withoutBodyScroll={true}
+        header={t("Common:Hotkeys")}
       >
-        <div className="hotkeys_header">
-          <Heading className="hotkeys_heading" truncate>
-            {t("Common:Hotkeys")}
-          </Heading>
-        </div>
         <StyledScrollbar ref={scrollRef}>
           <Heading className="hotkeys_sub-header">
             {t("HotkeysNavigation")}

From ceac4c0faf0f0fa1b50f0e097c32238ae4832911 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 15:09:21 +0300
Subject: [PATCH 11/41] Shared:ModalDialog: Added a header component.

---
 .../shared/components/aside/Aside.styled.tsx  | 16 +++++-
 .../shared/components/aside/Aside.types.ts    |  7 ++-
 .../shared/components/aside/AsideHeader.tsx   | 23 ++++++---
 .../modal-dialog/ModalDialog.styled.ts        | 21 +-------
 .../components/modal-dialog/ModalDialog.tsx   |  3 ++
 .../modal-dialog/ModalDialog.types.ts         |  6 +++
 .../modal-dialog/sub-components/Modal.tsx     | 50 +++++++------------
 7 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx
index a3ee4d60d5..406811b8bb 100644
--- a/packages/shared/components/aside/Aside.styled.tsx
+++ b/packages/shared/components/aside/Aside.styled.tsx
@@ -145,6 +145,7 @@ const StyledHeaderContainer = styled.div`
   justify-content: space-between;
   margin: 0 16px;
   height: 53px;
+  position: relative;
 
   .additional-icons-container {
     display: flex;
@@ -156,14 +157,27 @@ const StyledHeaderContainer = styled.div`
   }
   .close-button {
     margin-inline: auto 0;
+    min-width: 17px;
+  }
+  .header-component {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   ::after {
     content: "";
+    border-bottom: 1px solid rgb(236, 238, 241);
+    width: calc(100% + 32px);
+    position: absolute;
+    left: -16px;
+    bottom: 0;
+
+    /* content: "";
     border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
     width: 100%;
     position: fixed;
     left: 0;
-    top: 53px;
+    top: 53px; */
   }
 `;
 export { StyledAside, StyledControlContainer, StyledHeaderContainer };
diff --git a/packages/shared/components/aside/Aside.types.ts b/packages/shared/components/aside/Aside.types.ts
index aca9c7d441..9bafaf77c5 100644
--- a/packages/shared/components/aside/Aside.types.ts
+++ b/packages/shared/components/aside/Aside.types.ts
@@ -37,17 +37,20 @@ export interface AsideProps {
   header: AsideHeaderProps["header"];
   isBackButton?: AsideHeaderProps["isBackButton"];
   isCloseable?: AsideHeaderProps["isCloseable"];
-  hederIcons?: AsideHeaderProps["hederIcons"];
+  headerIcons?: AsideHeaderProps["headerIcons"];
   onBackClick?: AsideHeaderProps["onBackClick"];
   onCloseClick?: AsideHeaderProps["onCloseClick"];
 }
 export interface AsideHeaderProps {
   header: string;
+  className?: string;
+  id?: string;
   isBackButton?: boolean;
   isCloseable?: boolean;
-  hederIcons?: { id: string; url: string; onClick: () => void }[];
+  headerIcons?: { key: string; url: string; onClick: () => void }[];
   onBackClick?: () => void;
   onCloseClick?: () => void;
+  style?: React.CSSProperties;
 }
 export interface StyledAsideProps {
   visible: boolean;
diff --git a/packages/shared/components/aside/AsideHeader.tsx b/packages/shared/components/aside/AsideHeader.tsx
index 5a9bfefcd1..4cede2bcde 100644
--- a/packages/shared/components/aside/AsideHeader.tsx
+++ b/packages/shared/components/aside/AsideHeader.tsx
@@ -38,8 +38,11 @@ const AsideHeader = (props: AsideHeaderProps) => {
     onBackClick,
     onCloseClick,
     header,
-    hederIcons = [],
+    headerIcons = [],
     isCloseable = true,
+    className,
+    id,
+    style,
   } = props;
 
   const backButtonRender = (
@@ -62,16 +65,20 @@ const AsideHeader = (props: AsideHeaderProps) => {
   );
 
   return (
-    <StyledHeaderContainer>
+    <StyledHeaderContainer id={id} className={className} style={style}>
       {isBackButton && backButtonRender}
-      <Text fontSize="21px" fontWeight={700}>
-        {header}
-      </Text>
-      {hederIcons.length > 0 && (
+      {typeof header === "string" ? (
+        <Text fontSize="21px" fontWeight={700} className="header-component">
+          {header}
+        </Text>
+      ) : (
+        header
+      )}
+      {headerIcons.length > 0 && (
         <div className="additional-icons-container">
-          {hederIcons.map((item) => (
+          {headerIcons.map((item) => (
             <IconButton
-              key={item.id}
+              key={item.key}
               size={17}
               className="close-button"
               iconName={item.url}
diff --git a/packages/shared/components/modal-dialog/ModalDialog.styled.ts b/packages/shared/components/modal-dialog/ModalDialog.styled.ts
index 123c4c98e2..f6cdee154e 100644
--- a/packages/shared/components/modal-dialog/ModalDialog.styled.ts
+++ b/packages/shared/components/modal-dialog/ModalDialog.styled.ts
@@ -147,24 +147,6 @@ const Content = styled.div.attrs((props: { modalSwipeOffset?: number }) => ({
         `}
 `;
 
-const StyledHeader = styled.div<{ currentDisplayType?: ModalDialogType }>`
-  display: flex;
-  align-items: center;
-  border-bottom: ${(props) =>
-    `1px solid ${props.theme.modalDialog.headerBorderColor}`};
-  height: 52px;
-  margin-bottom: ${(props) =>
-    props.currentDisplayType === "aside" ? "0px" : "16px"};
-  padding: 0 16px 0;
-
-  .heading {
-    font-family: ${(props) => props.theme.fontFamily};
-    color: ${(props) => props.theme.modalDialog.textColor};
-    font-weight: 700;
-    font-size: 21px;
-  }
-`;
-
 const StyledBody = styled(Box)<{
   currentDisplayType?: ModalDialogType;
   hasFooter?: boolean;
@@ -241,7 +223,6 @@ const StyledFooter = styled.div<{
 `;
 
 Dialog.defaultProps = { theme: Base };
-StyledHeader.defaultProps = { theme: Base };
 Content.defaultProps = { theme: Base };
 
-export { StyledModal, StyledHeader, Content, Dialog, StyledBody, StyledFooter };
+export { StyledModal, Content, Dialog, StyledBody, StyledFooter };
diff --git a/packages/shared/components/modal-dialog/ModalDialog.tsx b/packages/shared/components/modal-dialog/ModalDialog.tsx
index a729a0b7cc..0615079bb3 100644
--- a/packages/shared/components/modal-dialog/ModalDialog.tsx
+++ b/packages/shared/components/modal-dialog/ModalDialog.tsx
@@ -87,6 +87,8 @@ const ModalDialog = ({
   withBodyScroll = false,
   withFooterBorder = false,
   containerVisible = false,
+
+  ...rest
 }: ModalDialogProps) => {
   const onCloseEvent = React.useCallback(() => {
     if (embedded) return;
@@ -173,6 +175,7 @@ const ModalDialog = ({
           isCloseable={isCloseable && !embedded}
           embedded={embedded}
           blur={blur}
+          {...rest}
         />
       }
     />
diff --git a/packages/shared/components/modal-dialog/ModalDialog.types.ts b/packages/shared/components/modal-dialog/ModalDialog.types.ts
index 6c1a2d73d2..070503cf73 100644
--- a/packages/shared/components/modal-dialog/ModalDialog.types.ts
+++ b/packages/shared/components/modal-dialog/ModalDialog.types.ts
@@ -24,6 +24,7 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
+import { AsideHeaderProps } from "../aside/Aside.types";
 import { ModalDialogType } from "./ModalDialog.enums";
 
 export type ModalDialogTypeDetailed = {
@@ -160,4 +161,9 @@ export interface ModalSubComponentsProps {
   embedded?: boolean;
   withForm?: boolean;
   blur?: number;
+
+  isBackButton?: AsideHeaderProps["isBackButton"];
+  headerIcons?: AsideHeaderProps["headerIcons"];
+  onBackClick?: AsideHeaderProps["onBackClick"];
+  onCloseClick?: AsideHeaderProps["onCloseClick"];
 }
diff --git a/packages/shared/components/modal-dialog/sub-components/Modal.tsx b/packages/shared/components/modal-dialog/sub-components/Modal.tsx
index 2099bcd667..77ef900f47 100644
--- a/packages/shared/components/modal-dialog/sub-components/Modal.tsx
+++ b/packages/shared/components/modal-dialog/sub-components/Modal.tsx
@@ -30,18 +30,15 @@ import { isIOS, isMobileOnly, isSafari } from "react-device-detect";
 import { classNames } from "../../../utils";
 import { DialogSkeleton, DialogAsideSkeleton } from "../../../skeletons";
 
-import { Heading, HeadingSize } from "../../heading";
 import { Scrollbar } from "../../scrollbar";
-
+import { AsideHeader } from "../../aside";
 import {
   StyledModal,
-  StyledHeader,
   Content,
   Dialog,
   StyledBody,
   StyledFooter,
 } from "../ModalDialog.styled";
-import { CloseButton } from "./CloseButton";
 import { ModalBackdrop } from "./ModalBackdrop";
 import { FormWrapper } from "./FormWrapper";
 import { ModalSubComponentsProps } from "../ModalDialog.types";
@@ -68,10 +65,12 @@ const Modal = ({
   modalSwipeOffset,
   containerVisible,
   isDoubleFooterLine,
-  isCloseable,
+
   embedded,
   withForm,
   blur,
+
+  ...rest
 }: ModalSubComponentsProps) => {
   const contentRef = React.useRef<null | HTMLDivElement>(null);
 
@@ -177,32 +176,21 @@ const Modal = ({
               containerComponent
             ) : (
               <FormWrapper withForm={withForm || false}>
-                <StyledHeader
-                  id="modal-header-swipe"
-                  className={
-                    classNames(["modal-header", headerProps.className]) ||
-                    "modal-header"
-                  }
-                  {...headerProps}
-                  currentDisplayType={currentDisplayType}
-                >
-                  {header && (
-                    <Heading
-                      level={1}
-                      className="heading"
-                      size={HeadingSize.medium}
-                      truncate
-                    >
-                      {headerComponent}
-                    </Heading>
-                  )}
-                  {isCloseable && (
-                    <CloseButton
-                      currentDisplayType={currentDisplayType}
-                      onClick={onClose}
-                    />
-                  )}
-                </StyledHeader>
+                {header && (
+                  <AsideHeader
+                    id="modal-header-swipe"
+                    className={
+                      classNames(["modal-header", headerProps.className]) ||
+                      "modal-header"
+                    }
+                    header={headerComponent}
+                    onCloseClick={onClose}
+                    {...(currentDisplayType === "modal" && {
+                      style: { marginBottom: "16px" },
+                    })}
+                    {...rest}
+                  />
+                )}
 
                 {body && (
                   <StyledBody

From 46869487ffba416454440fcbf2a7f3e8cff84594 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 15:10:20 +0300
Subject: [PATCH 12/41] Client: UploadPanel: Added a header component.

---
 .../src/components/panels/StyledPanels.js     | 19 ----------
 .../components/panels/UploadPanel/index.js    | 37 +++++++------------
 2 files changed, 14 insertions(+), 42 deletions(-)

diff --git a/packages/client/src/components/panels/StyledPanels.js b/packages/client/src/components/panels/StyledPanels.js
index 5f6e897cdd..e1a9f2c587 100644
--- a/packages/client/src/components/panels/StyledPanels.js
+++ b/packages/client/src/components/panels/StyledPanels.js
@@ -712,24 +712,6 @@ const StyledLink = styled(Link)`
 
 StyledModalRowContainer.defaultProps = { theme: Base };
 
-const StyledUploadHeader = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-
-  .icons-container {
-    margin-left: 16px;
-    margin-right: 16px;
-  }
-
-  .title-container {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    user-select: none;
-  }
-`;
-
 const StyledUploadBody = styled.div`
   width: calc(100% + 16px);
   height: 100%;
@@ -751,6 +733,5 @@ export {
   StyledModalRowContainer,
   StyledLink,
   StyledNewFilesBody,
-  StyledUploadHeader,
   StyledUploadBody,
 };
diff --git a/packages/client/src/components/panels/UploadPanel/index.js b/packages/client/src/components/panels/UploadPanel/index.js
index d38f788d94..f220d9add2 100644
--- a/packages/client/src/components/panels/UploadPanel/index.js
+++ b/packages/client/src/components/panels/UploadPanel/index.js
@@ -39,9 +39,10 @@ import {
 } from "@docspace/shared/components/modal-dialog";
 import { DialogAsideSkeleton } from "@docspace/shared/skeletons/dialog";
 
-import { StyledUploadHeader, StyledUploadBody } from "../StyledPanels";
+import { StyledUploadBody } from "../StyledPanels";
 import FileList from "./FileList";
 import withLoader from "../../../HOCs/withLoader";
+import { AsideHeader } from "@docspace/shared/components/aside";
 
 const StyledModal = styled(ModalDialog)`
   .heading {
@@ -124,34 +125,24 @@ class UploadPanelComponent extends React.Component {
         ? t("UploadAndConvert")
         : t("Files:Convert");
 
+    const url =
+      uploaded && converted ? ClearReactSvgUrl : ButtonCancelReactSvgUrl;
+
+    const clickEvent =
+      uploaded && converted
+        ? this.clearUploadPanel
+        : uploaded
+          ? cancelConversion
+          : this.onCancelUpload;
+
     return (
       <StyledModal
         visible={visible}
         onClose={this.onClose}
         displayType={ModalDialogType.aside}
+        headerIcons={[{ key: "upload-panel", url, onClick: clickEvent }]}
       >
-        <ModalDialog.Header>
-          <StyledUploadHeader>
-            <div className="title-container">{title}</div>
-            <div className="icons-container">
-              {uploaded && converted ? (
-                <IconButton
-                  size={17}
-                  iconName={ClearReactSvgUrl}
-                  isClickable
-                  onClick={this.clearUploadPanel}
-                />
-              ) : (
-                <IconButton
-                  size="20"
-                  iconName={ButtonCancelReactSvgUrl}
-                  isClickable
-                  onClick={uploaded ? cancelConversion : this.onCancelUpload}
-                />
-              )}
-            </div>
-          </StyledUploadHeader>
-        </ModalDialog.Header>
+        <ModalDialog.Header>{title}</ModalDialog.Header>
         <ModalDialog.Body>
           <StyledUploadBody>
             <FileList />

From 7a7f2391905cd0d97a08dd8448f986b293993133 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 15:13:08 +0300
Subject: [PATCH 13/41] Shared: Aside: Deleted useless code.

---
 .../shared/components/aside/Aside.styled.tsx  | 29 +------------------
 1 file changed, 1 insertion(+), 28 deletions(-)

diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx
index 406811b8bb..5ca2aaf9d2 100644
--- a/packages/shared/components/aside/Aside.styled.tsx
+++ b/packages/shared/components/aside/Aside.styled.tsx
@@ -112,33 +112,6 @@ const StyledAside = styled(Container)`
 `;
 StyledAside.defaultProps = { theme: Base };
 
-const StyledControlContainer = styled.div`
-  display: flex;
-
-  width: 17px;
-  height: 17px;
-  position: absolute;
-
-  cursor: pointer;
-
-  align-items: center;
-  justify-content: center;
-  z-index: 450;
-
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          left: 13px;
-          top: 17px;
-        `
-      : css`
-          right: 13px;
-          top: 17px;
-        `}
-`;
-
-StyledControlContainer.defaultProps = { theme: Base };
-
 const StyledHeaderContainer = styled.div`
   display: flex;
   align-items: center;
@@ -180,4 +153,4 @@ const StyledHeaderContainer = styled.div`
     top: 53px; */
   }
 `;
-export { StyledAside, StyledControlContainer, StyledHeaderContainer };
+export { StyledAside, StyledHeaderContainer };

From f943d3f5f757d794c29aa0d089a69bd0de9607ba Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 15:36:24 +0300
Subject: [PATCH 14/41] Client/Shared: VersionHistoryPanel: Added a header
 component.

---
 .../panels/VersionHistoryPanel/index.js       | 23 ++-----------------
 .../shared/components/aside/Aside.types.ts    |  1 +
 .../shared/components/aside/AsideHeader.tsx   | 14 +++++++++--
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/packages/client/src/components/panels/VersionHistoryPanel/index.js b/packages/client/src/components/panels/VersionHistoryPanel/index.js
index 3a6f544781..00a17f3648 100644
--- a/packages/client/src/components/panels/VersionHistoryPanel/index.js
+++ b/packages/client/src/components/panels/VersionHistoryPanel/index.js
@@ -27,7 +27,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Backdrop } from "@docspace/shared/components/backdrop";
-import { Heading } from "@docspace/shared/components/heading";
 import { Aside } from "@docspace/shared/components/aside";
 
 import { FloatingButton } from "@docspace/shared/components/floating-button";
@@ -37,13 +36,11 @@ import { withTranslation } from "react-i18next";
 import {
   StyledVersionHistoryPanel,
   StyledContent,
-  StyledHeaderContent,
   StyledBody,
 } from "../StyledPanels";
 import { SectionBodyContent } from "../../../pages/VersionHistory/Section/";
 import { inject, observer } from "mobx-react";
 import config from "PACKAGE_FILE";
-import { ArticleHeaderLoader } from "@docspace/shared/skeletons/article";
 
 class PureVersionHistoryPanel extends React.Component {
   onClose = () => {
@@ -85,26 +82,10 @@ class PureVersionHistoryPanel extends React.Component {
           visible={visible}
           onClose={this.onClose}
           withoutBodyScroll
+          isLoading={!versions && !isLoading}
+          header={versions ? versions[0].title : ""}
         >
           <StyledContent>
-            <StyledHeaderContent className="version-history-panel-header">
-              {versions && !isLoading ? (
-                <Heading
-                  className="version-history-panel-heading"
-                  size="medium"
-                  truncate
-                >
-                  {versions[0].title}
-                </Heading>
-              ) : (
-                <ArticleHeaderLoader
-                  className="loader-version-history"
-                  height="28"
-                  width="688"
-                />
-              )}
-            </StyledHeaderContent>
-
             <StyledBody className="version-history-panel-body">
               <SectionBodyContent onClose={this.onClose} />
             </StyledBody>
diff --git a/packages/shared/components/aside/Aside.types.ts b/packages/shared/components/aside/Aside.types.ts
index 9bafaf77c5..90fa1bbb48 100644
--- a/packages/shared/components/aside/Aside.types.ts
+++ b/packages/shared/components/aside/Aside.types.ts
@@ -51,6 +51,7 @@ export interface AsideHeaderProps {
   onBackClick?: () => void;
   onCloseClick?: () => void;
   style?: React.CSSProperties;
+  isLoading?: boolean;
 }
 export interface StyledAsideProps {
   visible: boolean;
diff --git a/packages/shared/components/aside/AsideHeader.tsx b/packages/shared/components/aside/AsideHeader.tsx
index 4cede2bcde..29251bf90e 100644
--- a/packages/shared/components/aside/AsideHeader.tsx
+++ b/packages/shared/components/aside/AsideHeader.tsx
@@ -31,6 +31,7 @@ import { IconButton } from "../icon-button";
 import { Text } from "../text";
 import { AsideHeaderProps } from "./Aside.types";
 import { StyledHeaderContainer } from "./Aside.styled";
+import { RectangleSkeleton } from "../../skeletons/rectangle";
 
 const AsideHeader = (props: AsideHeaderProps) => {
   const {
@@ -43,6 +44,7 @@ const AsideHeader = (props: AsideHeaderProps) => {
     className,
     id,
     style,
+    isLoading,
   } = props;
 
   const backButtonRender = (
@@ -64,8 +66,8 @@ const AsideHeader = (props: AsideHeaderProps) => {
     />
   );
 
-  return (
-    <StyledHeaderContainer id={id} className={className} style={style}>
+  const mainComponent = (
+    <>
       {isBackButton && backButtonRender}
       {typeof header === "string" ? (
         <Text fontSize="21px" fontWeight={700} className="header-component">
@@ -88,6 +90,14 @@ const AsideHeader = (props: AsideHeaderProps) => {
           ))}
         </div>
       )}
+    </>
+  );
+
+  const loaderComponent = <RectangleSkeleton height="28" width="100%" />;
+
+  return (
+    <StyledHeaderContainer id={id} className={className} style={style}>
+      {isLoading ? loaderComponent : mainComponent}
       {isCloseable && closeIconRender}
     </StyledHeaderContainer>
   );

From 9934ff843cccdfed3ef99966b08804c5047c0950 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 15:38:33 +0300
Subject: [PATCH 15/41] Shared:Aside: Fixed loader.

---
 packages/shared/components/aside/AsideHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/components/aside/AsideHeader.tsx b/packages/shared/components/aside/AsideHeader.tsx
index 29251bf90e..1936b0521f 100644
--- a/packages/shared/components/aside/AsideHeader.tsx
+++ b/packages/shared/components/aside/AsideHeader.tsx
@@ -90,6 +90,7 @@ const AsideHeader = (props: AsideHeaderProps) => {
           ))}
         </div>
       )}
+      {isCloseable && closeIconRender}
     </>
   );
 
@@ -98,7 +99,6 @@ const AsideHeader = (props: AsideHeaderProps) => {
   return (
     <StyledHeaderContainer id={id} className={className} style={style}>
       {isLoading ? loaderComponent : mainComponent}
-      {isCloseable && closeIconRender}
     </StyledHeaderContainer>
   );
 };

From 52af6b45a4ef13a7ce413e8fbbad72def72abdd8 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 17:08:11 +0300
Subject: [PATCH 16/41] Shared/Client: AddUsersPanel/InvitePanel: Fixed styles
 because of an aside header component.

---
 .../components/panels/AddUsersPanel/index.tsx |  2 ++
 .../panels/InvitePanel/StyledInvitePanel.js   |  4 +++
 .../components/panels/InvitePanel/index.js    |  9 ++++--
 .../sub-components/ExternalLinks.js           |  6 ++--
 packages/shared/components/aside/Aside.tsx    |  3 +-
 .../components/selector/Selector.types.ts     |  1 +
 .../selector/sub-components/Header.tsx        | 31 ++++++-------------
 7 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/client/src/components/panels/AddUsersPanel/index.tsx b/packages/client/src/components/panels/AddUsersPanel/index.tsx
index aeab566c06..5dc57f558b 100644
--- a/packages/client/src/components/panels/AddUsersPanel/index.tsx
+++ b/packages/client/src/components/panels/AddUsersPanel/index.tsx
@@ -529,6 +529,7 @@ const AddUsersPanel = ({
         visible={visible}
         onClose={onClosePanels}
         withoutBodyScroll
+        withoutHeader
       >
         <Selector
           withHeader
@@ -539,6 +540,7 @@ const AddUsersPanel = ({
             withoutBackButton: false,
             withoutBorder: true,
             onBackClick,
+            onCloseClick: onClosePanels,
           }}
           onSelect={onSelect}
           renderCustomItem={renderCustomItem}
diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
index e5f399fc72..adac49f4de 100644
--- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
+++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
@@ -140,6 +140,9 @@ const StyledBlock = styled.div`
 
 StyledBlock.defaultProps = { theme: Base };
 
+const StyledExternalLink = styled.div`
+  border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
+`;
 const StyledInviteUserBody = styled.div`
   display: flex;
   flex-direction: column;
@@ -616,4 +619,5 @@ export {
   StyledInviteLanguage,
   StyledControlContainer,
   StyledInviteUserBody,
+  StyledExternalLink,
 };
diff --git a/packages/client/src/components/panels/InvitePanel/index.js b/packages/client/src/components/panels/InvitePanel/index.js
index c0fa601eec..83f626ff1d 100644
--- a/packages/client/src/components/panels/InvitePanel/index.js
+++ b/packages/client/src/components/panels/InvitePanel/index.js
@@ -431,9 +431,11 @@ const InvitePanel = ({
 
   const invitePanelNode = (
     <>
-      <StyledBlock>
-        <StyledHeading truncate>{t("Common:InviteUsers")}</StyledHeading>
-      </StyledBlock>
+      {isMobileView && (
+        <StyledBlock>
+          <StyledHeading truncate>{t("Common:InviteUsers")}</StyledHeading>
+        </StyledBlock>
+      )}
       {invitePanelIsLoding ? (
         <InvitePanelLoader />
       ) : (
@@ -505,6 +507,7 @@ const InvitePanel = ({
             onClose={onClose}
             withoutBodyScroll
             zIndex={310}
+            header={t("Common:InviteUsers")}
           >
             {invitePanelNode}
           </Aside>
diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js b/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
index e52f3623a0..e267dab9bb 100644
--- a/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
@@ -45,12 +45,12 @@ import { Text } from "@docspace/shared/components/text";
 import AccessSelector from "../../../AccessSelector";
 import PaidQuotaLimitError from "../../../PaidQuotaLimitError";
 import {
-  StyledBlock,
   StyledSubHeader,
   StyledInviteInput,
   StyledInviteInputContainer,
   StyledToggleButton,
   StyledDescription,
+  StyledExternalLink,
 } from "../StyledInvitePanel";
 
 import { getFreeUsersRoleArray, getFreeUsersTypeArray } from "../utils";
@@ -212,7 +212,7 @@ const ExternalLinks = ({
     roomId === -1 ? getFreeUsersTypeArray() : getFreeUsersRoleArray();
 
   return (
-    <StyledBlock noPadding ref={inputsRef}>
+    <StyledExternalLink noPadding ref={inputsRef}>
       <StyledSubHeader inline>
         {t("InviteViaLink")}
         {false && ( //TODO: Change to linksVisible after added link information from backend
@@ -285,7 +285,7 @@ const ExternalLinks = ({
           />
         </StyledInviteInputContainer>
       )}
-    </StyledBlock>
+    </StyledExternalLink>
   );
 };
 
diff --git a/packages/shared/components/aside/Aside.tsx b/packages/shared/components/aside/Aside.tsx
index a00dc943c7..da52d8f2af 100644
--- a/packages/shared/components/aside/Aside.tsx
+++ b/packages/shared/components/aside/Aside.tsx
@@ -41,6 +41,7 @@ const AsidePure = (props: AsideProps) => {
     contentPaddingBottom,
     withoutBodyScroll = false,
     onClose,
+    withoutHeader = false,
     ...rest
   } = props;
   const contentRef = React.useRef<HTMLElement | null>(null);
@@ -55,7 +56,7 @@ const AsidePure = (props: AsideProps) => {
       forwardRef={contentRef}
       data-testid="aside"
     >
-      <AsideHeader onCloseClick={onClose} {...rest} />
+      {!withoutHeader && <AsideHeader onCloseClick={onClose} {...rest} />}
       {withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
     </StyledAside>
   );
diff --git a/packages/shared/components/selector/Selector.types.ts b/packages/shared/components/selector/Selector.types.ts
index 1e3714a6e4..41f6dc58af 100644
--- a/packages/shared/components/selector/Selector.types.ts
+++ b/packages/shared/components/selector/Selector.types.ts
@@ -73,6 +73,7 @@ export type BreadCrumbsProps = {
 
 export type HeaderProps = {
   headerLabel: string;
+  onCloseClick: () => void;
 } & THeaderBackButton;
 
 export type TSelectorHeader =
diff --git a/packages/shared/components/selector/sub-components/Header.tsx b/packages/shared/components/selector/sub-components/Header.tsx
index c3deb7b7c3..91d43ec32c 100644
--- a/packages/shared/components/selector/sub-components/Header.tsx
+++ b/packages/shared/components/selector/sub-components/Header.tsx
@@ -26,36 +26,25 @@
 
 import React from "react";
 
-import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
-
-import { IconButton } from "../../icon-button";
-import { Heading } from "../../heading";
-
-import { StyledHeader } from "../Selector.styled";
 import { HeaderProps } from "../Selector.types";
+import { AsideHeader } from "../../aside";
 
 const Header = React.memo(
   ({
     onBackClick,
+    onCloseClick,
     withoutBackButton,
     headerLabel,
-    withoutBorder,
   }: HeaderProps) => {
     return (
-      <StyledHeader withoutBorder={withoutBorder}>
-        {!withoutBackButton && typeof withoutBackButton === "boolean" && (
-          <IconButton
-            className="arrow-button"
-            iconName={ArrowPathReactSvgUrl}
-            size={17}
-            onClick={onBackClick}
-          />
-        )}
-
-        <Heading className="heading-text" truncate>
-          {headerLabel}
-        </Heading>
-      </StyledHeader>
+      <AsideHeader
+        header={headerLabel}
+        isBackButton={
+          !withoutBackButton && typeof withoutBackButton === "boolean"
+        }
+        onBackClick={onBackClick}
+        onCloseClick={onCloseClick}
+      />
     );
   },
 );

From a45250259b87d28151bfaecd9c01b8b6b3a42532 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 17:31:07 +0300
Subject: [PATCH 17/41] Client: ChangeOwnerPanel: Fixed styles because of an
 aside header component.

---
 .../src/components/panels/ChangeOwnerPanel/index.js       | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/client/src/components/panels/ChangeOwnerPanel/index.js b/packages/client/src/components/panels/ChangeOwnerPanel/index.js
index 7fe76d3e3f..f6bfd87e73 100644
--- a/packages/client/src/components/panels/ChangeOwnerPanel/index.js
+++ b/packages/client/src/components/panels/ChangeOwnerPanel/index.js
@@ -26,7 +26,6 @@
 
 import React from "react";
 import { Backdrop } from "@docspace/shared/components/backdrop";
-import { Heading } from "@docspace/shared/components/heading";
 import { Aside } from "@docspace/shared/components/aside";
 import { Button } from "@docspace/shared/components/button";
 import { Text } from "@docspace/shared/components/text";
@@ -38,7 +37,6 @@ import {
   StyledAsidePanel,
   StyledContent,
   StyledFooter,
-  StyledHeaderContent,
   StyledBody,
 } from "../StyledPanels";
 import { inject, observer } from "mobx-react";
@@ -116,13 +114,9 @@ class ChangeOwnerComponent extends React.Component {
           className="header_aside-panel"
           visible={visible}
           onClose={this.onClose}
+          header={t("ChangeOwner", { fileName })}
         >
           <StyledContent>
-            <StyledHeaderContent>
-              <Heading className="sharing_panel-header" size="medium" truncate>
-                {t("ChangeOwner", { fileName })}
-              </Heading>
-            </StyledHeaderContent>
             <StyledBody>
               <div className="change-owner_body">
                 <Link

From 723a55881fbf66872e741a7dc3ed1539e29d0b89 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 17:31:38 +0300
Subject: [PATCH 18/41] Client: ChangeRoomOwnerPanel: Fixed styles because of
 an aside header component.

---
 .../client/src/components/panels/ChangeRoomOwnerPanel/index.js  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js b/packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js
index e380df266c..d73377b0a9 100644
--- a/packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js
+++ b/packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js
@@ -120,6 +120,7 @@ const ChangeRoomOwner = (props) => {
         className="header_aside-panel"
         visible={visible}
         onClose={onClose}
+        withoutHeader
         withoutBodyScroll
       >
         <PeopleSelector
@@ -133,6 +134,7 @@ const ChangeRoomOwner = (props) => {
           disableSubmitButton={false}
           withHeader
           headerProps={{
+            onCloseClick: onClose,
             onBackClick,
             withoutBackButton: !showBackButton,
             headerLabel: t("Files:ChangeTheRoomOwner"),

From 05131a7b40647805a8a6ced907a930be5db3461a Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 17:31:55 +0300
Subject: [PATCH 19/41] Client: CreateRoomDialog: Fixed styles because of an
 aside header component.

---
 .../CreateEditRoomDialog/CreateRoomDialog.js      | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js
index 2fadca655d..50988c27c2 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js
@@ -33,7 +33,6 @@ import TagHandler from "./handlers/TagHandler";
 
 import SetRoomParams from "./sub-components/SetRoomParams";
 import RoomTypeList from "./sub-components/RoomTypeList";
-import DialogHeader from "./sub-components/DialogHeader";
 
 const StyledModalDialog = styled(ModalDialog)`
   .header-with-button {
@@ -161,6 +160,10 @@ const CreateRoomDialog = ({
     onClose();
   };
 
+  const dialogHeader = roomParams.type
+    ? t("ChooseRoomType")
+    : t("Files:CreateRoom");
+
   return (
     <StyledModalDialog
       displayType="aside"
@@ -170,14 +173,10 @@ const CreateRoomDialog = ({
       isScrollLocked={isScrollLocked}
       withFooterBorder
       isOauthWindowOpen={isOauthWindowOpen}
+      isBackButton={roomParams.type}
+      onBackClick={goBack}
     >
-      <ModalDialog.Header>
-        <DialogHeader
-          disabledIcon={Boolean(startRoomType)}
-          isChooseRoomType={!roomParams.type}
-          onArrowClick={goBack}
-        />
-      </ModalDialog.Header>
+      <ModalDialog.Header>{dialogHeader}</ModalDialog.Header>
 
       <ModalDialog.Body>
         {!roomParams.type ? (

From 23ae780278969a8f2dab5fa0020a97c1d2724f40 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 17:38:14 +0300
Subject: [PATCH 20/41] Client: CreateEditRoomDialog: Fixed styles because of
 an aside header component.

---
 .../CreateEditRoomDialog/EditRoomDialog.js    |  5 +-
 .../sub-components/DialogHeader.js            | 67 -------------------
 .../shared/components/aside/Aside.styled.tsx  |  1 +
 3 files changed, 2 insertions(+), 71 deletions(-)
 delete mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/DialogHeader.js

diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js
index bbc27807a2..9a7c7fefa6 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js
@@ -28,7 +28,6 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
 
 import TagHandler from "./handlers/TagHandler";
 import SetRoomParams from "./sub-components/SetRoomParams";
-import DialogHeader from "./sub-components/DialogHeader";
 
 import { ModalDialog } from "@docspace/shared/components/modal-dialog";
 import { Button } from "@docspace/shared/components/button";
@@ -132,9 +131,7 @@ const EditRoomDialog = ({
       isScrollLocked={isScrollLocked}
       withFooterBorder
     >
-      <ModalDialog.Header>
-        <DialogHeader isEdit />
-      </ModalDialog.Header>
+      <ModalDialog.Header>{t("RoomEditing")}</ModalDialog.Header>
 
       <ModalDialog.Body>
         <SetRoomParams
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/DialogHeader.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/DialogHeader.js
deleted file mode 100644
index 25cfe58bc8..0000000000
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/DialogHeader.js
+++ /dev/null
@@ -1,67 +0,0 @@
-// (c) Copyright Ascensio System SIA 2009-2024
-//
-// This program is a free software product.
-// You can redistribute it and/or modify it under the terms
-// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
-// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
-// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
-// any third-party rights.
-//
-// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
-// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
-// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
-//
-// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
-//
-// The  interactive user interfaces in modified source and object code versions of the Program must
-// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
-//
-// Pursuant to Section 7(b) of the License you must retain the original Product logo when
-// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
-// trademark law for use of our trademarks.
-//
-// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
-// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
-// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-
-import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
-import React from "react";
-import { withTranslation } from "react-i18next";
-
-import withLoader from "@docspace/client/src/HOCs/withLoader";
-import { IconButton } from "@docspace/shared/components/icon-button";
-import CreateEditRoomDilogHeaderLoader from "@docspace/shared/skeletons/create-edit-room/DilogHeader";
-
-const DialogHeader = ({
-  t,
-  isEdit,
-  isChooseRoomType,
-  onArrowClick,
-  disabledIcon,
-}) => {
-  return (
-    <>
-      {isEdit ? (
-        <span>{t("RoomEditing")}</span>
-      ) : isChooseRoomType ? (
-        <span>{t("ChooseRoomType")}</span>
-      ) : (
-        <div className="header-with-button">
-          {!disabledIcon && (
-            <IconButton
-              size={17}
-              iconName={ArrowPathReactSvgUrl}
-              className="sharing_panel-arrow"
-              onClick={onArrowClick}
-            />
-          )}
-          <div>{t("Files:CreateRoom")}</div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default withTranslation(["CreateEditRoomDialog", "Files"])(
-  withLoader(DialogHeader)(<CreateEditRoomDilogHeaderLoader />),
-);
diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx
index 5ca2aaf9d2..d9fc1e6dd6 100644
--- a/packages/shared/components/aside/Aside.styled.tsx
+++ b/packages/shared/components/aside/Aside.styled.tsx
@@ -118,6 +118,7 @@ const StyledHeaderContainer = styled.div`
   justify-content: space-between;
   margin: 0 16px;
   height: 53px;
+  min-height: 53px;
   position: relative;
 
   .additional-icons-container {

From 646fcb815bc53f78b0c95316b662eb49fd0ce513 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 17:52:35 +0300
Subject: [PATCH 21/41] Client: RoomsSelector: Fixed styles because of an aside
 header component.

---
 .../src/components/RoomsSelectorInput/index.js      |  4 ++--
 packages/shared/components/aside/Aside.types.ts     |  1 +
 packages/shared/selectors/Room/index.tsx            | 13 +------------
 3 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/RoomsSelectorInput/index.js b/packages/client/src/components/RoomsSelectorInput/index.js
index c1a5142346..d5772fb893 100644
--- a/packages/client/src/components/RoomsSelectorInput/index.js
+++ b/packages/client/src/components/RoomsSelectorInput/index.js
@@ -105,13 +105,12 @@ const RoomsSelectorInput = (props) => {
       submitButtonLabel={submitButtonLabel}
       onSubmit={handleOnSubmit}
       withHeader={withHeader}
-      headerProps={headerProps}
+      headerProps={{ ...headerProps, onCloseClick: onClose }}
       setIsDataReady={setIsDataReady}
       roomType={roomType}
     />
   );
 
-  console.log("ROOMS");
   return (
     <StyledBodyWrapper maxWidth={maxWidth} className={className}>
       <FileInput
@@ -138,6 +137,7 @@ const RoomsSelectorInput = (props) => {
         withoutBodyScroll
         zIndex={310}
         onClose={onClose}
+        withoutHeader
       >
         {SelectorBody}
       </Aside>
diff --git a/packages/shared/components/aside/Aside.types.ts b/packages/shared/components/aside/Aside.types.ts
index 90fa1bbb48..05d29f8afe 100644
--- a/packages/shared/components/aside/Aside.types.ts
+++ b/packages/shared/components/aside/Aside.types.ts
@@ -34,6 +34,7 @@ export interface AsideProps {
   withoutBodyScroll?: boolean;
   onClose: () => void;
 
+  withoutHeader: boolean;
   header: AsideHeaderProps["header"];
   isBackButton?: AsideHeaderProps["isBackButton"];
   isCloseable?: AsideHeaderProps["isCloseable"];
diff --git a/packages/shared/selectors/Room/index.tsx b/packages/shared/selectors/Room/index.tsx
index 718473f014..7cba6b9921 100644
--- a/packages/shared/selectors/Room/index.tsx
+++ b/packages/shared/selectors/Room/index.tsx
@@ -44,7 +44,6 @@ import { TTranslation } from "../../types";
 
 import { RoomSelectorProps } from "./RoomSelector.types";
 import { convertToItems } from "./RoomSelector.utils";
-import { Aside } from "../../components/aside";
 
 const PAGE_COUNT = 100;
 
@@ -211,7 +210,7 @@ const RoomSelector = ({
       }
     : {};
 
-  const SelectorRoom = (
+  return (
     <Selector
       id={id}
       className={className}
@@ -246,16 +245,6 @@ const RoomSelector = ({
       }
     />
   );
-
-  if (!onClose) {
-    return SelectorRoom;
-  }
-
-  return (
-    <Aside visible onClose={onClose} withoutBodyScroll>
-      {SelectorRoom}
-    </Aside>
-  );
 };
 
 export default RoomSelector;

From 93b59b5b98afcf48951e195b8b80a74bc2dbb8dc Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 18:22:09 +0300
Subject: [PATCH 22/41] Shared: selectors/Files: Fixed styles because of an
 aside header component.

---
 packages/shared/selectors/Files/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/shared/selectors/Files/index.tsx b/packages/shared/selectors/Files/index.tsx
index ddcd246312..1efe4e7e42 100644
--- a/packages/shared/selectors/Files/index.tsx
+++ b/packages/shared/selectors/Files/index.tsx
@@ -476,7 +476,10 @@ const FilesSelectorComponent = ({
   ]);
 
   const headerProps: TSelectorHeader = withHeader
-    ? { withHeader, headerProps: { headerLabel } }
+    ? {
+        withHeader,
+        headerProps: { headerLabel, onCloseClick: onCancel },
+      }
     : {};
 
   const withSearch = withSearchProp
@@ -617,6 +620,7 @@ const FilesSelectorComponent = ({
         withoutBodyScroll
         zIndex={310}
         onClose={onCancel}
+        withoutHeader
       >
         {SelectorBody}
       </Aside>

From 2123276419925d922229a0ca0e8a2c36f333c41a Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 18:40:27 +0300
Subject: [PATCH 23/41] Shared: Filter:  Fixed styles because of an aside
 header component.

---
 .../shared/components/filter/Filter.styled.ts | 80 -------------------
 .../filter/sub-components/FilterBlock.tsx     | 51 +++++-------
 packages/shared/selectors/Groups/index.tsx    | 12 +--
 packages/shared/selectors/People/index.tsx    | 12 +--
 4 files changed, 21 insertions(+), 134 deletions(-)

diff --git a/packages/shared/components/filter/Filter.styled.ts b/packages/shared/components/filter/Filter.styled.ts
index ec88bdbe2c..90bc0cf27f 100644
--- a/packages/shared/components/filter/Filter.styled.ts
+++ b/packages/shared/components/filter/Filter.styled.ts
@@ -216,56 +216,6 @@ const StyledFilterBlock = styled.div`
 
 StyledFilterBlock.defaultProps = { theme: Base };
 
-const StyledFilterBlockHeader = styled.div<{ isSelector?: boolean }>`
-  height: 53px;
-  min-height: 53px;
-
-  margin: 0;
-
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          padding-right: 16px;
-          padding-left: 37px;
-        `
-      : css`
-          padding-left: 16px;
-          padding-right: 37px;
-        `}
-
-  box-sizing: border-box;
-
-  border-bottom: ${(props) =>
-    props.isSelector ? "none" : props.theme.filterInput.filter.border};
-
-  display: flex;
-  align-items: center;
-
-  h1 {
-    font-weight: 700;
-  }
-
-  #filter_search-options-clear {
-    margin-left: 16px;
-  }
-  .arrow-button {
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            margin-left: 12px;
-          `
-        : css`
-            margin-right: 12px;
-          `}
-  }
-
-  svg {
-    cursor: pointer;
-  }
-`;
-
-StyledFilterBlockHeader.defaultProps = { theme: Base };
-
 const StyledFilterBlockItem = styled.div<{
   withoutHeader: boolean;
   isFirst?: boolean;
@@ -500,34 +450,6 @@ const StyledFilterBlockFooter = styled.div`
 
 StyledFilterBlockFooter.defaultProps = { theme: Base };
 
-const StyledControlContainer = styled.div`
-  display: flex;
-
-  width: 24px;
-  height: 24px;
-  position: absolute;
-
-  border-radius: 100px;
-  cursor: pointer;
-
-  align-items: center;
-  justify-content: center;
-  z-index: 450;
-
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          left: 13px;
-          top: 17px;
-        `
-      : css`
-          right: 13px;
-          top: 17px;
-        `}
-`;
-
-StyledControlContainer.defaultProps = { theme: Base };
-
 const selectedViewIcon = css`
   svg {
     path {
@@ -697,7 +619,6 @@ StyledSortButton.defaultProps = { theme: Base };
 export {
   StyledSortButton,
   StyledFilterBlock,
-  StyledFilterBlockHeader,
   StyledFilterBlockItem,
   StyledFilterBlockItemHeader,
   StyledFilterBlockItemContent,
@@ -711,7 +632,6 @@ export {
   StyledFilterBlockItemCheckboxContainer,
   StyledFilterBlockItemSeparator,
   StyledFilterBlockFooter,
-  StyledControlContainer,
 };
 
 export { StyledFilterInput, StyledSearchInput, StyledButton };
diff --git a/packages/shared/components/filter/sub-components/FilterBlock.tsx b/packages/shared/components/filter/sub-components/FilterBlock.tsx
index e5c7dfc9cd..b57dc5d0c2 100644
--- a/packages/shared/components/filter/sub-components/FilterBlock.tsx
+++ b/packages/shared/components/filter/sub-components/FilterBlock.tsx
@@ -28,7 +28,6 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 
 import ClearReactSvgUrl from "PUBLIC_DIR/images/clear.react.svg?url";
-import CrossIcon from "PUBLIC_DIR/images/cross.react.svg?url";
 
 import GroupsSelector from "../../../selectors/Groups";
 import PeopleSelector from "../../../selectors/People";
@@ -38,18 +37,11 @@ import { FilterBlockLoader } from "../../../skeletons/filter";
 
 import { Backdrop } from "../../backdrop";
 import { Button, ButtonSize } from "../../button";
-import { Heading, HeadingLevel, HeadingSize } from "../../heading";
-import { IconButton } from "../../icon-button";
 import { Scrollbar } from "../../scrollbar";
 import { Portal } from "../../portal";
 import { TSelectorItem } from "../../selector";
 
-import {
-  StyledControlContainer,
-  StyledFilterBlock,
-  StyledFilterBlockFooter,
-  StyledFilterBlockHeader,
-} from "../Filter.styled";
+import { StyledFilterBlock, StyledFilterBlockFooter } from "../Filter.styled";
 
 import { FilterBlockProps, TGroupItem, TItem } from "../Filter.types";
 import {
@@ -58,6 +50,7 @@ import {
 } from "../Filter.utils";
 
 import FilterBlockItem from "./FilterBlockItem";
+import { AsideHeader } from "../../aside";
 
 const FilterBlock = ({
   selectedFilterValue,
@@ -481,7 +474,7 @@ const FilterBlock = ({
   const showFooter = isLoading ? false : isEqualFilter();
   const showClearFilterBtn =
     !isLoading && (selectedFilterValue.length > 0 || filterValues.length > 0);
-  console.log("showSelector.type", showSelector.type);
+
   const filterBlockComponent = (
     <>
       {showSelector.show ? (
@@ -496,6 +489,7 @@ const FilterBlock = ({
               withHeader
               headerProps={{
                 onBackClick: onArrowClick,
+                onCloseClick: hideFilterBlock,
                 headerLabel: selectorLabel,
                 withoutBackButton: false,
               }}
@@ -509,6 +503,7 @@ const FilterBlock = ({
               withHeader
               headerProps={{
                 onBackClick: onArrowClick,
+                onCloseClick: hideFilterBlock,
                 headerLabel: selectorLabel,
                 withoutBackButton: false,
               }}
@@ -521,6 +516,7 @@ const FilterBlock = ({
               withHeader
               headerProps={{
                 onBackClick: onArrowClick,
+                onCloseClick: hideFilterBlock,
                 headerLabel: selectorLabel,
                 withoutBackButton: false,
               }}
@@ -533,29 +529,20 @@ const FilterBlock = ({
         </StyledFilterBlock>
       ) : (
         <StyledFilterBlock>
-          <StyledFilterBlockHeader>
-            <Heading size={HeadingSize.medium} level={HeadingLevel.h1}>
-              {filterHeader}
-            </Heading>
-            {showClearFilterBtn && (
-              <IconButton
-                id="filter_search-options-clear"
-                iconName={ClearReactSvgUrl}
-                isFill
-                onClick={onClearFilter}
-                size={17}
-              />
-            )}
+          <AsideHeader
+            header={filterHeader}
+            onCloseClick={hideFilterBlock}
+            {...(showClearFilterBtn && {
+              headerIcons: [
+                {
+                  key: "filter-icon",
+                  url: ClearReactSvgUrl,
+                  onClick: onClearFilter,
+                },
+              ],
+            })}
+          />
 
-            <StyledControlContainer onClick={hideFilterBlock}>
-              <IconButton
-                size={17}
-                className="close-button"
-                iconName={CrossIcon}
-                isClickable
-              />
-            </StyledControlContainer>
-          </StyledFilterBlockHeader>
           <div className="filter-body">
             {isLoading ? (
               <FilterBlockLoader
diff --git a/packages/shared/selectors/Groups/index.tsx b/packages/shared/selectors/Groups/index.tsx
index 81947ebad3..03d537ac6e 100644
--- a/packages/shared/selectors/Groups/index.tsx
+++ b/packages/shared/selectors/Groups/index.tsx
@@ -143,7 +143,7 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
     [searchValue],
   );
 
-  const SelectorGroups = (
+  return (
     <Selector
       id={id}
       className={className}
@@ -187,16 +187,6 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
       }
     />
   );
-
-  if (!onClose) {
-    return SelectorGroups;
-  }
-
-  return (
-    <Aside visible onClose={onClose} withoutBodyScroll>
-      {SelectorGroups}
-    </Aside>
-  );
 };
 
 export default GroupsSelector;
diff --git a/packages/shared/selectors/People/index.tsx b/packages/shared/selectors/People/index.tsx
index f45aea8244..b677c39bf7 100644
--- a/packages/shared/selectors/People/index.tsx
+++ b/packages/shared/selectors/People/index.tsx
@@ -52,7 +52,6 @@ import { AvatarRole } from "../../components/avatar";
 import { Text } from "../../components/text";
 
 import { PeopleSelectorProps } from "./PeopleSelector.types";
-import { Aside } from "../../components/aside";
 
 const toListItem = (
   item: TUser,
@@ -379,7 +378,7 @@ const PeopleSelector = ({
     );
   };
 
-  const SelectorUser = (
+  return (
     <Selector
       id={id}
       alwaysShowFooter={itemsList.length !== 0 || Boolean(searchValue)}
@@ -416,15 +415,6 @@ const PeopleSelector = ({
       {...infoProps}
     />
   );
-  if (!onClose) {
-    return SelectorUser;
-  }
-
-  return (
-    <Aside visible onClose={onClose} withoutBodyScroll>
-      {SelectorUser}
-    </Aside>
-  );
 };
 
 export default PeopleSelector;

From 756f9b319cef049f24d1f96c9d1a93afd9463f0e Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 18:59:02 +0300
Subject: [PATCH 24/41] Added support for non-string header, refactoring.

---
 .../dialogs/ChangePricingPlanDialog/index.js      |  6 +-----
 .../sub-components/backup-list/index.js           |  6 +-----
 .../sub-components/ForgotPasswordModalDialog.tsx  |  6 +-----
 .../sub-components/RegisterModalDialog.tsx        |  6 +-----
 packages/shared/components/aside/Aside.styled.tsx | 15 ++++++++-------
 packages/shared/components/aside/AsideHeader.tsx  |  8 ++++++--
 .../RecoverAccessModalDialog.tsx                  |  6 +-----
 7 files changed, 19 insertions(+), 34 deletions(-)

diff --git a/packages/client/src/components/dialogs/ChangePricingPlanDialog/index.js b/packages/client/src/components/dialogs/ChangePricingPlanDialog/index.js
index bd78a132b7..2914257078 100644
--- a/packages/client/src/components/dialogs/ChangePricingPlanDialog/index.js
+++ b/packages/client/src/components/dialogs/ChangePricingPlanDialog/index.js
@@ -97,11 +97,7 @@ const ChangePricingPlanDialog = ({
       isLarge
       isLoading={!ready}
     >
-      <ModalDialog.Header>
-        <Text isBold fontSize="21px">
-          {t("ChangePricingPlan")}
-        </Text>
-      </ModalDialog.Header>
+      <ModalDialog.Header>{t("ChangePricingPlan")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text fontSize="13px" isBold className="cannot-downgrade-plan">
           {t("CannotChangePlan")}
diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
index a1f56f8f8c..daa8bca80f 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
@@ -230,11 +230,7 @@ const BackupListModalDialog = (props) => {
       onClose={onModalClose}
       withFooterBorder
     >
-      <ModalDialog.Header>
-        <Text fontSize="21px" fontWeight={700}>
-          {t("BackupList")}
-        </Text>
-      </ModalDialog.Header>
+      <ModalDialog.Header>{t("BackupList")}</ModalDialog.Header>
       <ModalDialog.Body>
         <StyledBackupList
           isCopyingToLocal={isCopyingToLocal}
diff --git a/packages/login/src/components/LoginForm/sub-components/ForgotPasswordModalDialog.tsx b/packages/login/src/components/LoginForm/sub-components/ForgotPasswordModalDialog.tsx
index 0f0ef01906..a72fd45890 100644
--- a/packages/login/src/components/LoginForm/sub-components/ForgotPasswordModalDialog.tsx
+++ b/packages/login/src/components/LoginForm/sub-components/ForgotPasswordModalDialog.tsx
@@ -118,11 +118,7 @@ const ForgotPasswordModalDialog = ({
       onClose={onDialogClose}
       id="forgot-password-modal"
     >
-      <ModalDialog.Header>
-        <Text isBold fontSize="21px">
-          {t("PasswordRecoveryTitle")}
-        </Text>
-      </ModalDialog.Header>
+      <ModalDialog.Header>{t("PasswordRecoveryTitle")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text
           key="text-body"
diff --git a/packages/login/src/components/Register/sub-components/RegisterModalDialog.tsx b/packages/login/src/components/Register/sub-components/RegisterModalDialog.tsx
index bfe9e0bb1e..25facc27e4 100644
--- a/packages/login/src/components/Register/sub-components/RegisterModalDialog.tsx
+++ b/packages/login/src/components/Register/sub-components/RegisterModalDialog.tsx
@@ -97,11 +97,7 @@ const RegisterModalDialog = ({
       onClose={onRegisterModalClose}
       isLarge
     >
-      <ModalDialog.Header>
-        <Text isBold fontSize="21px">
-          {t("RegisterTitle")}
-        </Text>
-      </ModalDialog.Header>
+      <ModalDialog.Header>{t("RegisterTitle")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text key="text-body" isBold={false} fontSize="13px" noSelect>
           {getDomainsBlock()}
diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx
index d9fc1e6dd6..58ee4c9f44 100644
--- a/packages/shared/components/aside/Aside.styled.tsx
+++ b/packages/shared/components/aside/Aside.styled.tsx
@@ -126,6 +126,14 @@ const StyledHeaderContainer = styled.div`
     margin-inline: 16px 16px;
     gap: 16px;
   }
+
+  .heading {
+    font-family: ${(props) => props.theme.fontFamily};
+    color: ${(props) => props.theme.modalDialog.textColor};
+    font-weight: 700;
+    font-size: 21px;
+  }
+
   .arrow-button {
     margin-inline: 0 12px;
   }
@@ -145,13 +153,6 @@ const StyledHeaderContainer = styled.div`
     position: absolute;
     left: -16px;
     bottom: 0;
-
-    /* content: "";
-    border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
-    width: 100%;
-    position: fixed;
-    left: 0;
-    top: 53px; */
   }
 `;
 export { StyledAside, StyledHeaderContainer };
diff --git a/packages/shared/components/aside/AsideHeader.tsx b/packages/shared/components/aside/AsideHeader.tsx
index 1936b0521f..12e7b39e05 100644
--- a/packages/shared/components/aside/AsideHeader.tsx
+++ b/packages/shared/components/aside/AsideHeader.tsx
@@ -32,7 +32,7 @@ import { Text } from "../text";
 import { AsideHeaderProps } from "./Aside.types";
 import { StyledHeaderContainer } from "./Aside.styled";
 import { RectangleSkeleton } from "../../skeletons/rectangle";
-
+import { Heading, HeadingSize } from "../heading";
 const AsideHeader = (props: AsideHeaderProps) => {
   const {
     isBackButton = false,
@@ -66,6 +66,8 @@ const AsideHeader = (props: AsideHeaderProps) => {
     />
   );
 
+  // TODO: Heading is temporary until all dialogues are checked
+
   const mainComponent = (
     <>
       {isBackButton && backButtonRender}
@@ -74,7 +76,9 @@ const AsideHeader = (props: AsideHeaderProps) => {
           {header}
         </Text>
       ) : (
-        header
+        <Heading className="heading" size={HeadingSize.medium} truncate>
+          {header}
+        </Heading>
       )}
       {headerIcons.length > 0 && (
         <div className="additional-icons-container">
diff --git a/packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.tsx b/packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.tsx
index 5ea60cdc5e..a28af33cdc 100644
--- a/packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.tsx
+++ b/packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.tsx
@@ -127,11 +127,7 @@ const RecoverAccessModalDialog: React.FC<IRecoverAccessModalDialogProps> = ({
       onClose={onRecoverModalClose}
       displayType={ModalDialogType.modal}
     >
-      <ModalDialog.Header>
-        <Text isBold fontSize="21px">
-          {t("Common:RecoverTitle")}
-        </Text>
-      </ModalDialog.Header>
+      <ModalDialog.Header>{t("Common:RecoverTitle")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text
           key="text-body"

From 6eea58d59142ee142934dbc6ae073772c4f2967f Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 19:27:56 +0300
Subject: [PATCH 25/41] Refactoring.

---
 .../panels/InvitePanel/StyledInvitePanel.js   | 24 +-----
 .../components/panels/InvitePanel/index.js    |  1 -
 .../shared/components/aside/Aside.styled.tsx  |  2 +-
 .../sub-components/CloseButton.tsx            | 74 -------------------
 .../selectors/Groups/GroupsSelector.types.ts  |  1 -
 packages/shared/selectors/Groups/index.tsx    |  2 +-
 .../selectors/People/PeopleSelector.types.ts  |  1 -
 packages/shared/selectors/People/index.tsx    |  1 -
 .../selectors/Room/RoomSelector.types.ts      |  1 -
 packages/shared/selectors/Room/index.tsx      |  2 -
 10 files changed, 5 insertions(+), 104 deletions(-)
 delete mode 100644 packages/shared/components/modal-dialog/sub-components/CloseButton.tsx

diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
index adac49f4de..52e7edf8e5 100644
--- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
+++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
@@ -125,17 +125,7 @@ const ScrollList = styled.div`
 
 const StyledBlock = styled.div`
   border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
-
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          padding-right: 16px;
-          padding-left: 37px;
-        `
-      : css`
-          padding-left: 16px;
-          padding-right: 37px;
-        `}
+  padding-inline: 16px 37px;
 `;
 
 StyledBlock.defaultProps = { theme: Base };
@@ -525,16 +515,8 @@ const StyledControlContainer = styled.div`
   z-index: 450;
 
   @media ${mobile} {
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            left: 13px;
-            top: 17px;
-          `
-        : css`
-            right: 13px;
-            top: 17px;
-          `}
+    top: 17px;
+    inset-inline-end: 16px;
   }
 `;
 const StyledInviteLanguage = styled.div`
diff --git a/packages/client/src/components/panels/InvitePanel/index.js b/packages/client/src/components/panels/InvitePanel/index.js
index 83f626ff1d..b8f3410589 100644
--- a/packages/client/src/components/panels/InvitePanel/index.js
+++ b/packages/client/src/components/panels/InvitePanel/index.js
@@ -50,7 +50,6 @@ import {
   StyledInvitePanel,
   StyledButtons,
   StyledControlContainer,
-  StyledCrossIconMobile,
 } from "./StyledInvitePanel";
 
 import ItemsList from "./sub-components/ItemsList";
diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx
index 58ee4c9f44..ece81484dc 100644
--- a/packages/shared/components/aside/Aside.styled.tsx
+++ b/packages/shared/components/aside/Aside.styled.tsx
@@ -151,7 +151,7 @@ const StyledHeaderContainer = styled.div`
     border-bottom: 1px solid rgb(236, 238, 241);
     width: calc(100% + 32px);
     position: absolute;
-    left: -16px;
+    inset-inline-end: -16px;
     bottom: 0;
   }
 `;
diff --git a/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx b/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
deleted file mode 100644
index 5b34ee03e9..0000000000
--- a/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// (c) Copyright Ascensio System SIA 2009-2024
-//
-// This program is a free software product.
-// You can redistribute it and/or modify it under the terms
-// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
-// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
-// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
-// any third-party rights.
-//
-// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
-// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
-// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
-//
-// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
-//
-// The  interactive user interfaces in modified source and object code versions of the Program must
-// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
-//
-// Pursuant to Section 7(b) of the License you must retain the original Product logo when
-// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
-// trademark law for use of our trademarks.
-//
-// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
-// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
-// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-
-import React from "react";
-import styled from "styled-components";
-
-import CrossIconReactSvgUrl from "PUBLIC_DIR/images/icons/17/cross.react.svg?url";
-
-import { IconButton } from "../../icon-button";
-import { Base } from "../../../themes";
-
-import { ModalDialogCloseButtonProps } from "../ModalDialog.types";
-import { ModalDialogType } from "../ModalDialog.enums";
-
-const StyledCloseButtonWrapper = styled.div<{
-  currentDisplayType: ModalDialogType;
-}>`
-  width: 17px;
-  height: 17px;
-
-  margin-left: auto;
-  padding-left: 2px;
-
-  svg {
-    cursor: pointer;
-  }
-`;
-
-StyledCloseButtonWrapper.defaultProps = { theme: Base };
-
-const CloseButton = ({
-  currentDisplayType,
-
-  onClick,
-}: ModalDialogCloseButtonProps) => {
-  return (
-    <StyledCloseButtonWrapper
-      onClick={onClick}
-      currentDisplayType={currentDisplayType}
-      className="modal-close"
-    >
-      <IconButton
-        size={17}
-        className="close-button"
-        iconName={CrossIconReactSvgUrl}
-      />
-    </StyledCloseButtonWrapper>
-  );
-};
-
-export { CloseButton };
diff --git a/packages/shared/selectors/Groups/GroupsSelector.types.ts b/packages/shared/selectors/Groups/GroupsSelector.types.ts
index a322ef19a6..f1f5ad93dc 100644
--- a/packages/shared/selectors/Groups/GroupsSelector.types.ts
+++ b/packages/shared/selectors/Groups/GroupsSelector.types.ts
@@ -33,7 +33,6 @@ import { TSelectorItem } from "../../components/selector";
 export type GroupsSelectorProps = TSelectorHeader & {
   id?: string;
   className?: string;
-  onClose?: () => void;
   onSubmit: (
     selectedItems: TSelectorItem[],
     access?: TAccessRight | null,
diff --git a/packages/shared/selectors/Groups/index.tsx b/packages/shared/selectors/Groups/index.tsx
index 03d537ac6e..d0795434e9 100644
--- a/packages/shared/selectors/Groups/index.tsx
+++ b/packages/shared/selectors/Groups/index.tsx
@@ -43,7 +43,7 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
     className,
 
     headerProps,
-    onClose,
+
     onSubmit,
   } = props;
 
diff --git a/packages/shared/selectors/People/PeopleSelector.types.ts b/packages/shared/selectors/People/PeopleSelector.types.ts
index 75dd5b2af5..3e283eaea8 100644
--- a/packages/shared/selectors/People/PeopleSelector.types.ts
+++ b/packages/shared/selectors/People/PeopleSelector.types.ts
@@ -64,5 +64,4 @@ export type PeopleSelectorProps = TSelectorHeader &
 
     emptyScreenHeader?: string;
     emptyScreenDescription?: string;
-    onClose?: () => void;
   };
diff --git a/packages/shared/selectors/People/index.tsx b/packages/shared/selectors/People/index.tsx
index b677c39bf7..bda1660d16 100644
--- a/packages/shared/selectors/People/index.tsx
+++ b/packages/shared/selectors/People/index.tsx
@@ -142,7 +142,6 @@ const PeopleSelector = ({
 
   emptyScreenHeader,
   emptyScreenDescription,
-  onClose,
 }: PeopleSelectorProps) => {
   const { t }: { t: TTranslation } = useTranslation(["Common"]);
 
diff --git a/packages/shared/selectors/Room/RoomSelector.types.ts b/packages/shared/selectors/Room/RoomSelector.types.ts
index 0f3ca64cf7..bfa38caf8f 100644
--- a/packages/shared/selectors/Room/RoomSelector.types.ts
+++ b/packages/shared/selectors/Room/RoomSelector.types.ts
@@ -48,5 +48,4 @@ export type RoomSelectorProps = TSelectorHeader &
     withSearch?: boolean;
 
     disableThirdParty?: boolean;
-    onClose?: () => void;
   };
diff --git a/packages/shared/selectors/Room/index.tsx b/packages/shared/selectors/Room/index.tsx
index 7cba6b9921..aa73fc615c 100644
--- a/packages/shared/selectors/Room/index.tsx
+++ b/packages/shared/selectors/Room/index.tsx
@@ -73,8 +73,6 @@ const RoomSelector = ({
   roomType,
 
   disableThirdParty,
-
-  onClose,
 }: RoomSelectorProps) => {
   const { t }: { t: TTranslation } = useTranslation(["Common"]);
 

From 2de7beefa212acfacc317cb744f71b92557bea0d Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 19:46:11 +0300
Subject: [PATCH 26/41] Refactoring.

---
 .../src/components/panels/StyledPanels.js     | 35 -------------------
 .../shared/components/aside/Aside.types.ts    |  2 +-
 .../ContextMenuButton.styled.ts               | 16 ++++-----
 .../context-menu-button/ContextMenuButton.tsx |  9 +++--
 4 files changed, 13 insertions(+), 49 deletions(-)

diff --git a/packages/client/src/components/panels/StyledPanels.js b/packages/client/src/components/panels/StyledPanels.js
index e1a9f2c587..7599b7a77c 100644
--- a/packages/client/src/components/panels/StyledPanels.js
+++ b/packages/client/src/components/panels/StyledPanels.js
@@ -256,40 +256,6 @@ const StyledContent = styled.div`
 
 StyledContent.defaultProps = { theme: Base };
 
-const StyledHeaderContent = styled.div`
-  display: flex;
-  align-items: center;
-
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          padding-right: 16px;
-          padding-left: 37px;
-        `
-      : css`
-          padding-left: 16px;
-          padding-right: 37px;
-        `}
-
-  border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
-
-  .files-operations-header,
-  .sharing_panel-header {
-    font-weight: 700;
-    margin: 14px 0;
-  }
-
-  @media ${desktop} {
-    .files-operations-header,
-    .sharing_panel-header {
-      margin: 12px 0;
-      font-size: 18px;
-    }
-  }
-`;
-
-StyledHeaderContent.defaultProps = { theme: Base };
-
 const StyledBody = styled.div`
   &.files-operations-body {
     ${(props) =>
@@ -726,7 +692,6 @@ export {
   StyledEmbeddingPanel,
   StyledVersionHistoryPanel,
   StyledContent,
-  StyledHeaderContent,
   StyledBody,
   StyledFooter,
   StyledLinkRow,
diff --git a/packages/shared/components/aside/Aside.types.ts b/packages/shared/components/aside/Aside.types.ts
index 05d29f8afe..dc5619b220 100644
--- a/packages/shared/components/aside/Aside.types.ts
+++ b/packages/shared/components/aside/Aside.types.ts
@@ -43,7 +43,7 @@ export interface AsideProps {
   onCloseClick?: AsideHeaderProps["onCloseClick"];
 }
 export interface AsideHeaderProps {
-  header: string;
+  header: string | React.ReactNode;
   className?: string;
   id?: string;
   isBackButton?: boolean;
diff --git a/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts b/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts
index 4599e616a8..923816e8e1 100644
--- a/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts
+++ b/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts
@@ -73,13 +73,13 @@ const StyledContent = styled.div`
 `;
 StyledContent.defaultProps = { theme: Base };
 
-const StyledHeaderContent = styled.div`
-  display: flex;
-  align-items: center;
-  border-bottom: ${(props) =>
-    props.theme.contextMenuButton.headerContent.borderBottom};
-`;
-StyledHeaderContent.defaultProps = { theme: Base };
+// const StyledHeaderContent = styled.div`
+//   display: flex;
+//   align-items: center;
+//   border-bottom: ${(props) =>
+//     props.theme.contextMenuButton.headerContent.borderBottom};
+// `;
+// StyledHeaderContent.defaultProps = { theme: Base };
 
 const StyledBodyContent = styled.div`
   position: relative;
@@ -101,4 +101,4 @@ const StyledBodyContent = styled.div`
 `;
 StyledBodyContent.defaultProps = { theme: Base };
 
-export { StyledBodyContent, StyledHeaderContent, StyledContent, StyledOuter };
+export { StyledBodyContent, StyledContent, StyledOuter };
diff --git a/packages/shared/components/context-menu-button/ContextMenuButton.tsx b/packages/shared/components/context-menu-button/ContextMenuButton.tsx
index a304537ab0..72b356a2c0 100644
--- a/packages/shared/components/context-menu-button/ContextMenuButton.tsx
+++ b/packages/shared/components/context-menu-button/ContextMenuButton.tsx
@@ -38,13 +38,11 @@ import { DropDown } from "../drop-down";
 import { IconButton } from "../icon-button";
 import { Backdrop } from "../backdrop";
 import { Aside } from "../aside";
-import { Heading, HeadingLevel, HeadingSize } from "../heading";
 import { Link } from "../link";
 import { ContextMenuModel } from "../context-menu";
 
 import {
   StyledBodyContent,
-  StyledHeaderContent,
   StyledContent,
   StyledOuter,
 } from "./ContextMenuButton.styled";
@@ -225,7 +223,7 @@ const ContextMenuButtonPure = ({
   };
 
   const iconButtonName = state.isOpen && iconOpenName ? iconOpenName : iconName;
-
+  console.log("displayType", displayType);
   return (
     <StyledOuter
       ref={ref}
@@ -297,9 +295,10 @@ const ContextMenuButtonPure = ({
               scale={false}
               zIndex={310}
               onClose={onCloseAction}
+              header={asideHeader}
             >
               <StyledContent>
-                <StyledHeaderContent>
+                {/* <StyledHeaderContent>
                   <Heading
                     className="header"
                     size={HeadingSize.medium}
@@ -308,7 +307,7 @@ const ContextMenuButtonPure = ({
                   >
                     {asideHeader}
                   </Heading>
-                </StyledHeaderContent>
+                </StyledHeaderContent> */}
                 <StyledBodyContent>
                   {state.data.map(
                     (item: ContextMenuModel, index: number) =>

From 2936666114312601b1e01bd06ad4e1ba215ffa8e Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 23 Aug 2024 17:04:27 +0300
Subject: [PATCH 27/41] Shared: Aside: Fixed border color.

---
 packages/shared/components/aside/Aside.styled.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx
index ece81484dc..98faf5be2e 100644
--- a/packages/shared/components/aside/Aside.styled.tsx
+++ b/packages/shared/components/aside/Aside.styled.tsx
@@ -148,7 +148,8 @@ const StyledHeaderContainer = styled.div`
   }
   ::after {
     content: "";
-    border-bottom: 1px solid rgb(236, 238, 241);
+    border-bottom: ${(props) =>
+      `1px solid ${props.theme.modalDialog.headerBorderColor}`};
     width: calc(100% + 32px);
     position: absolute;
     inset-inline-end: -16px;

From fc9b768f32bae11d873cb98b97635bacb4710aee Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 23 Aug 2024 17:28:24 +0300
Subject: [PATCH 28/41] Client: EmbeddingPanel: Fixed styles.

---
 .../components/panels/EmbeddingPanel/StyledEmbeddingPanel.js  | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js b/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
index ebd8c282c1..3ff51f670e 100644
--- a/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
+++ b/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
@@ -28,10 +28,6 @@ import styled, { css } from "styled-components";
 import { ModalDialog } from "@docspace/shared/components/modal-dialog";
 
 const StyledModalDialog = styled(ModalDialog)`
-  .modal-header {
-    margin: 0;
-  }
-
   .modal-body {
     padding: 0;
   }

From 73a5e191f555b8d378f4619a1910e6413227bc9d Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 23 Aug 2024 18:47:00 +0300
Subject: [PATCH 29/41] Client: AsideHeader: Added removal of border by
 condition.

---
 .../shared/components/aside/Aside.styled.tsx  | 22 +++++++++++--------
 .../shared/components/aside/Aside.types.ts    |  1 +
 .../shared/components/aside/AsideHeader.tsx   |  8 ++++++-
 .../selector/sub-components/Header.tsx        |  2 ++
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx
index 98faf5be2e..ab4ae4c615 100644
--- a/packages/shared/components/aside/Aside.styled.tsx
+++ b/packages/shared/components/aside/Aside.styled.tsx
@@ -146,14 +146,18 @@ const StyledHeaderContainer = styled.div`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  ::after {
-    content: "";
-    border-bottom: ${(props) =>
-      `1px solid ${props.theme.modalDialog.headerBorderColor}`};
-    width: calc(100% + 32px);
-    position: absolute;
-    inset-inline-end: -16px;
-    bottom: 0;
-  }
+  ${(props) =>
+    !props.withoutBorder &&
+    css`
+      ::after {
+        content: "";
+        border-bottom: ${(props) =>
+          `1px solid ${props.theme.modalDialog.headerBorderColor}`};
+        width: calc(100% + 32px);
+        position: absolute;
+        inset-inline-end: -16px;
+        bottom: 0;
+      }
+    `}
 `;
 export { StyledAside, StyledHeaderContainer };
diff --git a/packages/shared/components/aside/Aside.types.ts b/packages/shared/components/aside/Aside.types.ts
index dc5619b220..8ff857f92b 100644
--- a/packages/shared/components/aside/Aside.types.ts
+++ b/packages/shared/components/aside/Aside.types.ts
@@ -53,6 +53,7 @@ export interface AsideHeaderProps {
   onCloseClick?: () => void;
   style?: React.CSSProperties;
   isLoading?: boolean;
+  withoutBorder?: boolean;
 }
 export interface StyledAsideProps {
   visible: boolean;
diff --git a/packages/shared/components/aside/AsideHeader.tsx b/packages/shared/components/aside/AsideHeader.tsx
index 12e7b39e05..d6daa0e013 100644
--- a/packages/shared/components/aside/AsideHeader.tsx
+++ b/packages/shared/components/aside/AsideHeader.tsx
@@ -45,6 +45,7 @@ const AsideHeader = (props: AsideHeaderProps) => {
     id,
     style,
     isLoading,
+    withoutBorder = false,
   } = props;
 
   const backButtonRender = (
@@ -101,7 +102,12 @@ const AsideHeader = (props: AsideHeaderProps) => {
   const loaderComponent = <RectangleSkeleton height="28" width="100%" />;
 
   return (
-    <StyledHeaderContainer id={id} className={className} style={style}>
+    <StyledHeaderContainer
+      id={id}
+      className={className}
+      style={style}
+      withoutBorder={withoutBorder}
+    >
       {isLoading ? loaderComponent : mainComponent}
     </StyledHeaderContainer>
   );
diff --git a/packages/shared/components/selector/sub-components/Header.tsx b/packages/shared/components/selector/sub-components/Header.tsx
index 91d43ec32c..f594d85c58 100644
--- a/packages/shared/components/selector/sub-components/Header.tsx
+++ b/packages/shared/components/selector/sub-components/Header.tsx
@@ -35,6 +35,7 @@ const Header = React.memo(
     onCloseClick,
     withoutBackButton,
     headerLabel,
+    withoutBorder,
   }: HeaderProps) => {
     return (
       <AsideHeader
@@ -44,6 +45,7 @@ const Header = React.memo(
         }
         onBackClick={onBackClick}
         onCloseClick={onCloseClick}
+        withoutBorder={withoutBorder}
       />
     );
   },

From 13b2c3d60a44944c2ec286d157c2e17490d6ef25 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 23 Aug 2024 18:51:29 +0300
Subject: [PATCH 30/41] Client: Components: ChangeStorageQuota: Fixed styles.

---
 .../StyledComponent.js                        | 36 -------------------
 .../dialogs/ChangeStorageQuotaDialog/index.js |  5 ++-
 2 files changed, 2 insertions(+), 39 deletions(-)
 delete mode 100644 packages/client/src/components/dialogs/ChangeStorageQuotaDialog/StyledComponent.js

diff --git a/packages/client/src/components/dialogs/ChangeStorageQuotaDialog/StyledComponent.js b/packages/client/src/components/dialogs/ChangeStorageQuotaDialog/StyledComponent.js
deleted file mode 100644
index 1cb1b9eb35..0000000000
--- a/packages/client/src/components/dialogs/ChangeStorageQuotaDialog/StyledComponent.js
+++ /dev/null
@@ -1,36 +0,0 @@
-// (c) Copyright Ascensio System SIA 2009-2024
-//
-// This program is a free software product.
-// You can redistribute it and/or modify it under the terms
-// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
-// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
-// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
-// any third-party rights.
-//
-// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
-// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
-// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
-//
-// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
-//
-// The  interactive user interfaces in modified source and object code versions of the Program must
-// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
-//
-// Pursuant to Section 7(b) of the License you must retain the original Product logo when
-// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
-// trademark law for use of our trademarks.
-//
-// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
-// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
-// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-
-import styled from "styled-components";
-
-import { ModalDialog } from "@docspace/shared/components/modal-dialog";
-
-const StyledModalDialog = styled(ModalDialog)`
-  p {
-    margin-bottom: 16px;
-  }
-`;
-export default StyledModalDialog;
diff --git a/packages/client/src/components/dialogs/ChangeStorageQuotaDialog/index.js b/packages/client/src/components/dialogs/ChangeStorageQuotaDialog/index.js
index 66ad2a3dc2..922d9a696d 100644
--- a/packages/client/src/components/dialogs/ChangeStorageQuotaDialog/index.js
+++ b/packages/client/src/components/dialogs/ChangeStorageQuotaDialog/index.js
@@ -34,7 +34,6 @@ import { toastr } from "@docspace/shared/components/toast";
 import { setTenantQuotaSettings } from "@docspace/shared/api/settings";
 
 import QuotaForm from "../../../components/QuotaForm";
-import StyledModalDialog from "./StyledComponent";
 
 const ChangeStorageQuotaDialog = (props) => {
   const {
@@ -115,7 +114,7 @@ const ChangeStorageQuotaDialog = (props) => {
   };
 
   return (
-    <StyledModalDialog visible={isVisible} onClose={onCloseClick}>
+    <ModalDialog visible={isVisible} onClose={onCloseClick}>
       <ModalDialog.Header>
         {isDisableQuota
           ? t("Common:DisableStorageQuota")
@@ -159,7 +158,7 @@ const ChangeStorageQuotaDialog = (props) => {
           scale
         />
       </ModalDialog.Footer>
-    </StyledModalDialog>
+    </ModalDialog>
   );
 };
 

From 7f7882f4ffe8de43450e7517d7217c25ad4c4384 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 23 Aug 2024 19:47:15 +0300
Subject: [PATCH 31/41] Shared/Client: InfoPanel:  Fixed styles because of an
 aside header component.

---
 .../src/pages/Home/InfoPanel/Header/index.js  | 25 ++++---------
 .../Home/InfoPanel/Header/styles/common.js    | 36 +------------------
 .../section/sub-components/InfoPanel.tsx      | 17 ++-------
 3 files changed, 9 insertions(+), 69 deletions(-)

diff --git a/packages/client/src/pages/Home/InfoPanel/Header/index.js b/packages/client/src/pages/Home/InfoPanel/Header/index.js
index 846a0ee01e..3da3e359c3 100644
--- a/packages/client/src/pages/Home/InfoPanel/Header/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Header/index.js
@@ -43,6 +43,7 @@ import { StyledInfoPanelHeader } from "./styles/common";
 
 import { PluginFileType } from "SRC_DIR/helpers/plugins/enums";
 import { FolderType } from "@docspace/shared/enums";
+import { AsideHeader } from "@docspace/shared/components/aside";
 
 const InfoPanelHeaderContent = (props) => {
   const {
@@ -194,25 +195,11 @@ const InfoPanelHeaderContent = (props) => {
 
   return (
     <StyledInfoPanelHeader isTablet={isTablet} withTabs={withTabs}>
-      <div className="main">
-        <Text className="header-text" fontSize="21px" fontWeight="700">
-          {t("Common:Info")}
-        </Text>
-
-        {!isTablet && (
-          <div className="info-panel-toggle-bg">
-            <IconButton
-              isStroke
-              size="17"
-              onClick={closeInfoPanel}
-              iconName={CrossReactSvgUrl}
-              title={t("Common:InfoPanel")}
-              className="info-panel-toggle"
-              id="info-panel-toggle--close"
-            />
-          </div>
-        )}
-      </div>
+      <AsideHeader
+        header={t("Common:Info")}
+        onCloseClick={closeInfoPanel}
+        withoutBorder
+      />
 
       {withTabs && (
         <div className="tabs">
diff --git a/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js b/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
index cdfa111ab7..ed96dd3210 100644
--- a/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
+++ b/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
@@ -29,7 +29,7 @@ import { Base } from "@docspace/shared/themes";
 import { tablet } from "@docspace/shared/utils";
 
 const getHeaderHeight = ({ withTabs, isTablet }) => {
-  let res = isTablet ? 53 : 69;
+  let res = isTablet ? 54 : 70;
   if (withTabs) res += 32;
   return `${res}px`;
 };
@@ -54,40 +54,6 @@ const StyledInfoPanelHeader = styled.div`
   flex-direction: column;
   border-bottom: ${(props) =>
     props.withTabs ? "none" : `1px solid ${props.theme.infoPanel.borderColor}`};
-  .main {
-    height: ${(props) => getMainHeight(props)};
-    min-height: ${(props) => getMainHeight(props)};
-    @media ${tablet} {
-      height: ${(props) => getMainHeight({ ...props, isTablet: true })};
-      min-height: ${(props) => getMainHeight({ ...props, isTablet: true })};
-    }
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    .header-text {
-      ${(props) =>
-        props.theme.interfaceDirection === "rtl"
-          ? css`
-              margin-right: 20px;
-            `
-          : css`
-              margin-left: 20px;
-            `}
-    }
-  }
-
-  .info-panel-toggle-bg {
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            margin-left: 20px;
-          `
-        : css`
-            margin-right: 20px;
-          `}
-  }
 
   .tabs {
     display: flex;
diff --git a/packages/shared/components/section/sub-components/InfoPanel.tsx b/packages/shared/components/section/sub-components/InfoPanel.tsx
index 8c18c5711d..5f13b23033 100644
--- a/packages/shared/components/section/sub-components/InfoPanel.tsx
+++ b/packages/shared/components/section/sub-components/InfoPanel.tsx
@@ -29,12 +29,7 @@ import React, { useEffect, useRef } from "react";
 import { DeviceType } from "../../../enums";
 import { Portal } from "../../portal";
 
-import {
-  StyledInfoPanelWrapper,
-  StyledInfoPanel,
-  StyledControlContainer,
-  StyledCrossIcon,
-} from "../Section.styled";
+import { StyledInfoPanelWrapper, StyledInfoPanel } from "../Section.styled";
 import { InfoPanelProps } from "../Section.types";
 
 const InfoPanel = ({
@@ -49,8 +44,6 @@ const InfoPanel = ({
 }: InfoPanelProps) => {
   const infoPanelRef = useRef<null | HTMLDivElement>(null);
 
-  const closeInfoPanel = () => setIsVisible?.(false);
-
   useEffect(() => {
     const onMouseDown = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
@@ -74,13 +67,7 @@ const InfoPanel = ({
       id="InfoPanelWrapper"
       ref={infoPanelRef}
     >
-      <StyledInfoPanel>
-        <StyledControlContainer onClick={closeInfoPanel}>
-          <StyledCrossIcon />
-        </StyledControlContainer>
-
-        {children}
-      </StyledInfoPanel>
+      <StyledInfoPanel>{children}</StyledInfoPanel>
     </StyledInfoPanelWrapper>
   );
 

From 3017d36a760d8106b829624eb9a638f65253ca7d Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 23 Aug 2024 20:14:14 +0300
Subject: [PATCH 32/41] Client/Shared: Hide close button for Sdk.

---
 .../components/FilesSelector/FilesSelector.types.ts   |  7 +++++--
 .../client/src/components/FilesSelector/index.tsx     |  2 ++
 packages/client/src/pages/Sdk/index.js                |  6 +++++-
 packages/shared/components/selector/Selector.types.ts |  1 +
 .../components/selector/sub-components/Header.tsx     |  3 +++
 .../shared/selectors/Files/FilesSelector.types.ts     |  4 +++-
 packages/shared/selectors/Files/index.tsx             | 11 ++++++++---
 7 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/FilesSelector/FilesSelector.types.ts b/packages/client/src/components/FilesSelector/FilesSelector.types.ts
index ffb6752146..62d246bf57 100644
--- a/packages/client/src/components/FilesSelector/FilesSelector.types.ts
+++ b/packages/client/src/components/FilesSelector/FilesSelector.types.ts
@@ -29,12 +29,15 @@ import {
   TFilesSettings,
   TFolder,
 } from "@docspace/shared/api/files/types";
-import { TBreadCrumb } from "@docspace/shared/components/selector/Selector.types";
+import {
+  TBreadCrumb,
+  TSelectorHeader,
+} from "@docspace/shared/components/selector/Selector.types";
 import { DeviceType } from "@docspace/shared/enums";
 import { TTheme } from "@docspace/shared/themes";
 import SocketIOHelper from "@docspace/shared/utils/socket";
 
-export type FilesSelectorProps = {
+export type FilesSelectorProps = TSelectorHeader & {
   isPanelVisible: boolean;
   // withoutImmediatelyClose: boolean;
   isThirdParty: boolean;
diff --git a/packages/client/src/components/FilesSelector/index.tsx b/packages/client/src/components/FilesSelector/index.tsx
index 1e95e8ab26..a8d133eb90 100644
--- a/packages/client/src/components/FilesSelector/index.tsx
+++ b/packages/client/src/components/FilesSelector/index.tsx
@@ -140,6 +140,7 @@ const FilesSelectorWrapper = ({
   openRoot,
 
   filesSettings,
+  headerProps,
 }: FilesSelectorProps) => {
   const { t }: { t: TTranslation } = useTranslation([
     "Files",
@@ -392,6 +393,7 @@ const FilesSelectorWrapper = ({
       getFilesArchiveError={getFilesArchiveError}
       withCreate={(isMove || isCopy || isRestore || isRestoreAll) ?? false}
       filesSettings={filesSettings}
+      headerProps={headerProps}
     />
   );
 };
diff --git a/packages/client/src/pages/Sdk/index.js b/packages/client/src/pages/Sdk/index.js
index 87c3128c14..8d5fe08d7f 100644
--- a/packages/client/src/pages/Sdk/index.js
+++ b/packages/client/src/pages/Sdk/index.js
@@ -262,7 +262,10 @@ const Sdk = ({
         : {};
 
       const headerProps = frameConfig?.showSelectorHeader
-        ? { withHeader: true, headerProps: { headerLabel: "" } }
+        ? {
+            withHeader: true,
+            headerProps: { headerLabel: "", isCloseable: false },
+          }
         : {};
 
       component = (
@@ -301,6 +304,7 @@ const Sdk = ({
           currentFolderId={frameConfig?.id}
           openRoot={selectorOpenRoot}
           descriptionText={formatsDescription[frameConfig?.filterParam] || ""}
+          headerProps={{ isCloseable: false }}
         />
       );
       break;
diff --git a/packages/shared/components/selector/Selector.types.ts b/packages/shared/components/selector/Selector.types.ts
index 41f6dc58af..5cdae0d369 100644
--- a/packages/shared/components/selector/Selector.types.ts
+++ b/packages/shared/components/selector/Selector.types.ts
@@ -74,6 +74,7 @@ export type BreadCrumbsProps = {
 export type HeaderProps = {
   headerLabel: string;
   onCloseClick: () => void;
+  isCloseable?: boolean;
 } & THeaderBackButton;
 
 export type TSelectorHeader =
diff --git a/packages/shared/components/selector/sub-components/Header.tsx b/packages/shared/components/selector/sub-components/Header.tsx
index f594d85c58..5a1f75d6bc 100644
--- a/packages/shared/components/selector/sub-components/Header.tsx
+++ b/packages/shared/components/selector/sub-components/Header.tsx
@@ -36,7 +36,9 @@ const Header = React.memo(
     withoutBackButton,
     headerLabel,
     withoutBorder,
+    isCloseable,
   }: HeaderProps) => {
+    console.log("isCloseable", isCloseable);
     return (
       <AsideHeader
         header={headerLabel}
@@ -46,6 +48,7 @@ const Header = React.memo(
         onBackClick={onBackClick}
         onCloseClick={onCloseClick}
         withoutBorder={withoutBorder}
+        isCloseable={isCloseable}
       />
     );
   },
diff --git a/packages/shared/selectors/Files/FilesSelector.types.ts b/packages/shared/selectors/Files/FilesSelector.types.ts
index 9d68481865..a15b528245 100644
--- a/packages/shared/selectors/Files/FilesSelector.types.ts
+++ b/packages/shared/selectors/Files/FilesSelector.types.ts
@@ -28,6 +28,7 @@ import { TSelectorItem } from "../../components/selector";
 import {
   TBreadCrumb,
   TInfoBar,
+  TSelectorHeader,
 } from "../../components/selector/Selector.types";
 import {
   TFileSecurity,
@@ -143,7 +144,8 @@ export type TSelectedFileInfo = {
 
 export type TGetIcon = (size: number, fileExst: string) => string;
 
-export type FilesSelectorProps = TInfoBar &
+export type FilesSelectorProps = TSelectorHeader &
+  TInfoBar &
   (
     | {
         getIcon: TGetIcon;
diff --git a/packages/shared/selectors/Files/index.tsx b/packages/shared/selectors/Files/index.tsx
index 1efe4e7e42..d038133895 100644
--- a/packages/shared/selectors/Files/index.tsx
+++ b/packages/shared/selectors/Files/index.tsx
@@ -114,6 +114,7 @@ const FilesSelectorComponent = ({
   createDefineRoomType,
   withInfoBar,
   infoBarData,
+  headerProps,
 }: FilesSelectorProps) => {
   const theme = useTheme();
   const { t } = useTranslation(["Common"]);
@@ -475,10 +476,14 @@ const FilesSelectorComponent = ({
     openRoot,
   ]);
 
-  const headerProps: TSelectorHeader = withHeader
+  const headerSelectorProps: TSelectorHeader = withHeader
     ? {
         withHeader,
-        headerProps: { headerLabel, onCloseClick: onCancel },
+        headerProps: {
+          ...headerProps,
+          headerLabel,
+          onCloseClick: onCancel,
+        },
       }
     : {};
 
@@ -556,7 +561,7 @@ const FilesSelectorComponent = ({
 
   const SelectorBody = (
     <Selector
-      {...headerProps}
+      {...headerSelectorProps}
       {...searchProps}
       {...submitButtonProps}
       {...cancelButtonProps}

From 30701247c6ef2b3c3954e85f9da482bc7680739d Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 23 Aug 2024 20:21:35 +0300
Subject: [PATCH 33/41] Refactoring.

---
 packages/shared/components/aside/Aside.types.ts        | 10 ++--------
 packages/shared/components/aside/AsideHeader.tsx       |  1 +
 .../components/modal-dialog/ModalDialog.types.ts       |  9 ++-------
 .../components/selector/sub-components/Header.tsx      |  1 -
 4 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/packages/shared/components/aside/Aside.types.ts b/packages/shared/components/aside/Aside.types.ts
index 8ff857f92b..7ab6e26acf 100644
--- a/packages/shared/components/aside/Aside.types.ts
+++ b/packages/shared/components/aside/Aside.types.ts
@@ -24,7 +24,7 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-export interface AsideProps {
+export type AsideProps = AsideHeaderProps & {
   visible: boolean;
   scale?: boolean;
   className?: string;
@@ -35,13 +35,7 @@ export interface AsideProps {
   onClose: () => void;
 
   withoutHeader: boolean;
-  header: AsideHeaderProps["header"];
-  isBackButton?: AsideHeaderProps["isBackButton"];
-  isCloseable?: AsideHeaderProps["isCloseable"];
-  headerIcons?: AsideHeaderProps["headerIcons"];
-  onBackClick?: AsideHeaderProps["onBackClick"];
-  onCloseClick?: AsideHeaderProps["onCloseClick"];
-}
+};
 export interface AsideHeaderProps {
   header: string | React.ReactNode;
   className?: string;
diff --git a/packages/shared/components/aside/AsideHeader.tsx b/packages/shared/components/aside/AsideHeader.tsx
index d6daa0e013..8394ba8eb7 100644
--- a/packages/shared/components/aside/AsideHeader.tsx
+++ b/packages/shared/components/aside/AsideHeader.tsx
@@ -33,6 +33,7 @@ import { AsideHeaderProps } from "./Aside.types";
 import { StyledHeaderContainer } from "./Aside.styled";
 import { RectangleSkeleton } from "../../skeletons/rectangle";
 import { Heading, HeadingSize } from "../heading";
+
 const AsideHeader = (props: AsideHeaderProps) => {
   const {
     isBackButton = false,
diff --git a/packages/shared/components/modal-dialog/ModalDialog.types.ts b/packages/shared/components/modal-dialog/ModalDialog.types.ts
index 070503cf73..df6afebc19 100644
--- a/packages/shared/components/modal-dialog/ModalDialog.types.ts
+++ b/packages/shared/components/modal-dialog/ModalDialog.types.ts
@@ -135,7 +135,7 @@ export interface ModalDialogBackdropProps {
   modalSwipeOffset?: number;
 }
 
-export interface ModalSubComponentsProps {
+export type ModalSubComponentsProps = AsideHeaderProps & {
   id?: string;
   style?: React.CSSProperties;
   className?: string;
@@ -161,9 +161,4 @@ export interface ModalSubComponentsProps {
   embedded?: boolean;
   withForm?: boolean;
   blur?: number;
-
-  isBackButton?: AsideHeaderProps["isBackButton"];
-  headerIcons?: AsideHeaderProps["headerIcons"];
-  onBackClick?: AsideHeaderProps["onBackClick"];
-  onCloseClick?: AsideHeaderProps["onCloseClick"];
-}
+};
diff --git a/packages/shared/components/selector/sub-components/Header.tsx b/packages/shared/components/selector/sub-components/Header.tsx
index 5a1f75d6bc..47fc3518bf 100644
--- a/packages/shared/components/selector/sub-components/Header.tsx
+++ b/packages/shared/components/selector/sub-components/Header.tsx
@@ -38,7 +38,6 @@ const Header = React.memo(
     withoutBorder,
     isCloseable,
   }: HeaderProps) => {
-    console.log("isCloseable", isCloseable);
     return (
       <AsideHeader
         header={headerLabel}

From 93e4711f04e85d90b1eda02dacd711c6ea10ce27 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 23 Aug 2024 20:32:31 +0300
Subject: [PATCH 34/41] Shared: AsideHeader: Added icon reversal for rtl view.

---
 packages/shared/components/aside/Aside.styled.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx
index ab4ae4c615..ec8cbfbcf2 100644
--- a/packages/shared/components/aside/Aside.styled.tsx
+++ b/packages/shared/components/aside/Aside.styled.tsx
@@ -112,7 +112,7 @@ const StyledAside = styled(Container)`
 `;
 StyledAside.defaultProps = { theme: Base };
 
-const StyledHeaderContainer = styled.div`
+const StyledHeaderContainer = styled.div<{ withoutBorder?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -136,6 +136,11 @@ const StyledHeaderContainer = styled.div`
 
   .arrow-button {
     margin-inline: 0 12px;
+
+    svg {
+      ${({ theme }) =>
+        theme.interfaceDirection === "rtl" && `transform: scaleX(-1);`}
+    }
   }
   .close-button {
     margin-inline: auto 0;

From 0009864925f957a255990037d57f58e366a67174 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 23 Aug 2024 20:34:34 +0300
Subject: [PATCH 35/41] Refactoring.

---
 .../shared/components/context-menu-button/ContextMenuButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/components/context-menu-button/ContextMenuButton.tsx b/packages/shared/components/context-menu-button/ContextMenuButton.tsx
index 72b356a2c0..fb8437ae97 100644
--- a/packages/shared/components/context-menu-button/ContextMenuButton.tsx
+++ b/packages/shared/components/context-menu-button/ContextMenuButton.tsx
@@ -223,7 +223,7 @@ const ContextMenuButtonPure = ({
   };
 
   const iconButtonName = state.isOpen && iconOpenName ? iconOpenName : iconName;
-  console.log("displayType", displayType);
+
   return (
     <StyledOuter
       ref={ref}

From 4b7041dabeae98d4868536f0972341ab09b726a8 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Mon, 26 Aug 2024 10:48:52 +0300
Subject: [PATCH 36/41] Client: Fixed info panel header height.

---
 .../src/pages/Home/InfoPanel/Header/index.js  |  1 +
 .../Home/InfoPanel/Header/styles/common.js    | 23 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/pages/Home/InfoPanel/Header/index.js b/packages/client/src/pages/Home/InfoPanel/Header/index.js
index 3da3e359c3..17e5e4bf2c 100644
--- a/packages/client/src/pages/Home/InfoPanel/Header/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Header/index.js
@@ -199,6 +199,7 @@ const InfoPanelHeaderContent = (props) => {
         header={t("Common:Info")}
         onCloseClick={closeInfoPanel}
         withoutBorder
+        className="header-text"
       />
 
       {withTabs && (
diff --git a/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js b/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
index ed96dd3210..440a14bd16 100644
--- a/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
+++ b/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
@@ -28,11 +28,11 @@ import styled, { css } from "styled-components";
 import { Base } from "@docspace/shared/themes";
 import { tablet } from "@docspace/shared/utils";
 
-const getHeaderHeight = ({ withTabs, isTablet }) => {
-  let res = isTablet ? 54 : 70;
-  if (withTabs) res += 32;
-  return `${res}px`;
-};
+// const getHeaderHeight = ({ withTabs, isTablet }) => {
+//   let res = isTablet ? 54 : 70;
+//   if (withTabs) res += 32;
+//   return `${res}px`;
+// };
 
 const getMainHeight = ({ isTablet }) => {
   let res = isTablet ? 52 : 68;
@@ -43,18 +43,17 @@ const StyledInfoPanelHeader = styled.div`
   width: 100%;
   max-width: 100%;
 
-  height: ${(props) => getHeaderHeight(props)};
-  min-height: ${(props) => getHeaderHeight(props)};
-  @media ${tablet} {
-    height: ${(props) => getHeaderHeight({ ...props, isTablet: true })};
-    min-height: ${(props) => getHeaderHeight({ ...props, isTablet: true })};
-  }
-
   display: flex;
   flex-direction: column;
   border-bottom: ${(props) =>
     props.withTabs ? "none" : `1px solid ${props.theme.infoPanel.borderColor}`};
 
+  .header-text {
+    height: ${(props) => getMainHeight(props)};
+    @media ${tablet} {
+      height: ${(props) => getMainHeight({ ...props, isTablet: true })};
+    }
+  }
   .tabs {
     display: flex;
     width: 100%;

From 9df57acd09249e4b8b7c49ef586919dd140d0a8c Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Mon, 26 Aug 2024 12:30:41 +0300
Subject: [PATCH 37/41] Shared: AsideHeader: Fixed cross icon width.

---
 packages/shared/components/aside/AsideHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/shared/components/aside/AsideHeader.tsx b/packages/shared/components/aside/AsideHeader.tsx
index 8394ba8eb7..55b12a71c8 100644
--- a/packages/shared/components/aside/AsideHeader.tsx
+++ b/packages/shared/components/aside/AsideHeader.tsx
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
-import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg?url";
+import CrossReactSvgUrl from "PUBLIC_DIR/images/icons/17/cross.react.svg?url";
 
 import { IconButton } from "../icon-button";
 import { Text } from "../text";
@@ -62,7 +62,7 @@ const AsideHeader = (props: AsideHeaderProps) => {
     <IconButton
       size={17}
       className="close-button"
-      iconName={CrossReactSvg}
+      iconName={CrossReactSvgUrl}
       onClick={onCloseClick}
       isClickable
     />

From 3568959d17c182c7a9b9d64d002fe5acebce5b48 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Mon, 26 Aug 2024 12:31:11 +0300
Subject: [PATCH 38/41] Client: Fixed header for mobile invite panel.

---
 .../panels/InvitePanel/StyledInvitePanel.js   | 31 ------------------
 .../components/panels/InvitePanel/index.js    | 32 +++++--------------
 .../src/pages/Home/InfoPanel/Header/index.js  |  4 ---
 3 files changed, 8 insertions(+), 59 deletions(-)

diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
index 52e7edf8e5..5649332c07 100644
--- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
+++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
@@ -123,13 +123,6 @@ const ScrollList = styled.div`
   }
 `;
 
-const StyledBlock = styled.div`
-  border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
-  padding-inline: 16px 37px;
-`;
-
-StyledBlock.defaultProps = { theme: Base };
-
 const StyledExternalLink = styled.div`
   border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
 `;
@@ -139,11 +132,6 @@ const StyledInviteUserBody = styled.div`
   overflow: auto;
 `;
 
-const StyledHeading = styled(Heading)`
-  font-weight: 700;
-  font-size: 18px;
-`;
-
 const StyledSubHeader = styled(Heading)`
   font-weight: 700;
   font-size: 16px;
@@ -503,22 +491,6 @@ const StyledToggleButton = styled(ToggleButton)`
   margin-top: -4px;
 `;
 
-const StyledControlContainer = styled.div`
-  width: 17px;
-  height: 17px;
-  position: absolute;
-
-  cursor: pointer;
-
-  align-items: center;
-  justify-content: center;
-  z-index: 450;
-
-  @media ${mobile} {
-    top: 17px;
-    inset-inline-end: 16px;
-  }
-`;
 const StyledInviteLanguage = styled.div`
   padding-left: 16px;
   padding-right: 16px;
@@ -576,8 +548,6 @@ const StyledInviteLanguage = styled.div`
 
 StyledCrossIcon.defaultProps = { theme: Base };
 export {
-  StyledBlock,
-  StyledHeading,
   StyledInvitePanel,
   StyledRow,
   StyledSubHeader,
@@ -599,7 +569,6 @@ export {
   StyledToggleButton,
   StyledDescription,
   StyledInviteLanguage,
-  StyledControlContainer,
   StyledInviteUserBody,
   StyledExternalLink,
 };
diff --git a/packages/client/src/components/panels/InvitePanel/index.js b/packages/client/src/components/panels/InvitePanel/index.js
index b8f3410589..fca73f9079 100644
--- a/packages/client/src/components/panels/InvitePanel/index.js
+++ b/packages/client/src/components/panels/InvitePanel/index.js
@@ -38,19 +38,13 @@ import { DeviceType, EmployeeType } from "@docspace/shared/enums";
 import { LOADER_TIMEOUT } from "@docspace/shared/constants";
 
 import { Backdrop } from "@docspace/shared/components/backdrop";
-import { Aside } from "@docspace/shared/components/aside";
+import { Aside, AsideHeader } from "@docspace/shared/components/aside";
 import { Button } from "@docspace/shared/components/button";
 import { toastr } from "@docspace/shared/components/toast";
 import { Portal } from "@docspace/shared/components/portal";
 import { isDesktop, isMobile, size } from "@docspace/shared/utils";
 
-import {
-  StyledBlock,
-  StyledHeading,
-  StyledInvitePanel,
-  StyledButtons,
-  StyledControlContainer,
-} from "./StyledInvitePanel";
+import { StyledInvitePanel, StyledButtons } from "./StyledInvitePanel";
 
 import ItemsList from "./sub-components/ItemsList";
 import InviteInput from "./sub-components/InviteInput";
@@ -59,12 +53,10 @@ import { Scrollbar } from "@docspace/shared/components/scrollbar";
 
 import InfoBar from "./sub-components/InfoBar";
 import InvitePanelLoader from "./sub-components/InvitePanelLoader";
-import { Link } from "@docspace/shared/components/link";
+
 import { Text } from "@docspace/shared/components/text";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
-import { IconButton } from "@docspace/shared/components/icon-button";
-import CrossIconMobile from "PUBLIC_DIR/images/cross.react.svg?url";
 
 const InvitePanel = ({
   folders,
@@ -430,11 +422,6 @@ const InvitePanel = ({
 
   const invitePanelNode = (
     <>
-      {isMobileView && (
-        <StyledBlock>
-          <StyledHeading truncate>{t("Common:InviteUsers")}</StyledHeading>
-        </StyledBlock>
-      )}
       {invitePanelIsLoding ? (
         <InvitePanelLoader />
       ) : (
@@ -482,14 +469,11 @@ const InvitePanel = ({
     >
       {isMobileView ? (
         <div className="invite_panel" ref={invitePanelRef}>
-          <StyledControlContainer onClick={onClose}>
-            <IconButton
-              size={17}
-              className="close-button"
-              iconName={CrossIconMobile}
-              isClickable
-            />
-          </StyledControlContainer>
+          <AsideHeader
+            header={t("Common:InviteUsers")}
+            onCloseClick={onClose}
+          />
+
           {invitePanelNode}
         </div>
       ) : (
diff --git a/packages/client/src/pages/Home/InfoPanel/Header/index.js b/packages/client/src/pages/Home/InfoPanel/Header/index.js
index 17e5e4bf2c..60c6419153 100644
--- a/packages/client/src/pages/Home/InfoPanel/Header/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Header/index.js
@@ -24,14 +24,10 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-import CrossReactSvgUrl from "PUBLIC_DIR/images/icons/17/cross.react.svg?url";
 import React, { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 
-import { IconButton } from "@docspace/shared/components/icon-button";
-import { Text } from "@docspace/shared/components/text";
-
 import { Tabs } from "@docspace/shared/components/tabs";
 import {
   isDesktop as isDesktopUtils,

From 8255dc5fea13978fe7e515ab2b56eac5fe1e5c6d Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Mon, 26 Aug 2024 12:48:18 +0300
Subject: [PATCH 39/41] Client: ChangePortalOwnerDialog:: Fixed close action.

---
 .../src/components/dialogs/ChangePortalOwnerDialog/index.js      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/components/dialogs/ChangePortalOwnerDialog/index.js b/packages/client/src/components/dialogs/ChangePortalOwnerDialog/index.js
index eb5b62bfcd..a4f8d2d6ea 100644
--- a/packages/client/src/components/dialogs/ChangePortalOwnerDialog/index.js
+++ b/packages/client/src/components/dialogs/ChangePortalOwnerDialog/index.js
@@ -154,6 +154,7 @@ const ChangePortalOwnerDialog = ({
             disableSubmitButton={false}
             withHeader
             headerProps={{
+              onCloseClick: onCloseAction,
               onBackClick,
               withoutBackButton: false,
               headerLabel: "",

From 964a43f81e1fbb39318ed64569f03a117f4ca434 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Mon, 26 Aug 2024 12:48:52 +0300
Subject: [PATCH 40/41] Client: DataReassignmentDialog: Fixed close action.

---
 .../src/components/dialogs/DataReassignmentDialog/index.js       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/components/dialogs/DataReassignmentDialog/index.js b/packages/client/src/components/dialogs/DataReassignmentDialog/index.js
index 610bf529d1..53d02ddf7d 100644
--- a/packages/client/src/components/dialogs/DataReassignmentDialog/index.js
+++ b/packages/client/src/components/dialogs/DataReassignmentDialog/index.js
@@ -227,6 +227,7 @@ const DataReassignmentDialog = ({
             withCancelButton
             cancelButtonLabel=""
             headerProps={{
+              onCloseClick: onClose,
               onBackClick: onClosePeopleSelector,
               withoutBackButton: false,
               headerLabel: "",

From a02624f286f24a010f6840786e98608e61d389ac Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Mon, 26 Aug 2024 15:33:40 +0300
Subject: [PATCH 41/41] Web: Files: fixed uploadClipboardFiles

---
 packages/client/src/store/HotkeyStore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/store/HotkeyStore.js b/packages/client/src/store/HotkeyStore.js
index 80c747e88b..3c26da606a 100644
--- a/packages/client/src/store/HotkeyStore.js
+++ b/packages/client/src/store/HotkeyStore.js
@@ -692,7 +692,7 @@ class HotkeyStore {
 
     const files = await getFilesFromEvent(event);
 
-    createFoldersTree(files, uploadToFolder).then((f) => {
+    createFoldersTree(files).then((f) => {
       if (f.length > 0) startUpload(f, null, t);
     });
   };