RTL: Various fixes (#2014)

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;

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}

src/components/left/settings/Settings.scss

@@ -327,6 +327,11 @@
 
   .FloatingActionButton {
     right: 1.5rem;
+
+    &[dir="rtl"] {
+      right: auto;
+      left: 1.5rem
+    }
   }
 }
 

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 {

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 {

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 {

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>

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;
 }

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 {

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>

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;
+  }
 }

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>