refactor(console,experience): improve RTL support

packages/console/src/App.tsx

@@ -7,7 +7,6 @@ import {
   TenantScope,
 } from '@logto/schemas';
 import { conditionalArray } from '@silverhand/essentials';
-import i18next from 'i18next';
 import { useContext, useMemo } from 'react';
 import { Helmet } from 'react-helmet';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
@@ -115,17 +114,7 @@ function Providers() {
       }}
     >
       <AppThemeProvider>
-        <Helmet
-          titleTemplate={`%s - ${mainTitle}`}
-          defaultTitle={mainTitle}
-          htmlAttributes={{
-            // We intentionally use the imported i18next instance instead of the hook, since the
-            // hook will cause a re-render following some bugs here. This still works for the
-            // initial render, so we're good for now. Consider refactoring this in the future.
-            lang: i18next.language,
-            dir: i18next.dir(),
-          }}
-        />
+        <Helmet titleTemplate={`%s - ${mainTitle}`} defaultTitle={mainTitle} />
         <Toast />
         <AppConfirmModalProvider>
           <ErrorBoundary>

packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/index.module.scss

@@ -81,12 +81,14 @@
 
 .mostPopularTag {
   position: absolute;
-  border-radius: 4px 4px 0;
+  border-radius: 4px;
+  border-end-end-radius: unset;
   font: var(--font-label-3);
-  padding: _.unit(1.5) _.unit(2) _.unit(1.5) _.unit(2.5);
+  padding-block: _.unit(1.5);
+  padding-inline: _.unit(2.5) _.unit(2);
   color: var(--color-white);
   background-color: var(--color-specific-tag-upsell);
-  right: -5px;
+  inset-inline-end: -5px;
   top: _.unit(6);
   width: 64px;
   text-align: center;
@@ -95,9 +97,9 @@
     display: block;
     content: '';
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: -3px;
-    border-left: 4px solid var(--color-primary-60);
+    border-inline-start: 4px solid var(--color-primary-60);
     border-bottom: 3px solid transparent;
   }
 }

packages/console/src/components/Drawer/index.module.scss

@@ -1,15 +1,18 @@
 @use '@/scss/underscore' as _;
 
