From 99b9347ddff7c45ab74d1f7c0a92c440f60806e7 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 21 Dec 2021 12:17:07 +0300
Subject: [PATCH] RTL: Better font and various fixes (#1590)

---
 src/components/middle/message/MessageMeta.scss  | 17 +++++++++++++----
 .../middle/message/_message-content.scss        |  2 +-
 src/components/ui/TabList.tsx                   |  3 ++-
 src/styles/index.scss                           |  9 ++++++---
 src/styles/reboot.css                           |  7 -------
 src/util/fastSmoothScrollHorizontal.ts          |  3 ++-
 6 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/components/middle/message/MessageMeta.scss b/src/components/middle/message/MessageMeta.scss
index 225af03ef..11f37f572 100644
--- a/src/components/middle/message/MessageMeta.scss
+++ b/src/components/middle/message/MessageMeta.scss
@@ -21,12 +21,12 @@
   }
 
   .message-time {
-    margin-inline-end: .1875rem;
+    margin-right: .1875rem;
   }
 
   body.is-ios & {
     .message-time {
-      margin-inline-end: .25rem;
+      margin-right: .25rem;
     }
   }
 
@@ -41,8 +41,8 @@
   }
 
   .icon-channelviews {
-    margin-inline-start: 0.125rem;
-    margin-inline-end: 0.375rem;
+    margin-left: 0.125rem;
+    margin-right: 0.375rem;
     font-size: 1.125rem;
     position: relative;
     top: -0.0625rem;
@@ -113,6 +113,15 @@
   .message-content.has-replies.text:not(.custom-shape) & {
     bottom: 3.4375rem;
   }
+
+  &[dir="rtl"] {
+    .message-views {
+      order: 10;
+    }
+    .icon-channelviews {
+      order: 9;
+    }
+  }
 }
 
 .Message:not(.own) {
diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss
index a667d1b7d..0e912a870 100644
--- a/src/components/middle/message/_message-content.scss
+++ b/src/components/middle/message/_message-content.scss
@@ -67,7 +67,7 @@
       top: .375rem;
       bottom: auto !important;
       float: right;
-      line-height: 1;
+      line-height: 1.35;
       height: calc(var(--message-meta-height, 1rem));
       margin-left: .4375rem;
       margin-right: -.5rem;
diff --git a/src/components/ui/TabList.tsx b/src/components/ui/TabList.tsx
index b1cf35c59..aad98805b 100644
--- a/src/components/ui/TabList.tsx
+++ b/src/components/ui/TabList.tsx
@@ -51,7 +51,8 @@ const TabList: FC<OwnProps> = ({
       return;
     }
 
-    const newLeft = activeTabElement.offsetLeft - (offsetWidth / 2) + (activeTabElement.offsetWidth / 2);
+    const { offsetLeft: activeTabOffsetLeft, offsetWidth: activeTabOffsetWidth } = activeTabElement;
+    const newLeft = activeTabOffsetLeft - (offsetWidth / 2) + (activeTabOffsetWidth / 2);
 
     // Prevent scrolling by only a couple of pixels, which doesn't look smooth
     if (Math.abs(newLeft - scrollLeft) < TAB_SCROLL_THRESHOLD_PX) {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 3d3a5f8ae..e2691f366 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -14,8 +14,11 @@ html, body {
   margin: 0;
   padding: 0;
   font-size: 16px;
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif;
+  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   color: var(--color-text);
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
   overflow: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -32,11 +35,11 @@ body.is-macos {
 
 html[lang=fa],
 html[lang=fa] body {
-  font-family: "Vazir", "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif;
+  font-family: "Vazir", "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 
   &.is-ios,
   &.is-macos {
-    font-family: "Vazir", -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif;
+    font-family: "Vazir", -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   }
 }
 
diff --git a/src/styles/reboot.css b/src/styles/reboot.css
index 3efa8db8e..e73ac886c 100644
--- a/src/styles/reboot.css
+++ b/src/styles/reboot.css
@@ -22,13 +22,6 @@ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, s
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #212529;
-  text-align: left;
-  background-color: #fff;
 }
 
 [tabindex="-1"]:focus {
diff --git a/src/util/fastSmoothScrollHorizontal.ts b/src/util/fastSmoothScrollHorizontal.ts
index 01552fb39..357a2a49e 100644
--- a/src/util/fastSmoothScrollHorizontal.ts
+++ b/src/util/fastSmoothScrollHorizontal.ts
@@ -14,11 +14,12 @@ export default function fastSmoothScrollHorizontal(container: HTMLElement, left:
 }
 
 function scrollWithJs(container: HTMLElement, left: number, duration: number) {
+  const isRtl = container.getAttribute('dir') === 'rtl';
   const { scrollLeft, offsetWidth: containerWidth, scrollWidth } = container;
   let path = left - scrollLeft;
 
   if (path < 0) {
-    const remainingPath = -scrollLeft;
+    const remainingPath = -scrollLeft * (isRtl ? -1 : 1);
     path = Math.max(path, remainingPath);
   } else if (path > 0) {
     const remainingPath = scrollWidth - (scrollLeft + containerWidth);