Client: Fixed header for mobile invite panel.

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,
 };

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>
       ) : (

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,