web component add rtl accessPortal-passwordStrength

packages/client/src/pages/PortalSettings/categories/security/access-portal/passwordStrength.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { useNavigate, useLocation } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
@@ -23,7 +23,14 @@ const MainContainer = styled.div`
   .password-slider {
     width: 160px;
     height: 8px;
-    margin: 24px 16px 24px 0px;
+    ${props =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            margin: 24px 0px 24px 16px;
+          `
+        : css`
+            margin: 24px 16px 24px 0px;
+          `}
   }
 
   .checkboxes {
@@ -37,7 +44,7 @@ const MainContainer = styled.div`
   }
 `;
 
-const PasswordStrength = (props) => {
+const PasswordStrength = props => {
   const {
     t,
 
@@ -126,11 +133,11 @@ const PasswordStrength = (props) => {
       navigate("/portal-settings/security/access-portal");
   };
 
-  const onSliderChange = (e) => {
+  const onSliderChange = e => {
     setPasswordLen(Number(e.target.value));
   };
 
-  const onClickCheckbox = (e) => {
+  const onClickCheckbox = e => {
     switch (e.target.value) {
       case "upperCase":
         setUseUpperCase(e.target.checked);
@@ -195,16 +202,13 @@ const PasswordStrength = (props) => {
           color={currentColorScheme.main.accent}
           target="_blank"
           isHovered
-          href={passwordStrengthSettingsUrl}
-        >
+          href={passwordStrengthSettingsUrl}>
           {t("Common:LearnMore")}
         </Link>
       </LearnMoreWrapper>
-
       <Text fontSize="14px" fontWeight="600" className="length-subtitle">
         {t("PasswordMinLenght")}
       </Text>
-
       <Box displayProp="flex" flexDirection="row" alignItems="center">
         <Slider
           className="password-slider"
@@ -221,7 +225,6 @@ const PasswordStrength = (props) => {
           })}
         </Text>
       </Box>
-
       <Box className="checkboxes">
         <Checkbox
           className="use-upper-case"
@@ -245,7 +248,6 @@ const PasswordStrength = (props) => {
           value="special"
         />
       </Box>
-
       <SaveCancelButtons
         className="save-cancel-buttons"
         onSaveClick={onSaveClick}

packages/client/src/pages/PortalSettings/categories/security/sub-components/category-wrapper.js

@@ -5,8 +5,9 @@ import HelpButton from "@docspace/components/help-button";
 import Link from "@docspace/components/link";
 import { Base } from "@docspace/components/themes";
 import { StyledCategoryWrapper, StyledTooltip } from "../StyledSecurity";
+import { useTheme } from "styled-components";
 
-const CategoryWrapper = (props) => {
+const CategoryWrapper = props => {
   const {
     t,
     title,
@@ -16,7 +17,8 @@ const CategoryWrapper = (props) => {
     currentColorScheme,
     classNameTooltip,
   } = props;
-
+  const { interfaceDirection } = useTheme();
+  const dirTooltip = interfaceDirection === "rtl" ? "left" : "right";
   const tooltip = () => (
     <StyledTooltip>
       <Text className={tooltipUrl ? "subtitle" : ""} fontSize="12px">
@@ -29,8 +31,7 @@ const CategoryWrapper = (props) => {
           target="_blank"
           isHovered
           href={tooltipUrl}
-          color={currentColorScheme.main.accent}
-        >
+          color={currentColorScheme.main.accent}>
           {t("Common:LearnMore")}
         </Link>
       )}
@@ -46,7 +47,7 @@ const CategoryWrapper = (props) => {
         className={classNameTooltip}
         iconName={InfoReactSvgUrl}
         displayType="dropdown"
-        place="right"
+        place={dirTooltip}
         offsetRight={0}
         getContent={tooltip}
         tooltipColor={theme.client.settings.security.owner.tooltipColor}