Rewrite SurahStream.tsx with tail.css

src/css/_layout.scss

@@ -51,7 +51,7 @@ body .root .content.theme {
   }
 
   .scroll-y {
-    overflow-y: scroll !important;
+    overflow-y: auto !important;
   }
 }
 

src/css/components/Icon.scss

@@ -28,14 +28,14 @@
 .stalled.icon {
   display: inline-block;
   position: relative;
-  left: -34px;
+  left: 30px;
   height: 4px;
 
   div {
     display: inline-block;
     position: absolute;
     left: 8px;
-    width: 6px;
+    width: 5px;
     animation: stalled 0.8s cubic-bezier(0, 0.5, 0.5, 1) infinite;
   }
 
@@ -90,19 +90,3 @@
     }
   }
 }
-
-.root .content.theme.ar {
-  ul.stream span.title {
-    .sound-on.icon, .sound-off.icon {
-      height: 40px;
-      transform: rotate(180deg) translate(0, 3px);
-    }
-  }
-
-  footer {
-    .sound-on.icon, .sound-off.icon {
-      transform: rotate(180deg);
-      g {transform: translate(32px, 0); }
-    }
-  }
-}

src/css/pages/SurahStream.scss

@@ -3,37 +3,8 @@
 @import "components/Icon";
 
 body .root .content.theme {
-  height: 80%;
-  @media (max-device-height: 968px) { height: 75%; }
-  @media (max-height: 800px) { height: 70%; }
-  @media (max-height: 700px) { height: 65%; }
-  @media (max-height: 600px) { height: 60%; }
-  @media (max-height: 500px) { height: 55%; }
-  @media (max-height: 400px) { height: 45%; }
-  @media (max-height: 330px) { height: 35%; }
-
   ul.body.stream {
     scrollbar-gutter: stable;
-    overflow: hidden;
-
-    li.ayah {
-      padding: 10px 0 10px 0;
-      span.title {
-        display: flex;
-        align-items: center;
-      }
-      .svg.sound-on, .svg.sound-off {
-        cursor: pointer;
-        height: 24px;
-        width: 24px;
-        g { transform: translate(0px, 18px); }
-      }
-      p {
-        width: 100%;
-        margin: 0;
-      }
-    }
-
     li.ayah.fade {
       @keyframes FadeIn {
         0% { opacity: 0;}
@@ -45,41 +16,22 @@ body .root .content.theme {
       animation: FadeIn 1s;
     }
   }
+}
 
-  footer {
-    .timer {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      height: 24px;
-      width: 40px;
-      font-family: "Kanit Regular";
-      text-align: center;
-      font-weight: bold;
-      font-size: large;
-    }
-  }
-}
-
-.content.theme.en {
-  header {
-    nav {
-      height: 30px;
+/* English-specific rules */
+body .root .content.theme.en {
+  ul.body.stream {
+    .sound-off.icon, .sound-on.icon {
+      transform: translate(0, 10px);
     }
   }
 }
 
+/* Arabic-specific rules */
 body .root .content.theme.ar {
   header {
-    nav, div {
-      .localized-name {
-        display: flex;
-        font-size: x-large;
-        justify-content: flex-end;
-        align-items: flex-end;
-        width: 100%;
-        line-height: 1;
-      }
+    .surah-name {
+      flex-direction: row-reverse;
       .transliterated-name {
         display: none;
       }
@@ -87,31 +39,24 @@ body .root .content.theme.ar {
   }
 
   ul.body.stream {
-    li.ayah:first-child {
-      padding: 35px 0 10px 0;
-    }
     li.ayah {
-      padding: 20px 0 10px 0;
-      span.title {
-        font-size: larger;
-        height: 0;
-        font-family: "Mada Regular";
+      .title {
+        display: block;
+        margin-bottom: 5px;
       }
-      p {
-        line-height: 3;
-        font-size: x-large;
-        font-weight: normal;
+      .sound-off.icon, .sound-on.icon {
+        transform: rotate(180deg) translate(0, -4px);
       }
     }
-    padding: 0;
   }
 
   footer {
     .timer {
-      align-items: flex-start;
+      justify-content: flex-start;
     }
   }
 }
 
 @import "themes/blue";
 @import "themes/green";
+@import "vendor/tail";

src/js/components/Icon.tsx

@@ -151,7 +151,7 @@ export function RefreshIcon({ onClick }: Props) {
 
 export function StalledIcon() {
   return (
-    <div className="stalled icon">
+    <div className="stalled icon flex justify-end w-16">
       <div />
       <div />
       <div />

src/js/components/Stream.tsx

@@ -29,7 +29,10 @@ export function Stream({
     return (
       <ul
         lang={locale}
-        className={classNames("body", "stream", ...className)}
+        className={classNames(
+          "body stream scroll-y list-none p-0 h-5/6",
+          ...className,
+        )}
         ref={ref}
       >
         {stream.map((ayah: Quran.Ayah) => {
@@ -51,7 +54,7 @@ export function Stream({
                   {formatNumber(surah.ayat.length, locale)}
                 </span>
               </span>
-              <p>{ayah.text}</p>
+              <p className="m-0 mb-3">{ayah.text}</p>
             </li>
           );
         })}

src/js/components/Timer.tsx

@@ -52,7 +52,7 @@ export function Timer({
   }, [soundOn, isStalled, isPaused, ms]);
 
   return (
-    <div className="timer">
+    <div className="timer w-16 flex justify-end">
       {ms / 1000 <= 0
         ? formatNumber(0, locale)
         : formatNumber(ms / 1000, locale)}

src/js/pages/SurahStream.tsx

@@ -56,18 +56,29 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
   return (
     <article
       ref={ref}
-      className={classNames("invisible", "content", "theme", theme, locale)}
+      className={classNames(
+        "flex flex-col invisible h-full content theme",
+        locale,
+        theme,
+      )}
     >
       {readyToRender && (
-        <header>
-          <h1>
-            <a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
+        <header
+          className={classNames("flex flex-col", {
+            "h-24": locale !== "ar",
+            "h-26": locale === "ar",
+          })}
+        >
+          <h1 className="flex justify-center p-0 mt-2">
+            <a className="no-underline color-primary" href={`/${locale}/`}>
+              {t(locale, "TheNobleQuran")}
+            </a>
           </h1>
-          <nav>
+          <nav className="flex flex-row justify-between">
             <LanguageSelect locale={locale} path={surah.slug} />
             <ThemeSelect theme={theme} setTheme={setTheme} />
           </nav>
-          <div>
+          <div className="flex justify-between surah-name">
             <span className="localized-name" lang={locale}>
               {surah.localizedName}
             </span>
@@ -88,7 +99,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
           t={t}
         />
       )}
-      <footer>
+      <footer className="flex justify-between h-16">
         {readyToRender && isPaused && !endOfStream && (
           <PlayIcon onClick={() => setIsPaused(false)} />
         )}
@@ -106,7 +117,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
             onStall={() => setIsStalled(true)}
           />
         )}
-        {readyToRender && !endOfStream && (
+        {readyToRender && !endOfStream && !isStalled && (
           <Timer
             surah={surah}
             setStream={setStream}
@@ -118,11 +129,10 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
             isStalled={isStalled}
           />
         )}
+        {readyToRender && soundOn && isStalled && <StalledIcon />}
         {readyToRender && endOfStream && (
           <RefreshIcon onClick={() => setStream([])} />
         )}
-        <div className="br" />
-        {readyToRender && soundOn && isStalled && <StalledIcon />}
       </footer>
     </article>
   );