From b3c1c41b2606a83ffc738f1c8557177b3fbb9085 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 31 Aug 2022 15:00:42 +0200
Subject: [PATCH] RTL: Various fixes (#2014)

---
 src/components/left/NewChatButton.scss                |  5 +++++
 src/components/left/NewChatButton.tsx                 |  4 ++--
 src/components/left/settings/Settings.scss            |  5 +++++
 .../left/settings/folders/SettingsFolders.scss        |  1 +
 .../main/premium/PremiumFeatureItem.module.scss       |  2 +-
 .../main/premium/PremiumMainModal.module.scss         |  2 ++
 src/components/main/premium/PremiumMainModal.tsx      |  7 +++++--
 .../premium/common/PremiumLimitPreview.module.scss    |  2 ++
 .../premium/common/PremiumLimitsCompare.module.scss   |  7 ++++++-
 .../main/premium/common/PremiumLimitsCompare.tsx      |  6 +++---
 src/components/ui/FloatingActionButton.scss           |  5 +++++
 src/components/ui/FloatingActionButton.tsx            | 11 ++++++++---
 12 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/components/left/NewChatButton.scss b/src/components/left/NewChatButton.scss
index d35f87f4f..3e1212dc0 100644
--- a/src/components/left/NewChatButton.scss
+++ b/src/components/left/NewChatButton.scss
@@ -6,6 +6,11 @@
 
   transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
 
+  &[dir="rtl"] {
+    right: auto;
+    left: 1rem;
+  }
+
   body.animation-level-0 & {
     transform: none !important;
     opacity: 0;
diff --git a/src/components/left/NewChatButton.tsx b/src/components/left/NewChatButton.tsx
index 6aa7e99c1..ff0aaae04 100644
--- a/src/components/left/NewChatButton.tsx
+++ b/src/components/left/NewChatButton.tsx
@@ -50,7 +50,7 @@ const NewChatButton: FC<OwnProps> = ({
   }, []);
 
   return (
-    <div className={fabClassName}>
+    <div className={fabClassName} dir={lang.isRtl ? 'rtl' : undefined}>
       <Button
         round
         color="primary"
@@ -64,7 +64,7 @@ const NewChatButton: FC<OwnProps> = ({
       </Button>
       <Menu
         isOpen={isMenuOpen}
-        positionX="right"
+        positionX={lang.isRtl ? 'left' : 'right'}
         positionY="bottom"
         autoClose
         onClose={handleClose}
diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss
index 3003e53ff..fddeb5f8b 100644
--- a/src/components/left/settings/Settings.scss
+++ b/src/components/left/settings/Settings.scss
@@ -327,6 +327,11 @@
 
   .FloatingActionButton {
     right: 1.5rem;
+
+    &[dir="rtl"] {
+      right: auto;
+      left: 1.5rem
+    }
   }
 }
 
diff --git a/src/components/left/settings/folders/SettingsFolders.scss b/src/components/left/settings/folders/SettingsFolders.scss
index 5f481da7b..47f991eaa 100644
--- a/src/components/left/settings/folders/SettingsFolders.scss
+++ b/src/components/left/settings/folders/SettingsFolders.scss
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 1rem;
 }
 
 .settings-folders-blocked-icon {
diff --git a/src/components/main/premium/PremiumFeatureItem.module.scss b/src/components/main/premium/PremiumFeatureItem.module.scss
index 42ed3e106..cf2a7e49d 100644
--- a/src/components/main/premium/PremiumFeatureItem.module.scss
+++ b/src/components/main/premium/PremiumFeatureItem.module.scss
@@ -6,7 +6,7 @@
 .text {
   display: flex;
   flex-direction: column;
-  margin-left: 1.75rem !important;
+  margin-inline-start: 1.75rem !important;
 }
 
 .header {
diff --git a/src/components/main/premium/PremiumMainModal.module.scss b/src/components/main/premium/PremiumMainModal.module.scss
index 3cda07669..90d06d1db 100644
--- a/src/components/main/premium/PremiumMainModal.module.scss
+++ b/src/components/main/premium/PremiumMainModal.module.scss
@@ -95,12 +95,14 @@
   font-size: 1.25rem;
   font-weight: 500;
   margin: 0 0 0 3rem;
+  unicode-bidi: plaintext;
 }
 
 .footer-text {
   color: var(--color-text-secondary);
   margin: 0.5rem;
   font-size: 0.875rem;
+  unicode-bidi: plaintext;
 }
 
 .primary-footer-text {
diff --git a/src/components/main/premium/PremiumMainModal.tsx b/src/components/main/premium/PremiumMainModal.tsx
index a8568f6aa..51847e6f5 100644
--- a/src/components/main/premium/PremiumMainModal.tsx
+++ b/src/components/main/premium/PremiumMainModal.tsx
@@ -208,7 +208,7 @@ const PremiumMainModal: FC<OwnProps & StateProps> = ({
     }
 
     return (
-      <div className={styles.footerText}>
+      <div className={styles.footerText} dir={lang.isRtl ? 'rtl' : undefined}>
         {renderTextWithEntities(promo.statusText, promo.statusEntities)}
       </div>
     );
@@ -267,7 +267,10 @@ const PremiumMainModal: FC<OwnProps & StateProps> = ({
                   />
                 );
               })}
-              <div className={buildClassName(styles.footerText, styles.primaryFooterText)}>
+              <div
+                className={buildClassName(styles.footerText, styles.primaryFooterText)}
+                dir={lang.isRtl ? 'rtl' : undefined}
+              >
                 <p>
                   {renderText(lang('AboutPremiumDescription'), ['simple_markdown'])}
                 </p>
diff --git a/src/components/main/premium/common/PremiumLimitPreview.module.scss b/src/components/main/premium/common/PremiumLimitPreview.module.scss
index 12431b041..5e93b68f0 100644
--- a/src/components/main/premium/common/PremiumLimitPreview.module.scss
+++ b/src/components/main/premium/common/PremiumLimitPreview.module.scss
@@ -8,6 +8,7 @@
   font-weight: 500;
   color: var(--color-text);
   margin-left: 0.75rem;
+  unicode-bidi: plaintext;
 }
 
 .description {
@@ -15,4 +16,5 @@
   color: var(--color-text-secondary);
   margin-bottom: 0.5rem;
   margin-left: 0.75rem;
+  unicode-bidi: plaintext;
 }
diff --git a/src/components/main/premium/common/PremiumLimitsCompare.module.scss b/src/components/main/premium/common/PremiumLimitsCompare.module.scss
index fc60e55ac..56db2ab7c 100644
--- a/src/components/main/premium/common/PremiumLimitsCompare.module.scss
+++ b/src/components/main/premium/common/PremiumLimitsCompare.module.scss
@@ -35,9 +35,14 @@
   composes: text;
 }
 
+.right-text, .left-text {
+  composes: text;
+  margin-inline-end: auto;
+}
+
 .right-value, .left-value {
   composes: text;
-  margin-left: auto;
+  margin-inline-start: 1rem;
 }
 
 .right-text, .right-value {
diff --git a/src/components/main/premium/common/PremiumLimitsCompare.tsx b/src/components/main/premium/common/PremiumLimitsCompare.tsx
index 7806912b2..7f6921d2e 100644
--- a/src/components/main/premium/common/PremiumLimitsCompare.tsx
+++ b/src/components/main/premium/common/PremiumLimitsCompare.tsx
@@ -31,16 +31,16 @@ const PremiumLimitsCompare: FC<OwnProps> = ({
       {floatingBadgeIcon && (
         <div className={styles.floatingBadge}>
           <i className={buildClassName(styles.floatingBadgeIcon, floatingBadgeIcon)} />
-          <div className={styles.floatingBadgeValue}>{leftValue}</div>
+          <div className={styles.floatingBadgeValue} dir={lang.isRtl ? 'rtl' : undefined}>{leftValue}</div>
           <div className={styles.floatingBadgeTriangle} dangerouslySetInnerHTML={{ __html: TRIANGLE_SVG }} />
         </div>
       )}
       <div className={buildClassName(styles.line, styles.left)}>
-        <div className={styles.leftText}>{lang('LimitFree')}</div>
+        <div className={styles.leftText} dir={lang.isRtl ? 'rtl' : undefined}>{lang('LimitFree')}</div>
         {!floatingBadgeIcon && <div className={styles.leftValue}>{leftValue}</div>}
       </div>
       <div className={buildClassName(styles.line, styles.right)} style={rightStyle}>
-        <div className={styles.rightText}>{lang('LimitPremium')}</div>
+        <div className={styles.rightText} dir={lang.isRtl ? 'rtl' : undefined}>{lang('LimitPremium')}</div>
         <div className={styles.rightValue}>{rightValue}</div>
       </div>
     </div>
diff --git a/src/components/ui/FloatingActionButton.scss b/src/components/ui/FloatingActionButton.scss
index de6c64036..da4321e53 100644
--- a/src/components/ui/FloatingActionButton.scss
+++ b/src/components/ui/FloatingActionButton.scss
@@ -13,4 +13,9 @@
   &.revealed {
     transform: translateY(calc(0rem - var(--call-header-height, 0rem)));
   }
+
+  &[dir="rtl"] {
+    right: auto;
+    left: 1rem;
+  }
 }
diff --git a/src/components/ui/FloatingActionButton.tsx b/src/components/ui/FloatingActionButton.tsx
index 86dec6f3c..8dc67918a 100644
--- a/src/components/ui/FloatingActionButton.tsx
+++ b/src/components/ui/FloatingActionButton.tsx
@@ -1,9 +1,11 @@
-import type { FC } from '../../lib/teact/teact';
 import React from '../../lib/teact/teact';
 
-import buildClassName from '../../util/buildClassName';
-
+import type { FC } from '../../lib/teact/teact';
 import type { OwnProps as ButtonProps } from './Button';
+
+import buildClassName from '../../util/buildClassName';
+import useLang from '../../hooks/useLang';
+
 import Button from './Button';
 
 import './FloatingActionButton.scss';
@@ -27,6 +29,8 @@ const FloatingActionButton: FC<OwnProps> = ({
   onClick,
   children,
 }) => {
+  const lang = useLang();
+
   const buttonClassName = buildClassName(
     'FloatingActionButton',
     isShown && 'revealed',
@@ -42,6 +46,7 @@ const FloatingActionButton: FC<OwnProps> = ({
       onClick={isShown && !disabled ? onClick : undefined}
       ariaLabel={ariaLabel}
       tabIndex={-1}
+      isRtl={lang.isRtl}
     >
       {children}
     </Button>