Update SurahStream.{tsx,css}, SurahIndex.tsx

src/css/_layout.scss

@@ -2,7 +2,7 @@ $black: #454545;
 $max-width: 1024px;
 
 * {
-  line-height: 1.5;
+  line-height: 1;
 }
 
 html[lang="en"] {

src/css/components/Icon.scss

@@ -66,11 +66,10 @@
   }
 }
 
-.content.theme ul.stream span.title {
+.content.theme ul.stream span {
   .sound-on.icon, .sound-off.icon {
     width: 24px;
     height: 24px;
-    transform: translate(0, 4px);
   }
 }
 

src/css/pages/SurahStream.scss

@@ -6,6 +6,14 @@ body .root .content.theme {
   ul.body.stream {
     scrollbar-gutter: stable;
     li.ayah.fade {
+      .sound-on.icon, .sound-off.icon {
+        width: 24px;
+        height: 24px;
+        g {
+          transform: translate(0, 12px);
+        }
+      }
+
       @keyframes FadeIn {
         0% { opacity: 0;}
         25% { opacity: 0.25; }
@@ -28,7 +36,6 @@ body .root .content.theme {
 body .root .content.theme.en {
   ul.body.stream {
     .sound-off.icon, .sound-on.icon {
-      transform: translate(0, 10px);
     }
   }
 }
@@ -48,12 +55,8 @@ body .root .content.theme.ar {
 
   ul.body.stream {
     li.ayah {
-      .title {
-        display: block;
-        margin-bottom: 5px;
-      }
       .sound-off.icon, .sound-on.icon {
-        transform: rotate(180deg) translate(0, -4px);
+        transform: rotate(180deg);
       }
     }
   }

src/js/components/Head.tsx

@@ -3,33 +3,27 @@ import type { ReactNode } from "react";
 import { ThemeSelect } from "~/components/ThemeSelect";
 import { LanguageSelect } from "~/components/LanguageSelect";
 import * as Quran from "~/lib/Quran";
-import classNames from "classnames";
 import { Theme } from "~/hooks/useTheme";
 
 type Props = {
   locale: Quran.Locale;
   theme: string;
   setTheme: (t: Theme) => void;
-  children: ReactNode
+  children: ReactNode;
 };
 
-export function Head({locale, theme, setTheme, children}: Props) {
+export function Head({ locale, theme, setTheme, children }: Props) {
   return (
-    <header
-      className={classNames("flex flex-col", {
-        "h-20": locale !== "ar",
-        "h-24": locale === "ar",
-        })}
-      >
-        <h1 className="flex justify-center p-0 m-0 mt-2">
-          <a className="no-underline" href={`/${locale}/`}>
-            {children}
-          </a>
-        </h1>
-        <nav className="flex flex-row justify-between">
-          <LanguageSelect locale={locale} />
-          <ThemeSelect theme={theme} setTheme={setTheme} />
-        </nav>
+    <header className="flex flex-col h-18 mt-4 mb-4">
+      <h1 className="flex justify-center p-0 m-0">
+        <a className="no-underline" href={`/${locale}/`}>
+          {children}
+        </a>
+      </h1>
+      <nav className="flex flex-row justify-between">
+        <LanguageSelect locale={locale} />
+        <ThemeSelect theme={theme} setTheme={setTheme} />
+      </nav>
     </header>
-  )
+  );
 }

src/js/components/LanguageSelect.tsx

@@ -3,7 +3,7 @@ import { Select } from "~/components/Select";
 
 type Props = {
   locale: string;
-}
+};
 
 export function LanguageSelect({ locale }: Props) {
   return (
@@ -15,7 +15,7 @@ export function LanguageSelect({ locale }: Props) {
         const content = document.querySelector(".content.theme");
         const path = location.pathname.replace(
           new RegExp(`^/${locale}/`),
-          `/${newLocale}/`
+          `/${newLocale}/`,
         );
         content.classList.add("invisible");
         location.replace(path);

src/js/components/Stream.tsx

@@ -26,6 +26,8 @@ export function Stream({
   const className = endOfStream || isPaused ? ["scroll-y"] : [];
   const ref = useRef<HTMLUListElement>();
   const ul = useMemo<JSX.Element>(() => {
+    const ltr = locale === "en";
+    const rtl = locale === "ar";
     return (
       <ul
         lang={locale}
@@ -37,8 +39,13 @@ export function Stream({
       >
         {stream.map((ayah: Quran.Ayah) => {
           return (
-            <li key={ayah.id} className="ayah fade">
-              <span className="title">
+            <li
+              key={ayah.id}
+              className={classNames("ayah fade", { "mb-6": rtl, "mb-4": ltr })}
+            >
+              <span
+                className={classNames("flex h-8 items-center", { "mb-2": rtl })}
+              >
                 {(isPaused || endOfStream) && (
                   <AudioControl
                     recitation={recitation}
@@ -54,7 +61,7 @@ export function Stream({
                   {formatNumber(surah.ayat.length, locale)}
                 </span>
               </span>
-              <p className="m-0 mb-3">{ayah.text}</p>
+              <p className="m-0">{ayah.text}</p>
             </li>
           );
         })}

src/js/components/SurahIndex.tsx

@@ -34,7 +34,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
         locale,
       )}
     >
-      <Head locale={locale} theme={theme} setTheme={setTheme} >
+      <Head locale={locale} theme={theme} setTheme={setTheme}>
         {t(locale, "TheNobleQuran")}
       </Head>
       <ul className="body index scroll-y list-none p-0 m-0 h-5/6">