From 113c29439d5001bc1820c1415ff889fd591a4c67 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Thu, 29 Feb 2024 13:39:22 -0300
Subject: [PATCH] Fix style / alignment issues

---
 src/css/pages/SurahIndex.scss       | 10 +---------
 src/css/pages/SurahStream.scss      |  7 ++++++-
 src/js/loaders/SurahStreamLoader.ts |  1 +
 src/js/pages/SurahStream.tsx        |  2 +-
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/css/pages/SurahIndex.scss b/src/css/pages/SurahIndex.scss
index a04a06677..167470747 100644
--- a/src/css/pages/SurahIndex.scss
+++ b/src/css/pages/SurahIndex.scss
@@ -51,15 +51,7 @@ body .root .content.theme.ar {
 
   ul.body.index {
     li.surah {
-      a {
-        span.id {
-          font-size: x-large;
-        }
-        span.name {
-          font-size: x-large;
-        }
-        span.transliterated { display: none; }
-      }
+      span.transliterated { display: none; }
     }
   }
   footer {
diff --git a/src/css/pages/SurahStream.scss b/src/css/pages/SurahStream.scss
index b48964820..f1475b6fe 100644
--- a/src/css/pages/SurahStream.scss
+++ b/src/css/pages/SurahStream.scss
@@ -19,7 +19,7 @@ body .root .content.theme {
 
   footer {
     .sound-off.icon, .sound-on.icon {
-      transform: translate(0, 5px);
+      transform: translate(0, 7px);
     }
   }
 }
@@ -35,6 +35,8 @@ body .root .content.theme.en {
 
 /* Arabic-specific rules */
 body .root .content.theme.ar {
+  font-size: larger;
+
   header {
     .surah-name {
       flex-direction: row-reverse;
@@ -60,6 +62,9 @@ body .root .content.theme.ar {
     .timer {
       justify-content: flex-start;
     }
+    .sound-box {
+      justify-content: flex-start;
+    }
   }
 }
 
diff --git a/src/js/loaders/SurahStreamLoader.ts b/src/js/loaders/SurahStreamLoader.ts
index a08a9d6ea..3cb104b47 100644
--- a/src/js/loaders/SurahStreamLoader.ts
+++ b/src/js/loaders/SurahStreamLoader.ts
@@ -16,6 +16,7 @@ import * as Quran from "lib/Quran";
     item.script("/js/surah-stream.js"),
     item.css("/css/surah-stream.css"),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
+    item.font("Mada Regular", "url(/fonts/mada-regular.ttf"),
     item.json(`/${locale}/${surahId}/surah.json`, { className: "surah" }),
     ...recitations.map((recitation: Quran.Recitation) => {
       const path = ["/durations", `${recitation.id}`, `${surahId}.json`].join(
diff --git a/src/js/pages/SurahStream.tsx b/src/js/pages/SurahStream.tsx
index 0143676ec..c33cd1843 100644
--- a/src/js/pages/SurahStream.tsx
+++ b/src/js/pages/SurahStream.tsx
@@ -114,7 +114,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
           <PauseIcon onClick={() => setIsPaused(true)} />
         )}
         {readyToRender && !endOfStream && (
-          <div className="flex w-10 justify-end">
+          <div className="sound-box flex w-14 justify-end">
             <AudioControl
               recitation={recitation}
               surah={surah}