Shared/Client: AddUsersPanel/InvitePanel: Fixed styles because of an aside header component.

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}

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

packages/client/src/components/panels/InvitePanel/index.js

@@ -431,9 +431,11 @@ const InvitePanel = ({
 
   const invitePanelNode = (
     <>
-      <StyledBlock>
+      {isMobileView && (
-        <StyledHeading truncate>{t("Common:InviteUsers")}</StyledHeading>
+        <StyledBlock>
-      </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>

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

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>
   );

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 =

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}>
+      <AsideHeader
-        {!withoutBackButton && typeof withoutBackButton === "boolean" && (
+        header={headerLabel}
-          <IconButton
+        isBackButton={
-            className="arrow-button"
+          !withoutBackButton && typeof withoutBackButton === "boolean"
-            iconName={ArrowPathReactSvgUrl}
+        }
-            size={17}
+        onBackClick={onBackClick}
-            onClick={onBackClick}
+        onCloseClick={onCloseClick}
-          />
+      />
-        )}
-
-        <Heading className="heading-text" truncate>
-          {headerLabel}
-        </Heading>
-      </StyledHeader>
     );
   },
 );