Update UI for surah's name (ar locale)

ReflectsLight · Oct 23, 2023 · 84cdd13 · 84cdd13
1 parent 05b4abb
commit 84cdd13
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 39 deletions.
diff --git a/src/css/pages/SurahStream.scss b/src/css/pages/SurahStream.scss
@@ -64,28 +64,21 @@
 .content.theme.en {}
 
 .content.theme.ar {
-  .row.details  {
-    display: none;
-    place-content: flex-end;
-  }
-
-  .row.dropdown-row {
-    span.surah-name {
-      position: relative;
-      left: 20px;
-      top: 12px;
+  .row.details {
+    justify-content: flex-end;
+    .localized-name {
       display: flex;
       flex-direction: column;
       width: 180px;
-      font-size: xx-large;
-      align-items: center;
+      font-size: x-large;
+      align-items: flex-end;
       line-height: 30px;
       height: 30px;
+      margin-top: 10px;
+    }
+    .transliterated-name {
+      display: none;
     }
-  }
-
-  .row.details {
-    display: none;
   }
 
   ul.body.stream {

diff --git a/src/css/themes/blue/pages/_SurahStream.scss b/src/css/themes/blue/pages/_SurahStream.scss
@@ -21,11 +21,4 @@
 
 .root .content.theme.blue.ar {
   @import "themes/blue/colors";
-
-  .row.dropdown-row {
-    line-height: 30px;
-    span.surah-name {
-      color: lighten($gold1, 25%);
-    }
-  }
 }
diff --git a/src/css/themes/green/pages/_SurahStream.scss b/src/css/themes/green/pages/_SurahStream.scss
@@ -34,13 +34,4 @@
 
 .root .content.theme.green.ar {
   @import "themes/green/colors";
-
-  .row.dropdown-row {
-    .surah-name {
-      color: lighten($green1, 15%);
-    }
-  }
-
-  ul.body.stream {
-  }
 }
diff --git a/src/js/pages/SurahStream.tsx b/src/js/pages/SurahStream.tsx
@@ -39,7 +39,6 @@ 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 ref = useRef<HTMLDivElement>();
 
   useEffect(() => {
@@ -63,17 +62,18 @@ 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} path={surah.slug} />
           </div>
         </>
       )}
-      {readyToRender && !hasCompactLayout && (
+      {readyToRender && (
         <div className="row details">
-          <span lang={locale}>{surah.localizedName}</span>
-          <span lang="en">{surah.transliteratedName}</span>
+          <span className="localized-name" lang={locale}>
+            {surah.localizedName}
+          </span>
+          <span className="transliterated-name" lang="en">
+            {surah.transliteratedName}
+          </span>
         </div>
       )}
       {readyToRender && (