Web: Login: Add RTL to Login

packages/components/ColorTheme/styled/sub-components/LoginContainer.js

@@ -159,7 +159,10 @@ const LoginContainer = styled.div`
           align-items: flex-start;
 
           svg {
-            margin-right: 8px !important;
+            ${({ theme }) =>
+              theme.interfaceDirection === "rtl"
+                ? `margin-left: 8px !important;`
+                : `margin-right: 8px !important;`}
             rect {
               fill: ${(props) => props.theme.checkbox.fillColor};
               stroke: ${(props) => props.theme.checkbox.borderColor};

packages/components/checkbox/styled-checkbox.js

@@ -172,7 +172,11 @@ const StyledLabel = styled.label`
 
   .help-button {
     display: inline-block;
-    margin-left: 4px;
+
+    ${({ theme }) =>
+      theme.interfaceDirection === "rtl"
+        ? `margin-right: 4px;`
+        : `margin-left: 4px;`}
   }
 `;
 StyledLabel.defaultProps = { theme: Base };

packages/login/src/client/components/Login.tsx

@@ -1,22 +1,14 @@
-import React, {
-  useState,
-  useCallback,
-  useEffect
-} from"react";
+import React, { useState, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
-import {
-  ButtonsWrapper,
-  LoginFormWrapper,
-  LoginContent
-} from "./StyledLogin";
+import { ButtonsWrapper, LoginFormWrapper, LoginContent } from "./StyledLogin";
 import Text from "@docspace/components/text";
 import SocialButton from "@docspace/components/social-button";
 import {
   getProviderTranslation,
   getOAuthToken,
   getLoginLink,
-  checkIsSSR
+  checkIsSSR,
 } from "@docspace/common/utils";
 import { providersData } from "@docspace/common/constants";
 import Link from "@docspace/components/link";
@@ -26,10 +18,7 @@ import MoreLoginModal from "@docspace/common/components/MoreLoginModal";
 import RecoverAccessModalDialog from "@docspace/common/components/Dialogs/RecoverAccessModalDialog";
 import FormWrapper from "@docspace/components/form-wrapper";
 import Register from "./sub-components/register-container";
-import {
-  ColorTheme,
-  ThemeType
-} from "@docspace/components/ColorTheme";
+import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
 import SSOIcon from "PUBLIC_DIR/images/sso.react.svg";
 import { Dark, Base } from "@docspace/components/themes";
 import { useMounted } from "../helpers/useMounted";
@@ -179,9 +168,8 @@ const Login: React.FC<ILoginProps> = ({
         if (!providersData[item.provider]) return;
         if (index > 1) return;
 
-        const { icon, label, iconOptions, className } = providersData[
-          item.provider
-        ];
+        const { icon, label, iconOptions, className } =
+          providersData[item.provider];
 
         return (
           <div className="buttonWrapper" key={`${item.provider}ProviderItem`}>
@@ -235,7 +223,7 @@ const Login: React.FC<ILoginProps> = ({
     >
       <div className="bg-cover"></div>
       <LoginContent enabledJoin={enabledJoin}>
-        <ColorTheme themeId={ThemeType.LinkForgotPassword} theme={theme}>
+        <ColorTheme themeId={ThemeType.LinkForgotPassword}>
           <img src={logoUrl} className="logo-wrapper" />
           <Text
             fontSize="23px"

packages/login/src/client/components/sub-components/register-container.tsx

@@ -30,7 +30,9 @@ const StyledRegister = styled(Box)`
   height: 68px;
   padding: 1.5em;
   bottom: 0;
-  right: 0;
+
+  ${({ theme }) =>
+    theme.interfaceDirection === "rtl" ? `left: 0;` : `right: 0;`}
   background-color: ${(props) => props.theme.login.register.backgroundColor};
   cursor: pointer;
 `;