From 265b580a08925d65c90ddb2c1d57a920685f29ee Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Fri, 4 Oct 2024 12:52:02 -0300
Subject: [PATCH] Apply Amiri font for Farsi

---
 share/al-quran.reflectslight.io/CHANGELOG.txt | 6 ++++++
 src/css/main/SurahStream.scss                 | 2 +-
 src/js/components/SurahStream/Stream.tsx      | 7 ++++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/share/al-quran.reflectslight.io/CHANGELOG.txt b/share/al-quran.reflectslight.io/CHANGELOG.txt
index 02d6a468d..cd163b82b 100644
--- a/share/al-quran.reflectslight.io/CHANGELOG.txt
+++ b/share/al-quran.reflectslight.io/CHANGELOG.txt
@@ -2,6 +2,12 @@
 
 * vNEXT
 
+** Apply Amiri font for Farsi
+Similar to Arabic - apply the Amiri Regular font for the content
+of a surah. With this change the distinction is more so between a
+RTL language vs a LTR language rather than between Arabic vs English
+vs Farsi
+
 ** Center-align ~ul.body.stream~
 For RTL languages we will show the content of a surah centered,
 and within a max width of 470px
diff --git a/src/css/main/SurahStream.scss b/src/css/main/SurahStream.scss
index bfaee6eb9..b14331647 100644
--- a/src/css/main/SurahStream.scss
+++ b/src/css/main/SurahStream.scss
@@ -19,7 +19,7 @@ body .root .content.theme {
 }
 
 body .root .content.theme.rtl {
-  ul.body.stream[lang="ar"] {
+  ul.body.stream {
     li.ayah p {
       @extend .font-amiri;
     }
diff --git a/src/js/components/SurahStream/Stream.tsx b/src/js/components/SurahStream/Stream.tsx
index 2ca07a822..b1861a5fc 100644
--- a/src/js/components/SurahStream/Stream.tsx
+++ b/src/js/components/SurahStream/Stream.tsx
@@ -22,6 +22,7 @@ export function Stream({
 }: Props) {
   const className = endOfStream || isPaused ? ["scroll-y"] : [];
   const isArabic = locale.name === "ar";
+  const isRTL = locale.direction === "rtl";
   const ref = useRef<HTMLUListElement>(null);
   const ul = useMemo<JSX.Element>(() => {
     return (
@@ -38,8 +39,8 @@ export function Stream({
             <li
               key={ayah.id}
               className={classNames("ayah fade", {
-                "mb-8": isArabic,
-                "mb-5": !isArabic,
+                "mb-8": isRTL,
+                "mb-5": !isRTL,
               })}
             >
               <span className="flex h-8 items-center color-primary">
@@ -63,7 +64,7 @@ export function Stream({
               </span>
               <p
                 className={classNames("m-0 color-accent", {
-                  "text-2xl mt-5": isArabic,
+                  "text-2xl mt-5": isRTL,
                 })}
               >
                 {ayah.body}