Further UI improvements

src/css/_layout.scss

@@ -1,12 +1,12 @@
 $black: #454545;
 $max-width: 728px;
 
-[lang="en"] {
+html[lang="en"] {
   font-family: "Kanit Regular";
 }
 
-[lang="ar"] {
-  font-family: "Noto Sans Arabic Regular";
+html[lang="ar"] {
+  font-family: "Amiri Quran Regular";
 }
 
 html {
@@ -14,7 +14,6 @@ html {
 }
 
 html body {
-  font-family: "Kanit Regular";
   color: $black;
   height: 85%;
 }
@@ -32,51 +31,57 @@ body .root .content {
   @media screen and (max-width: $max-width) {
     width: 350px;
   }
-}
 
-body .root .content .row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  direction: ltr;
-}
+  a.title {
+    display: flex;
+    place-content: center;
+    text-decoration: none;
+    width: 100%;
+    font-size: large;
+  }
 
-body .root .content .row.title {
-  display: flex;
-  place-content: center;
-  text-decoration: none;
-  width: 100%;
-  font-size: large;
+  ul.body {
+    clear: both;
+    list-style-type: none;
+    height: 90%;
+    padding: 0;
+
+    /* Height of 625px, or less */
+    @media screen and (max-height: 625px) {
+      height: 330px;
+    }
+
+    /* Height of 595px, or less */
+    @media screen and (max-height: 595px) {
+      height: 310px;
+    }
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    direction: ltr;
+  }
+
+  .row.dropdown-row {
+    align-items: flex-end;
+    line-height: 30px;
+
+    .react-select.theme {
+      width: 35px;
+    }
+
+    .react-select.language {
+      width: 70px;
+      text-align: right;
+      li { font-family: "Kanit Regular"; }
+    }
+  }
 }
 
 body .root .content.ar {
   a.title {
-    font-family: "Amiri Quran Regular";
     font-size: xx-large;
   }
 }
-
-body .root .content .row.dropdown-row {
-  .react-select.language {
-    text-align: right;
-    li:first-child { font-family: "Noto Sans Arabic Regular"; }
-    li:last-child { font-family: "Kanit Regular"; }
-  }
-}
-
-body .root .content ul.body {
-  clear: both;
-  list-style-type: none;
-  height: 90%;
-  padding: 0;
-
-  /* Height of 625px, or less */
-  @media screen and (max-height: 625px) {
-    height: 330px;
-  }
-
-  /* Height of 595px, or less */
-  @media screen and (max-height: 595px) {
-    height: 310px;
-  }
-}

src/css/components/Icon.scss

@@ -29,7 +29,7 @@
 .stalled.icon {
   display: inline-block;
   position: relative;
-  left: -26px;
+  left: -42px;
   height: 4px;
 
   div {
@@ -86,9 +86,10 @@
 .content.theme.ar {
   ul.stream span.title {
     .sound-on.icon, .sound-off.icon {
+      height: 30px;
       transform: rotate(180deg);
       g {
-        transform: translate(0px, 10px);
+        transform: translate(0px, -15px);
       }
     }
   }

src/css/components/Select.scss

@@ -19,8 +19,6 @@
 
 .react-select ul li {
   display: block;
-  width: 100px;
-  padding: 2px;
   font-weight: normal;
   &:hover {
     cursor: pointer;

src/css/pages/SurahIndex.scss

@@ -1,73 +1,74 @@
 @import "layout";
 @import "components/Select";
 
-ul.body.index {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  width: 100%;
-  overflow: auto;
-
-  li.surah {
-    width: 100%;
-    margin-bottom: 10px;
-  }
-
-  li.surah a {
+body .root .content.theme {
+  ul.body.index {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
+    flex-wrap: wrap;
     width: 100%;
+    overflow: auto;
 
-    &:visited, &:active, &:link {
-      text-decoration: none;
+    li.surah {
+      width: 100%;
+      margin-bottom: 10px;
     }
 
-    div:first-child {
+    li.surah a {
       display: flex;
-      flex-direction: row;
-      height: 32px;
+      justify-content: space-between;
+      width: 100%;
 
-      span {
+      &:visited, &:active, &:link {
+        text-decoration: none;
+      }
+
+      div:first-child {
         display: flex;
-        align-items: center;
-      }
-
-      span.id {
         flex-direction: row;
-        justify-content: center;
-        width: 32px;
         height: 32px;
-        text-align: center;
-        font-weight: bold;
+
+        span {
+          display: flex;
+          align-items: center;
+        }
+
+        span.id {
+          flex-direction: row;
+          justify-content: center;
+          width: 32px;
+          height: 32px;
+          text-align: center;
+          font-weight: bold;
+        }
+
+        span.name {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          font-weight: normal;
+        }
       }
 
-      span.name {
+      .transliterated {
         display: flex;
         flex-direction: column;
+        align-items: end;
         justify-content: center;
-        align-items: unset;
-        width: 210px;
         font-weight: normal;
-      }
-    }
-
-    .transliterated {
-      display: flex;
-      flex-direction: column;
-      align-items: end;
-      justify-content: center;
-      font-weight: normal;
-      @media screen and (max-width: $max-width) {
-        display: none;
+        @media screen and (max-width: $max-width) {
+          display: none;
+        }
       }
     }
   }
+
+  .row.surah.choose-random {
+    display: flex;
+    place-content: center;
+  }
 }
 
-body .root .content .row.surah.choose-random {
-  display: flex;
-  place-content: center;
-}
 
 body .root .content.theme.en {
   ul.body.index li.surah {
@@ -79,20 +80,24 @@ body .root .content.theme.en {
 
 body .root .content.theme.ar {
   font-size: larger;
+
   ul.body.index {
     li.surah {
       a div:first-child .id {
-        width: 40px;
+        width: 55px;
         margin-left: 8px;
       }
-      a div:first-child .name {
-        font-size: large;
+      a div:first-child .id, a div:first-child .name {
+        font-size: larger;
       }
       .transliterated { display: none; }
     }
-
   }
 
+  .row.surah.choose-random {
+    font-family: "Handjet Regular";
+    font-size: x-large;
+  }
 }
 
 @import "themes/moon";

src/css/pages/SurahStream.scss

@@ -46,13 +46,12 @@
 
   .timer {
     display: flex;
-    position: relative;
-    left: 8px;
+    flex-direction: column;
     justify-content: flex-end;
+    height: 32px;
     width: 40px;
-
-    font-size: 80%;
     font-family: "Kanit Regular";
+    font-size: 80%;
     text-align: center;
     font-weight: bold;
   }
@@ -62,19 +61,42 @@
   justify-content: flex-end !important;
 }
 
+.content.theme.en {}
+
 .content.theme.ar {
   .row.details  {
+    display: none;
     place-content: flex-end;
-    span[lang="en"] {
-      display: none;
+  }
+
+  .row.dropdown-row {
+    span.surah-name {
+      position: relative;
+      left: 20px;
+      display: flex;
+      flex-direction: column;
+      width: 180px;
+      font-size: xx-large;
+      align-items: center;
+      line-height: 30px;
+      height: 30px;
     }
   }
 
+  .row.details {
+    display: none;
+  }
+
   ul.body.stream {
     li.ayah {
-      p {
+      span.title {
         font-size: larger;
+      }
+      p {
+        font-size: x-large;
         font-weight: normal;
+        line-height: 30px;
+        margin: 15px 0 10px 0;
       }
     }
   }

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

@@ -7,7 +7,7 @@
   }
 
   ul.body.stream li.ayah {
-    span.title {
+    span.title span:first-child {
       color: $green;
     }
   }
@@ -36,6 +36,12 @@
 .root .content.theme.leaf.ar {
   @import "themes/leaf/colors";
 
+  .row.dropdown-row {
+    .surah-name {
+      color: lighten($green, 15%);
+    }
+  }
+
   ul.body.stream {
   }
 }

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

@@ -12,10 +12,21 @@
 
   ul.body.stream {
     li.ayah {
-      span.title {
+      span.title span {
         color: $gold-primary;
       }
       p { }
     }
   }
 }
+
+.root .content.theme.moon.ar {
+  @import "themes/moon/colors";
+
+  .row.dropdown-row {
+    line-height: 30px;
+    span.surah-name {
+      color: lighten($gold-primary, 25%);
+    }
+  }
+}

src/js/components/ThemeSelect.tsx

@@ -14,7 +14,7 @@ export function ThemeSelect({ setTheme, theme }: Props) {
   };
 
   return (
-    <Select value={theme} onChange={onThemeChange}>
+    <Select className="theme" value={theme} onChange={onThemeChange}>
       <option value="moon">🌛</option>
       <option value="leaf">🌿</option>
     </Select>

src/js/lib/i18n.ts

@@ -21,8 +21,5 @@ export function i18n(json: string): TFunction {
 export function formatNumber(number: number, locale: Quran.Locale): string {
   const numLocale = locale === "ar" ? "ar-SA" : locale;
   const options = { maximumFractionDigits: 1 };
-  return new Intl.NumberFormat(numLocale, options)
-    .format(number)
-    .split(/([^\d])/)
-    .join(" ");
+  return new Intl.NumberFormat(numLocale, options).format(number);
 }

src/js/loaders/SurahIndexLoader.ts

@@ -10,7 +10,7 @@ import postman, { item } from "postman";
     item.script("/js/pages/surah-index.js"),
     item.css("/css/pages/surah-index.css"),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
-    item.font("Noto Sans Arabic Regular", "url(/fonts/notosansarabic-regular.ttf"),
+    item.font("Handjet Regular", "url(/fonts/handjet-regular.ttf"),
     item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf"),
     item.progress((percent: number) => {
       progressBar.value = percent;

src/js/loaders/SurahStreamLoader.ts

@@ -16,7 +16,7 @@ import * as Quran from "lib/Quran";
     item.script("/js/pages/surah-stream.js"),
     item.css("/css/pages/surah-stream.css"),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
-    item.font("Noto Sans Arabic Regular", "url(/fonts/notosansarabic-regular.ttf"),
+    item.font("Cairo Regular", "url(/fonts/cairo-regular.ttf"),
     item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf"),
     item.json(`/${locale}/${surahId}/surah.json`, { className: "surah" }),
     ...recitations.map((recitation: Quran.Recitation) => {

src/js/pages/SurahStream.tsx

@@ -39,6 +39,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
   );
   const readyToRender = stream.length > 0;
   const ayah = stream[stream.length - 1];
+  const hasCompactLayout = ["ar"].includes(locale);
   const onLanguageChange = (o: SelectOption) => {
     const locale = o.value;
     const params = [["paused", isPaused ? "t" : null]];
@@ -63,11 +64,14 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
           </a>
           <div className="row dropdown-row">
             <ThemeSelect theme={theme} setTheme={setTheme} />
+            {hasCompactLayout && (
+              <span className="surah-name">{surah.localizedName}</span>
+            )}
             <LanguageSelect locale={locale} onChange={onLanguageChange} />
           </div>
         </>
       )}
-      {readyToRender && (
+      {readyToRender && !hasCompactLayout && (
         <div className="row details">
           <span lang={locale}>{surah.localizedName}</span>
           <span lang="en">{surah.transliteratedName}</span>