From 45a39b6d251ac879e16f325fc095032c5af6e10b Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Sun, 20 Nov 2022 06:29:30 -0300
Subject: [PATCH] src/css: assign meaningful class names to "span:first-child"

---
 src/css/surah.scss                    | 2 +-
 src/css/themes/leaf.scss              | 2 +-
 src/css/themes/moon.scss              | 2 +-
 src/js/components/TheQuran/Stream.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/css/surah.scss b/src/css/surah.scss
index 8ad8fc55e..a1eead2e2 100644
--- a/src/css/surah.scss
+++ b/src/css/surah.scss
@@ -72,7 +72,7 @@ body {
     overflow: hidden;
 
     li.ayah {
-      span:first-child {
+      span.surah-id.ayah-id {
         display: block;
         font-weight: 500;
       }
diff --git a/src/css/themes/leaf.scss b/src/css/themes/leaf.scss
index 294f38b13..efc94312c 100644
--- a/src/css/themes/leaf.scss
+++ b/src/css/themes/leaf.scss
@@ -11,7 +11,7 @@
 
   ul.stream {
     li.ayah {
-      span:first-child {
+      span.surah-id.ayah-id {
         color: $green;
         background-color: $white;
         font-weight: 500;
diff --git a/src/css/themes/moon.scss b/src/css/themes/moon.scss
index f3bb689b6..82d408fcb 100644
--- a/src/css/themes/moon.scss
+++ b/src/css/themes/moon.scss
@@ -11,7 +11,7 @@
 
   ul.stream {
     li.ayah {
-      span:first-child {
+      span.surah-id.ayah-id {
         color: $gold;
       }
       p { }
diff --git a/src/js/components/TheQuran/Stream.tsx b/src/js/components/TheQuran/Stream.tsx
index ce255ecb8..c60331751 100644
--- a/src/js/components/TheQuran/Stream.tsx
+++ b/src/js/components/TheQuran/Stream.tsx
@@ -12,7 +12,7 @@ export function Stream({ surah, stream }: StreamProps) {
   const ayat = stream.map((ayah: Ayah) => {
     return (
       <li key={ayah.id} className="ayah fade">
-        <span>
+        <span className="surah-id ayah-id">
           Surah {surah.id}, Ayah {ayah.id}
         </span>
         <p>{ayah.text}</p>