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 = (
<>