Biggest UI change in a while

src/css/_base.scss

@@ -18,7 +18,7 @@ html {
       direction: ltr;
     }
     .rtl {
-      font-family: 'Arial', 'Tahoma', sans-serif;
+      font-family: "Cairo Regular", "Arial", "Tahoma", sans-serif;
       direction: rtl;
     }
     .invisible, .hidden {
@@ -33,6 +33,15 @@ html {
     .border-black {
       border: 1px $black solid;
     }
+    .font-cairo {
+      font-family: "Cairo Regular";
+    }
+    .font-cairo-bold {
+      font-family: "Cairo Bold";
+    }
+    .font-amiri {
+      font-family: "Amiri Quran Regular";
+    }
   }
 }
 
@@ -46,4 +55,13 @@ body .root .content.theme {
  * RTL languages
  */
 body .root .content.theme.rtl {
+  header a[data-testid="h1"] {
+    font-family: "Cairo Bold";
+  }
+}
+
+html[dir="rtl"] {
+  .font-extrabold {
+    font-family: "Cairo Bold" !important;
+  }
 }

src/css/main/SurahIndex.scss

@@ -4,16 +4,6 @@
 
 body .root .content.theme {
   @import "base/colors";
-
-  ul.body.index[lang="ar"] {
-    li a {
-      span:last-child {
-        font-family: "Amiri Quran Regular";
-        color: $black;
-      }
-    }
-  }
-
   ul.body.index {
     @media (max-width: $breakpoint-sm) {
       li, li a {

src/css/themes/blue/main/_SurahIndex.scss

@@ -4,10 +4,7 @@
 
   ul.body.index {
     li.surah a {
-      &:active, &:link, &:visited {
+      color: $black;
-        color: $primary-color;
-      }
-
       span.id {
         color: $secondary-color;
       }
@@ -17,7 +14,7 @@
   footer {
     a {
       &:active, &:link, &:visited {
-        color: $primary-color;
+        color: $black;
         text-decoration: none;
       }
       &:hover {
@@ -25,6 +22,7 @@
       }
     }
     input {
+      color: $black;
       border: 1px solid $secondary-color;
       &:focus {
         outline-color: $secondary-color;
@@ -47,10 +45,8 @@
   ul.body.index  {
     li.surah a {
       span.id {
-        color: $secondary-color;
+        background: $secondary-color;
-      }
+        color: $white;
-      span.name {
-        color: $primary-color;
       }
     }
   }

src/css/themes/green/main/_SurahIndex.scss

@@ -3,21 +3,20 @@
   @import "themes/green/base/colors";
 
   ul.body.index a {
-    &:active, &:link, &:visited {
+    color: $black;
-      color: $primary-color;
-    }
   }
 
   footer {
     a {
       &:active, &:link, &:visited {
-        color: $primary-color;
+        color: $black;
       }
       &:hover {
         font-weight: bold;
       }
     }
     input {
+      color: $black;
       border: 1px solid $primary-color;
       &:focus {
         outline-color: $primary-color;

src/js/components/SurahIndex/index.tsx

@@ -16,7 +16,6 @@ export function SurahIndex({ locale, surahs, t }: Props) {
   const [theme, setTheme] = useTheme();
   const [index, setIndex] = useState<Surah[]>(surahs);
   const ref = useRef<HTMLDivElement>(null);
-  const isArabic = locale.name === "ar";
 
   useEffect(() => {
     const div = ref.current;
@@ -63,9 +62,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
                   {formatNumber(locale, surah.id)}
                 </span>
               )}
-              <span className={classNames({ "text-2xl": isArabic })}>
+              <span>{surah.name}</span>
-                {surah.name}
-              </span>
               {locale.direction === "ltr" && (
                 <div className="flex justify-end grow pr-3">
                   <div className="flex flex-col">

src/js/components/SurahStream/Stream.tsx

@@ -61,8 +61,7 @@ export function Stream({
                 />
                 <span
                   className={classNames({
-                    "background-primary color-white pr-3 pl-3 rounded border-black":
+                    "background-primary color-white pr-3 pl-3 rounded border-black": isRTL,
-                      isRTL,
                   })}
                 >
                   {t(locale, "surah")} {formatNumber(locale, surah.id)}

src/js/loaders/SurahIndexLoader.ts

@@ -20,8 +20,19 @@ import { formatNumber } from "~/lib/t";
   postman(
     item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
     item.script(`/js/main/surah-index.js?v=${rev}`, { id: "1" }),
-    item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf)"),
+    item.font(
-    item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
+      "Cairo Regular",
+      "url(/fonts/cairo-regular.ttf) format('truetype')",
+    ),
+    item.font("Cairo Bold", "url(/fonts/cairo-bold.ttf) format('truetype')"),
+    item.font(
+      "Amiri Quran Regular",
+      "url(/fonts/amiri-quran-regular.ttf) format('truetype')",
+    ),
+    item.font(
+      "Kanit Regular",
+      "url(/fonts/kanit-regular.ttf) format('truetype')",
+    ),
     item.progress((percent: number) => {
       progressBar.value = percent;
       progressNumber.innerText = formatNumber(

src/js/loaders/SurahStreamLoader.ts

@@ -21,8 +21,19 @@ import { formatNumber } from "~/lib/t";
   postman(
     item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
     item.script(`/js/main/surah-stream.js?v=${rev}`, { id: "1" }),
-    item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
+    item.font(
-    item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf)"),
+      "Cairo Regular",
+      "url(/fonts/cairo-regular.ttf) format('truetype')",
+    ),
+    item.font("Cairo Bold", "url(/fonts/cairo-bold.ttf) format('truetype')"),
+    item.font(
+      "Amiri Quran Regular",
+      "url(/fonts/amiri-quran-regular.ttf) format('truetype')",
+    ),
+    item.font(
+      "Kanit Regular",
+      "url(/fonts/kanit-regular.ttf) format('truetype')",
+    ),
     /* eslint-disable */
     item.json(`/json/${doc.lang}/${surahId}/info.json?v=${rev}`, { className: "json surahinfo" }),
     item.json(`/json/${doc.lang}/${surahId}/surah.json?v=${rev}`, { className: "json surah" }),