UI changes

src/css/_layout.scss

@@ -5,6 +5,11 @@ $max-width: 475px;
   font-family: "Kanit Regular";
 }
 
+[lang="ar"] {
+  font-family: "Noto Sans Arabic Regular";
+  font-weight: bold;
+}
+
 html {
   height: 100%;
 }
@@ -29,18 +34,6 @@ body .root .content {
   }
 }
 
-body .root .content .header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 25px 0 25px 0;
-
-  .image {
-    height: 78px;
-    width: 78px;
-  }
-}
-
 body .root .content .row {
   display: flex;
   flex-direction: row;
@@ -51,13 +44,14 @@ body .root .content .row {
 body .root .content .row.title {
   display: flex;
   place-content: center;
+  text-decoration: none;
   width: 100%;
 }
 
 body .root .content .row.dropdown-row {
   .react-select.language {
     text-align: right;
-    li:first-child { font-family: "Vazirmatn Regular"; }
+    li:first-child { font-family: "Noto Sans Arabic Regular"; }
     li:last-child { font-family: "Kanit Regular"; }
   }
 }

src/css/components/Select.scss

@@ -21,6 +21,7 @@
   display: block;
   width: 100px;
   padding: 2px;
+  font-weight: normal;
   &:hover {
     cursor: pointer;
     background-color: lighten(#CCCCCC, 15%);

src/css/pages/SurahStream.scss

@@ -15,13 +15,15 @@
     span.title {
       display: flex;
       align-items: center;
-      font-weight: 500;
     }
-    span.title .svg.sound-on, span.title .svg.sound-off {
+    .svg.sound-on, .svg.sound-off {
       cursor: pointer;
+      height: 24px;
       width: 24px;
+      g { transform: translate(0px, 18px); }
     }
     p {
+      width: 100%;
       margin: 3px 0 10px 0
     }
   }
@@ -38,57 +40,67 @@
   }
 }
 
-.content ul.body.stream {
-  li.ayah p { width: 100%; }
-}
+.content .row.footer {
+  .timer {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    font-size: 65%;
+    font-family: "Kanit Regular";
+    text-align: center;
+    width: 40px;
+    height: 32px;
+    font-weight: bold;
+    border-radius: 5px;
+  }
 
-.content .row .timer {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  font-size: 65%;
-  font-family: "Kanit Regular";
-  text-align: center;
-  width: 32px;
-  height: 18px;
-  font-weight: bold;
-  border-radius: 5px;
-  padding: 2px;
-  position: relative;
-  top: 4px;
-}
+  .shape {
+    width: 40px;
+    height: 32px;
+  }
 
-.content .row svg {
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-}
+  .svg.sound-on, .svg.sound-off {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    g { transform: translate(16px, 16px); }
+  }
 
-.content .row .shape.refresh {
-  height: 16px;
-  width: 16px;
+  .shape.refresh {
+    height: 16px;
+    width: 16px;
+  }
 }
 
 .justify-end {
   justify-content: flex-end !important;
 }
 
-body .root .content.theme.ar {
+.content.theme.ar {
   .row.details  {
     place-content: flex-end;
     span[lang="en"] {
       display: none;
     }
   }
 
-  ul.body.stream .ayah p {
-    margin-top: 10px;
+  ul.body.stream {
+    li.ayah {
+      p {
+        font-size: larger;
+        font-weight: normal;
+      }
+    }
   }
 
-  .row .timer {
+  .row.footer .timer {
     position: relative;
     top: 2px;
   }
+
+  .svg.sound-on, .svg.sound-off {
+    transform: rotate(180deg);
+  }
 }
 
 @import "themes/moon";

src/css/themes/leaf.scss

@@ -4,5 +4,4 @@
 
 .root .content.theme.leaf.ar {
   direction: rtl;
-  font-family: "Vazirmatn Regular";
 }

src/css/themes/leaf/pages/_SurahStream.scss

@@ -9,7 +9,6 @@
     span.title {
       color: $green;
     }
-    p { }
   }
 
   .timer {
@@ -33,3 +32,10 @@
     }
   }
 }
+
+.root .content.theme.leaf.ar {
+  @import "themes/leaf/colors";
+
+  ul.body.stream {
+  }
+}

src/css/themes/moon.scss

@@ -4,5 +4,4 @@
 
 .root .content.theme.moon.ar {
   direction: rtl;
-  font-family: "Vazirmatn Regular";
 }

src/js/components/Shape.tsx

@@ -23,15 +23,20 @@ export function PauseShape({ onClick }: Props) {
 
 export function SoundOnShape({ onClick }: Props) {
   return (
-    <svg viewBox="0 -18 100 100" className="svg sound-on" onClick={onClick}>
+    <svg
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid meet"
+      className="svg sound-off"
+      onClick={onClick}
+    >
       <g>
         <polygon
           fill="none"
           stroke="#000000"
           strokeWidth="2"
           strokeMiterlimit="10"
           points="3,32 3,20 15,20 33,2 33,32 33,62 15,44
-        3,44    "
+          3,44    "
         />
         <path
           fill="none"
@@ -54,7 +59,12 @@ export function SoundOnShape({ onClick }: Props) {
 
 export function SoundOffShape({ onClick }: Props) {
   return (
-    <svg viewBox="0 -18 100 100" className="svg sound-off" onClick={onClick}>
+    <svg
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid meet"
+      className="svg sound-off"
+      onClick={onClick}
+    >
       <g>
         <polygon
           fill="none"

src/js/loaders/SurahIndexLoader.ts

@@ -9,11 +9,8 @@ import postman, { item } from "postman";
   postman(
     item.script("/js/pages/surah-index.js"),
     item.css("/css/pages/surah-index.css"),
-    item.image("/images/moon.svg"),
-    item.image("/images/leaf.svg"),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
-    item.font("Vazirmatn Regular", "url(/fonts/vazirmatn-regular.ttf)"),
-    item.font("Roboto Mono Regular", "url(/fonts/roboto-mono-regular.ttf)"),
+    item.font("Noto Sans Arabic Regular", "url(/fonts/notosansarabic-regular.ttf"),
     item.progress((percent: number) => {
       progressBar.value = percent;
       progressNumber.innerText = `${percent.toFixed(0)}%`;

src/js/loaders/SurahStreamLoader.ts

@@ -15,11 +15,8 @@ import * as Quran from "lib/Quran";
   postman(
     item.script("/js/pages/surah-stream.js"),
     item.css("/css/pages/surah-stream.css"),
-    item.image("/images/moon.svg"),
-    item.image("/images/leaf.svg"),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
-    item.font("Vazirmatn Regular", "url(/fonts/vazirmatn-regular.ttf)"),
-    item.font("Roboto Mono Regular", "url(/fonts/roboto-mono-regular.ttf)"),
+    item.font("Noto Sans Arabic Regular", "url(/fonts/notosansarabic-regular.ttf"),
     item.json(`/${locale}/${surahId}/surah.json`, { className: "surah" }),
     ...recitations.map((recitation: Quran.Recitation) => {
       const ts = [url.format(recitation.url), "time_slots", `${surahId}.json`].join("/");

src/js/pages/SurahIndex.tsx

@@ -22,10 +22,9 @@ function SurahIndex({ locale, surahs, t }: Props) {
 
   return (
     <div className={classNames("content", "theme", theme, locale)}>
-      <div className="header">
-        <a href={"/" + locale} className="image" />
-      </div>
-      <div className="row title">{t(locale, "TheNobleQuran")}</div>
+      <a href={`/${locale}/`} className="row title">
+        {t(locale, "TheNobleQuran")}
+      </a>
       <div className="row dropdown-row">
         <ThemeSelect theme={theme} setTheme={setTheme} />
         <LanguageSelect locale={locale} onChange={onLanguageChange} />

src/js/pages/SurahStream.tsx

@@ -56,12 +56,11 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
 
   return (
     <div className={classNames("content", "theme", theme, locale)}>
-      <div className="header">
-        <a href={"/" + locale} className="image" />
-      </div>
       {readyToRender && (
         <>
-          <div className="row title">{t(locale, "TheNobleQuran")}</div>
+          <a href={`/${locale}/`} className="row title">
+            {t(locale, "TheNobleQuran")}
+          </a>
           <div className="row dropdown-row">
             <ThemeSelect theme={theme} setTheme={setTheme} />
             <LanguageSelect locale={locale} onChange={onLanguageChange} />
@@ -85,7 +84,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
           t={t}
         />
       )}
-      <div className={classNames({ "justify-end": readyToRender && endOfStream }, "row")}>
+      <div className={classNames({ "justify-end": endOfStream }, "row", "footer")}>
         {readyToRender && isPaused && !endOfStream && (
           <PlayShape onClick={() => setIsPaused(false)} />
         )}
@@ -118,7 +117,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
         {readyToRender && endOfStream && <RefreshShape onClick={() => setStream([])} />}
       </div>
       {readyToRender && soundOn && isStalled && (
-        <div className="row justify-end">
+        <div className="row spinner justify-end">
           <LoadingShape />
         </div>
       )}