Merge branch 'main' into production

src/css/pages/SurahIndex.scss

@@ -51,17 +51,9 @@ 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; }
     }
   }
-  }
   footer {
     a {
       flex-direction: row-reverse;

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

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(

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}