web client add rtl profile menu & file input

packages/client/src/components/NavMenu/sub-components/profile-menu.js

@@ -5,7 +5,7 @@ import { inject, observer } from "mobx-react";
 import Avatar from "@docspace/components/avatar";
 import DropDown from "@docspace/components/drop-down";
 
-import styled, { css } from "styled-components";
+import styled, { css, withTheme } from "styled-components";
 import DropDownItem from "@docspace/components/drop-down-item";
 import { isMobileOnly } from "react-device-detect";
 import { Base } from "@docspace/components/themes";
@@ -164,7 +164,6 @@ class ProfileMenu extends React.Component {
   constructor(props) {
     super(props);
   }
-
   renderDropDown = () => {
     const {
       avatarRole,
@@ -177,10 +176,12 @@ class ProfileMenu extends React.Component {
       forwardedRef,
       isBannerVisible,
     } = this.props;
+    console.log('Current theme: ', this.props.theme)
 
     return (
       <StyledDropDown
         className={className}
+
         directionX="right"
         open={open}
         clickOutsideAction={clickOutsideAction}
@@ -248,4 +249,4 @@ export default inject(({ auth }) => {
   const { isBannerVisible } = auth.bannerStore;
 
   return { isBannerVisible };
-})(observer(ProfileMenu));
+})(observer(withTheme(ProfileMenu)));

packages/client/src/components/SimpleFileInput/StyledSimpleFileInput.js

@@ -1,12 +1,11 @@
 import styled, { css } from "styled-components";
 import Base from "@docspace/components/themes/base";
 
-const paddingRightStyle = (props) =>
+const paddingRightStyle = props =>
   props.theme.fileInput.paddingRight[props.size];
 
-const widthIconStyle = (props) => props.theme.fileInput.icon.width[props.size];
-const heightIconStyle = (props) =>
-  props.theme.fileInput.icon.height[props.size];
+const widthIconStyle = props => props.theme.fileInput.icon.width[props.size];
+const heightIconStyle = props => props.theme.fileInput.icon.height[props.size];
 
 const StyledFileInput = styled.div`
   display: flex;
@@ -16,7 +15,7 @@ const StyledFileInput = styled.div`
     width: 100%;
     margin: 0;
   }
-  width: ${(props) =>
+  width: ${props =>
     (props.scale && "100%") ||
     (props.size === "base" && props.theme.input.width.base) ||
     (props.size === "middle" && props.theme.input.width.middle) ||
@@ -26,7 +25,7 @@ const StyledFileInput = styled.div`
 
   :hover {
     .icon {
-      border-color: ${(props) =>
+      border-color: ${props =>
         (props.hasError && props.theme.input.hoverErrorBorderColor) ||
         (props.hasWarning && props.theme.input.hoverWarningBorderColor) ||
         (props.isDisabled && props.theme.input.hoverDisabledBorderColor) ||
@@ -36,7 +35,7 @@ const StyledFileInput = styled.div`
 
   :active {
     .icon {
-      border-color: ${(props) =>
+      border-color: ${props =>
         (props.hasError && props.theme.input.focusErrorBorderColor) ||
         (props.hasWarning && props.theme.input.focusWarningBorderColor) ||
         (props.isDisabled && props.theme.input.focusDisabledBorderColor) ||
@@ -50,26 +49,33 @@ const StyledFileInput = styled.div`
     justify-content: center;
 
     position: absolute;
-    right: 0;
-    background: ${(props) => props.theme.fileInput.icon.background};
-    width: ${(props) => widthIconStyle(props)};
+    ${props =>
+    props.theme.interfaceDirection === "rtl"
+      ? css`
+            left: 0;
+          `
+      : css`
+            right: 0;
+          `}
+    background: ${props => props.theme.fileInput.icon.background};
+    width: ${props => widthIconStyle(props)};
 
-    height: ${(props) => heightIconStyle(props)};
+    height: ${props => heightIconStyle(props)};
 
     margin: 0;
-    border: ${(props) => props.theme.fileInput.icon.border};
-    border-radius: ${(props) => props.theme.fileInput.icon.borderRadius};
+    border: ${props => props.theme.fileInput.icon.border};
+    border-radius: ${props => props.theme.fileInput.icon.borderRadius};
 
-    border-color: ${(props) =>
+    border-color: ${props =>
       (props.hasError && props.theme.input.errorBorderColor) ||
       (props.hasWarning && props.theme.input.warningBorderColor) ||
       (props.isDisabled && props.theme.input.disabledBorderColor) ||
       props.theme.input.borderColor};
-    cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
+    cursor: ${props => (props.isDisabled ? "default" : "pointer")};
   }
 
   .icon-button {
-    cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
+    cursor: ${props => (props.isDisabled ? "default" : "pointer")};
   }
 `;
 StyledFileInput.defaultProps = { theme: Base };

packages/client/src/components/StandaloneComponents/StyledComponent.js

@@ -41,7 +41,14 @@ const StyledContactComponent = styled.div`
     display: flex;
     width: 100%;
     p {
+      ${props =>
+    props.theme.interfaceDirection === "rtl"
+      ? css`
+      margin-left: 4px;
+            `
+      : css`
       margin-right: 4px;
+            `}
     }
     a {
       text-decoration: underline;

packages/common/components/Article/sub-components/article-profile.js

@@ -17,7 +17,7 @@ import {
 } from "../styled-article";
 import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";
 import DefaultUserPhotoPngUrl from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";
-
+import { useTheme } from 'styled-components'
 const ArticleProfile = (props) => {
   const { user, showText, getUserRole, getActions, onProfileClick } = props;
   const { t } = useTranslation("Common");
@@ -49,7 +49,8 @@ const ArticleProfile = (props) => {
 
   const model = getActions(t);
   const username = user.displayName.split(" ");
-
+  const { interfaceDirection } = useTheme()
+  const isRtl = interfaceDirection === 'rtl'
   const userAvatar = user.hasAvatar ? user.avatar : DefaultUserPhotoPngUrl;
 
   if (!isMobileOnly && isMobileUtils()) return <></>;
@@ -73,7 +74,8 @@ const ArticleProfile = (props) => {
             ref={menuRef}
             onHide={onHide}
             scaled={false}
-            leftOffset={-50}
+            leftOffset={!isRtl && -50}
+            rightOffset={isRtl && 54}
           />
         </div>
         {(!isTabletView || showText) && (

packages/components/context-menu/index.js

@@ -125,7 +125,7 @@ class ContextMenu extends Component {
   position = (event) => {
     if (event) {
       const rects = this.props.containerRef?.current.getBoundingClientRect();
-      let left = rects ? rects.left - this.props.leftOffset : event.pageX + 1;
+      let left = rects ? rects.left - this.props.leftOffset - this.props.rightOffset : event.pageX + 1;
       let top = rects ? rects.top : event.pageY + 1;
       let width = this.menuRef.current.offsetParent
         ? this.menuRef.current.offsetWidth