From d381ec1522184aa56a7dc69e9f62aa76693ca751 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Sun, 29 Oct 2023 20:10:04 -0300
Subject: [PATCH] Wrap theme / language dropdowns in a <nav> element.

---
 src/css/_layout.scss              | 4 ++--
 src/css/themes/blue/_layout.scss  | 2 +-
 src/css/themes/green/_layout.scss | 2 +-
 src/js/pages/SurahIndex.tsx       | 4 ++--
 src/js/pages/SurahStream.tsx      | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/css/_layout.scss b/src/css/_layout.scss
index ec52bbd..cc98fda 100644
--- a/src/css/_layout.scss
+++ b/src/css/_layout.scss
@@ -43,7 +43,7 @@ body .root .content.theme {
       }
     }
 
-    div {
+    nav {
       display: flex;
       justify-content: space-between;
       min-height: 35px;
@@ -96,7 +96,7 @@ body .root .content.en {
 
 body .root .content.ar {
   header {
-    div {
+    nav, div {
       direction: ltr;
       .localized-name {
         display: flex;
diff --git a/src/css/themes/blue/_layout.scss b/src/css/themes/blue/_layout.scss
index b8a76ac..04c97d4 100644
--- a/src/css/themes/blue/_layout.scss
+++ b/src/css/themes/blue/_layout.scss
@@ -3,7 +3,7 @@
 
   header {
     h1 , h1 a { color: $blue1; }
-    div .react-select {
+    nav .react-select {
       color: $gold1;
     }
   }
diff --git a/src/css/themes/green/_layout.scss b/src/css/themes/green/_layout.scss
index d0721bf..c2fe0b3 100644
--- a/src/css/themes/green/_layout.scss
+++ b/src/css/themes/green/_layout.scss
@@ -4,7 +4,7 @@
   header {
     h1 , h1 a { color: $green1; }
 
-    div .react-select {
+    nav .react-select {
       background-color: transparent;
       color: $green1;
     }
diff --git a/src/js/pages/SurahIndex.tsx b/src/js/pages/SurahIndex.tsx
index 2795452..de7db89 100644
--- a/src/js/pages/SurahIndex.tsx
+++ b/src/js/pages/SurahIndex.tsx
@@ -35,10 +35,10 @@ function SurahIndex({ locale, surahs, t }: Props) {
         <h1>
           <a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
         </h1>
-        <div>
+        <nav>
           <ThemeSelect theme={theme} setTheme={setTheme} />
           <LanguageSelect locale={locale} />
-        </div>
+        </nav>
       </header>
       <ul className="body index scroll-y">
         {surahs.map((surah, key) => (
diff --git a/src/js/pages/SurahStream.tsx b/src/js/pages/SurahStream.tsx
index 123b4ad..4697505 100644
--- a/src/js/pages/SurahStream.tsx
+++ b/src/js/pages/SurahStream.tsx
@@ -63,10 +63,10 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
           <h1>
             <a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
           </h1>
-          <div>
+          <nav>
             <ThemeSelect theme={theme} setTheme={setTheme} />
             <LanguageSelect locale={locale} path={surah.slug} />
-          </div>
+          </nav>
           <div>
             <span className="localized-name" lang={locale}>
               {surah.localizedName}