Shared/Client: Fixed styles for invite panel.

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;
+    ${(props) =>
-
+      props.theme.interfaceDirection === "rtl"
-    top: -27px;
+        ? css`
-    right: 10px;
+            left: 13px;
-    left: unset;
+            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,
 };

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>

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: 13px;
-            left: 10px;
+          top: 17px;
         `
       : css`
-            right: 10px;
+          right: 13px;
-            left: unset;
+          top: 17px;
         `}
-  }
 `;
 
 StyledControlContainer.defaultProps = { theme: Base };
 
-const StyledCrossIcon = styled(CrossReactSvg)`
+export { StyledAside, StyledControlContainer };
-  width: 17px;
-  height: 17px;
-  z-index: 455;
-  path {
-    fill: ${(props) => props.theme.catalog.control.fill};
-  }
-`;
-
-StyledCrossIcon.defaultProps = { theme: Base };
-
-export { StyledAside, StyledControlContainer, StyledCrossIcon };

packages/shared/components/aside/Aside.tsx

@@ -27,14 +27,13 @@
 import React from "react";
 
 import { Scrollbar } from "../scrollbar";
+import { IconButton } from "../icon-button";
 
-import {
+import { StyledAside, StyledControlContainer } from "./Aside.styled";
-  StyledAside,
-  StyledControlContainer,
-  StyledCrossIcon,
-} 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>
   );
 };