Login: refactor rtl

packages/login/src/components/Login/Login.styled.ts

@@ -47,10 +47,7 @@ export const LoginFormWrapper = styled.div<{ bgPattern: string }>`
     background-attachment: fixed;
     background-size: cover;
     position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
+    inset: 0;
 
     @media ${mobile} {
       background-image: none;
@@ -79,7 +76,7 @@ export const LoginFormWrapper = styled.div<{ bgPattern: string }>`
 
   .language-combo-box {
     position: fixed;
-    right: 28px;
+    inset-inline-end: 28px;
     top: 28px;
 
     @media ${mobile} {
@@ -100,14 +97,7 @@ export const LoginFormWrapper = styled.div<{ bgPattern: string }>`
         text-overflow: ellipsis;
         overflow: hidden;
 
-        ${(props) =>
-          props.theme.interfaceDirection === "rtl"
-            ? css`
-                right: 0;
-              `
-            : css`
-                left: 0;
-              `};
+        inset-inline-start: 0;
 
         display: flex;
         gap: 4px;

packages/login/src/components/LoginForm/LoginForm.styled.tsx

@@ -35,7 +35,8 @@ export const StyledCaptcha = styled.div<{ isCaptchaError: boolean }>`
       props.isCaptchaError &&
       css`
         border: ${props.theme.login.captcha.border};
-        padding: 4px 4px 4px 2px;
+        padding-block: 4px;
+        padding-inline: 2px 4px;
       `};
 
     margin-bottom: 2px;

packages/login/src/components/Register/Register.styled.ts

@@ -40,8 +40,7 @@ export const StyledRegister = styled(Box)`
   padding: 1.5em;
   bottom: 0;
 
-  ${({ theme }) =>
-    theme.interfaceDirection === "rtl" ? `left: 0;` : `right: 0;`}
+  inset-inline-end: 0;
   background-color: ${(props) => props.theme.login.register.backgroundColor};
   cursor: pointer;
 `;

packages/login/src/components/SimpleNav.tsx

@@ -49,7 +49,7 @@ const StyledSimpleNav = styled.div`
     .language-combo-box {
       position: absolute;
       top: 7px;
-      right: 8px;
+      inset-inline-end: 8px;
     }
   }
 `;

packages/login/src/styles/globals.scss

@@ -50,6 +50,7 @@ body {
 
   .pageLoader {
     position: fixed;
+    // doesn't require mirroring for RTL
     left: calc(50% - 20px);
     top: 35%;
   }