Editor: ShareDialog: use modal dialog

packages/doceditor/src/components/ShareDialog.tsx

@@ -29,9 +29,10 @@ import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 
 import Share from "@docspace/shared/components/share";
-import { Backdrop } from "@docspace/shared/components/backdrop";
-import { Aside } from "@docspace/shared/components/aside";
-import { Text } from "@docspace/shared/components/text";
+import {
+  ModalDialog,
+  ModalDialogType,
+} from "@docspace/shared/components/modal-dialog";
 import { NoUserSelect } from "@docspace/shared/utils/commonStyles";
 import { Base } from "@docspace/shared/themes";
 import { TFile } from "@docspace/shared/api/files/types";
@@ -42,21 +43,6 @@ const StyledWrapper = styled.div`
   height: 100%;
   display: flex;
   flex-direction: column;
-
-  .share-file_header {
-    padding: 12px 16px;
-    border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
-
-    .share-file_heading {
-      font-size: 21px;
-      font-weight: 700;
-      line-height: 28px;
-    }
-  }
-
-  .share-file_body {
-    padding: 16px;
-  }
 `;
 
 StyledWrapper.defaultProps = { theme: Base };
@@ -75,26 +61,21 @@ const SharingDialog = ({
   const { t } = useTranslation(["Common"]);
 
   return (
-    <>
-      <Backdrop
-        onClick={onCancel}
-        visible={isVisible}
-        zIndex={310}
-        isAside
-        withoutBackground={false}
-        withoutBlur={false}
-      />
-      <Aside visible={isVisible} onClose={onCancel}>
+    <ModalDialog
+      visible={isVisible}
+      onClose={onCancel}
+      displayType={ModalDialogType.aside}
+      withBodyScroll
+    >
+      <ModalDialog.Header>{t("Common:Share")}</ModalDialog.Header>
+      <ModalDialog.Body>
         <StyledWrapper>
-          <div className="share-file_header">
-            <Text className="share-file_heading">{t("Common:Share")}</Text>
-          </div>
           <div className="share-file_body">
             <Share infoPanelSelection={fileInfo} />
           </div>
         </StyledWrapper>
-      </Aside>
-    </>
+      </ModalDialog.Body>
+    </ModalDialog>
   );
 };