fix: rtl support for registration screen too

patelkaren · Aug 21, 2023 · ada5497 · ada5497
1 parent bee0015
commit ada5497
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
@@ -145,13 +145,6 @@
       position: absolute;
       bottom: 0px;
     }
-
-    .session-icon-button {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 0px;
-    }
   }
 
   &-terms-conditions-agreement {

diff --git a/ts/components/basic/SessionInput.tsx b/ts/components/basic/SessionInput.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import { SessionIconButton } from '../icon';
 import { Noop } from '../../types/Util';
+import { useHTMLDirection } from '../../util/i18n';
 
 type Props = {
   label?: string;
@@ -46,7 +47,17 @@ const ErrorItem = (props: { error: string | undefined }) => {
 };
 
 const ShowHideButton = (props: { toggleForceShow: Noop }) => {
-  return <SessionIconButton iconType="eye" iconSize="medium" onClick={props.toggleForceShow} />;
+  const htmlDirection = useHTMLDirection();
+  const position = htmlDirection === 'ltr' ? { right: '0px' } : { left: '0px' };
+
+  return (
+    <SessionIconButton
+      iconType="eye"
+      iconSize="medium"
+      onClick={props.toggleForceShow}
+      style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', ...position }}
+    />
+  );
 };
 
 export const SessionInput = (props: Props) => {

diff --git a/ts/mains/main_renderer.tsx b/ts/mains/main_renderer.tsx
@@ -267,13 +267,17 @@ async function start() {
     await connect();
   });
 
-  function openInbox() {
+  function switchBodyToRtlIfNeeded() {
     const rtlLocales = ['fa', 'ar', 'he'];
 
     const loc = (window.i18n as any).getLocale();
     if (rtlLocales.includes(loc) && !document.getElementById('body')?.classList.contains('rtl')) {
       document.getElementById('body')?.classList.add('rtl');
     }
+  }
+
+  function openInbox() {
+    switchBodyToRtlIfNeeded();
     const hideMenuBar = Storage.get('hide-menu-bar', true) as boolean;
     window.setAutoHideMenuBar(hideMenuBar);
     window.setMenuBarVisibility(!hideMenuBar);
@@ -287,6 +291,7 @@ async function start() {
 
   function showRegistrationView() {
     ReactDOM.render(<SessionRegistrationView />, document.getElementById('root'));
+    switchBodyToRtlIfNeeded();
   }
   ExpirationTimerOptions.initExpiringMessageListener();