+$offset: 100%;
+
 .content {
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   bottom: 0;
   width: 50%;
   max-width: 960px;
   min-width: 860px;
   outline: none;
   background: var(--color-base);
+  transition: transform 0.3s ease-in-out;
 
   .wrapper {
     display: flex;
@@ -45,16 +48,27 @@
 :global {
   .ReactModal__Content[role='drawer'] {
     transform: translateX(100%);
-    transition: transform 0.3s ease-in-out;
+  }
+
+  .ReactModal__Content[role='drawer'][data-dir='rtl'] {
+    transform: translateX(-100%);
   }
 
   .ReactModal__Content--after-open[role='drawer'] {
     transform: translateX(0);
   }
 
+  .ReactModal__Content--after-open[role='drawer'][data-dir='rtl'] {
+    transform: translateX(0);
+  }
+
   .ReactModal__Content--before-close[role='drawer'] {
     transform: translateX(100%);
   }
+
+  .ReactModal__Content--before-close[role='drawer'][data-dir='rtl'] {
+    transform: translateX(-100%);
+  }
 }
 
 /* stylelint-enable selector-class-pattern */

packages/console/src/components/Drawer/index.tsx

@@ -1,4 +1,5 @@
 import type { AdminConsoleKey } from '@logto/phrases';
+import { useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
 import Close from '@/assets/icons/close.svg?react';
@@ -17,12 +18,14 @@ type Props = {
 };
 
 function Drawer({ title, subtitle, isOpen, children, onClose }: Props) {
+  const { i18n } = useTranslation();
   return (
     <ReactModal
       shouldCloseOnOverlayClick
       // Styling purpose
       // eslint-disable-next-line jsx-a11y/aria-role
       role="drawer"
+      data={{ dir: i18n.dir() }}
       isOpen={isOpen}
       className={styles.content}
       overlayClassName={styles.overlay}

packages/console/src/components/EntitiesTransfer/components/TargetEntityItem/index.module.scss

@@ -3,7 +3,8 @@
 .item {
   display: flex;
   align-items: center;
-  padding: _.unit(2) _.unit(3) _.unit(2) _.unit(4);
+  padding-block: _.unit(2);
+  padding-inline: _.unit(4) _.unit(3);
   user-select: none;
 
   .meta {

packages/console/src/components/RoleScopesTransfer/components/SourceScopeItem/index.module.scss

@@ -3,7 +3,8 @@
 .sourceScopeItem {
   display: flex;
   align-items: center;
-  padding: _.unit(1.5)  _.unit(4) _.unit(1.5) _.unit(11.5);
+  padding-block: _.unit(1.5);
+  padding-inline: _.unit(11.5) _.unit(4);
 
   .name {
     font: var(--font-body-2);

packages/console/src/components/RoleScopesTransfer/components/TargetScopeItem/index.module.scss

@@ -3,7 +3,8 @@
 .targetScopeItem {
   display: flex;
   align-items: center;
-  padding: _.unit(1.5) _.unit(3) _.unit(1.5) _.unit(4);
+  padding-block: _.unit(1.5);
+  padding-inline: _.unit(4) _.unit(3);
 
   .title {
     flex: 1 1 0;

packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.module.scss

@@ -4,7 +4,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: _.unit(2) _.unit(3) _.unit(2) _.unit(4);
+  padding-block: _.unit(2);
+  padding-inline: _.unit(4) _.unit(3);
   user-select: none;
 
   &:hover {

packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss

@@ -3,7 +3,8 @@
 .item {
   display: flex;
   align-items: center;
-  padding: _.unit(2.5) _.unit(3) _.unit(2.5) _.unit(4);
+  padding-block: _.unit(2.5);
+  padding-inline: _.unit(4) _.unit(3);
   margin: _.unit(1);
   border-radius: 6px;
   transition: background-color 0.2s ease-in-out;

packages/console/src/components/Topbar/TenantSelector/index.module.scss

@@ -55,20 +55,13 @@ $dropdown-item-height: 40px;
     background-color: var(--color-neutral-80);
     flex-shrink: 0;
     position: absolute;
-    left: _.unit(-3);
+    inset-inline-start: _.unit(-3);
   }
 
   &:hover::before {
     pointer-events: none;
     cursor: default;
   }
-
-  &.rtl {
-    &::before {
-      left: unset;
-      right: _.unit(-3);
-    }
-  }
 }
 
 .dropdown {
@@ -86,7 +79,8 @@ $dropdown-item-height: 40px;
   all: unset;
   display: flex;
   align-items: center;
-  padding: _.unit(2.5) _.unit(3) _.unit(2.5) _.unit(4);
+  padding-block: _.unit(2.5);
+  padding-inline: _.unit(4) _.unit(3);
   margin: _.unit(1);
   border-radius: 6px;
   transition: background-color 0.2s ease-in-out;

packages/console/src/components/Topbar/TenantSelector/index.tsx

@@ -1,5 +1,4 @@
 import { OrganizationInvitationStatus } from '@logto/schemas';
-import classNames from 'classnames';
 import { useContext, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -21,7 +20,7 @@ import TenantInvitationDropdownItem from './TenantInvitationDropdownItem';
 import styles from './index.module.scss';
 
 export default function TenantSelector() {
-  const { t, i18n } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     tenants,
     prependTenant,
@@ -45,7 +44,7 @@ export default function TenantSelector() {
       <div
         ref={anchorRef}
         tabIndex={0}
-        className={classNames(styles.currentTenantCard, styles[i18n.dir()])}
+        className={styles.currentTenantCard}
         role="button"
         onKeyDown={onKeyDownHandler(() => {
           setShowDropdown(true);

packages/console/src/components/Topbar/UserInfo/SubMenu/index.module.scss

@@ -28,7 +28,7 @@
 .menu {
   position: absolute;
   top: -4px;
-  right: calc(100% + 5px);
+  inset-inline-end: calc(100% + 5px);
   visibility: hidden;
   background: var(--color-float);
   border: 1px solid var(--color-divider);
@@ -38,17 +38,13 @@
   &.visible {
     visibility: visible;
   }
-
-  &.rtl {
-    right: unset;
-    left: calc(100% + 5px);
-  }
 }
 
 .menuOption {
   position: relative;
   min-width: 200px;
-  padding: _.unit(2.5) _.unit(5.5) _.unit(2.5) _.unit(8);
+  padding-block: _.unit(2.5);
+  padding-inline: _.unit(8) _.unit(5.5);
   margin: _.unit(1);
 
   &.selected {
@@ -57,16 +53,7 @@
 
   .tick {
     position: absolute;
-    left: 8px;
+    inset-inline-start: 8px;
     top: 10px;
   }
-
-  &.rtl {
-    padding: _.unit(2.5) _.unit(8) _.unit(2.5) _.unit(5.5);
-
-    .tick {
-      left: unset;
-      right: 8px;
-    }
-  }
 }

packages/console/src/components/Topbar/UserInfo/SubMenu/index.tsx

@@ -1,7 +1,6 @@
 import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import { type ReactNode, useCallback, useState, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import ArrowRight from '@/assets/icons/arrow-right.svg?react';
 import Tick from '@/assets/icons/tick.svg?react';
@@ -44,7 +43,6 @@ function SubMenu<T extends string>({
   const mouseEnterTimeoutRef = useRef(0);
   const mouseLeaveTimeoutRef = useRef(0);
   const [menuHeight, setMenuHeight] = useState<number>();
-  const { i18n } = useTranslation();
 
   const calculateDropdownHeight = useCallback(() => {
     if (anchorRef.current) {
@@ -97,7 +95,7 @@ function SubMenu<T extends string>({
         <ArrowRight className={styles.icon} />
       </FlipOnRtl>
       <OverlayScrollbar
-        className={classNames(styles.menu, showMenu && styles.visible, styles[i18n.dir()])}
+        className={classNames(styles.menu, showMenu && styles.visible)}
         style={{ maxHeight: menuHeight }}
       >
         {options.map(({ value, title }) => {
@@ -109,8 +107,7 @@ function SubMenu<T extends string>({
               className={classNames(
                 styles.menuOption,
                 selected && styles.selected,
-                menuItemClassName,
-                styles[i18n.dir()]
+                menuItemClassName
               )}
               onClick={() => {
                 onItemClick(value);

packages/console/src/components/Topbar/UserInfo/index.module.scss

@@ -8,7 +8,7 @@
     content: '';
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     display: block;
     border-radius: 8px;
     width: 32px;

packages/console/src/containers/AppBoundary/index.tsx

@@ -1,7 +1,9 @@
 import type { ReactNode } from 'react';
 import { useEffect } from 'react';
+import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
+import useTheme from '@/hooks/use-theme';
 import useUserPreferences from '@/hooks/use-user-preferences';
 
 type Props = {
@@ -12,14 +14,21 @@ function AppBoundary({ children }: Props) {
   const {
     data: { language },
   } = useUserPreferences();
+  const theme = useTheme();
   const { i18n } = useTranslation();
 
   useEffect(() => {
     void i18n.changeLanguage(language);
   }, [i18n, language]);
 
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return <>{children}</>;
+  return (
+    <>
+      <Helmet>
+        <html lang={language} dir={i18n.dir()} data-theme={theme} />
+      </Helmet>
+      {children}
+    </>
+  );
 }
 
 export default AppBoundary;

packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.module.scss

@@ -3,7 +3,8 @@
 .row {
   display: flex;
   align-items: center;
-  margin: _.unit(1) _.unit(6) _.unit(1) _.unit(4);
+  margin-block: _.unit(1);
+  margin-inline: _.unit(4) _.unit(6);
   padding: _.unit(2);
   color: var(--color-neutral-variant-30);
   border-radius: _.unit(2);
@@ -15,10 +16,6 @@
   width: calc(100% - _.unit(10));
   gap: _.unit(4);
 
-  &.rtl {
-    margin: _.unit(1) _.unit(4) _.unit(1) _.unit(6);
-  }
-
   .icon {
     height: _.unit(5);
     flex: 0 0 _.unit(5);