From ec399f0131a9fcc31ee59c6a89d6852f066141ef Mon Sep 17 00:00:00 2001
From: Marwan Ansari <8071158+marwan@users.noreply.github.com>
Date: Fri, 15 Mar 2024 20:35:43 +0530
Subject: [PATCH] minor code refactoring

---
 src/components/ui/Navbar.svelte          |  4 ++--
 src/components/verses/VersesWords.svelte | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/Navbar.svelte b/src/components/ui/Navbar.svelte
index 52b6938c..e7cd9573 100644
--- a/src/components/ui/Navbar.svelte
+++ b/src/components/ui/Navbar.svelte
@@ -140,7 +140,7 @@
   <!-- Dropdown menu -->
   <div id="rightMenuDropdown" class="navbar-dropdown z-30 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-slate-800 dark:border-slate-700">
     <ul class="py-2 text-sm text-gray-700 dark:text-slate-400" aria-labelledby="rightMenuDropdownButton">
-      <li class={$currentPageStore === "changelogs" || $currentPageStore === "issues" || $currentPageStore === "about" ? disabledElement : ""}>
+      <li class={$currentPageStore === "changelogs" || $currentPageStore === "issues" || ($currentPageStore === "about" && disabledElement)}>
         <button data-drawer-target="drawer-right" data-drawer-show="drawer-right" data-drawer-placement="right" aria-controls="drawer-right" class={rightMenuDropdownClasses}>Settings</button>
       </li>
       <li>
@@ -161,7 +161,7 @@
       <li class={disabledElement}>
         <button class={rightMenuDropdownClasses}>Chapter Overview</button>
       </li>
-      <li class={$currentPageStore === "changelogs" || $currentPageStore === "issues" || $currentPageStore === "about" ? disabledElement : ""}>
+      <li class={$currentPageStore === "changelogs" || $currentPageStore === "issues" || ($currentPageStore === "about" && disabledElement)}>
         <button on:click={() => toggleModal("InitialSetupModal", "show")} class={rightMenuDropdownClasses}>Initial Setup</button>
       </li>
     </ul>
diff --git a/src/components/verses/VersesWords.svelte b/src/components/verses/VersesWords.svelte
index dac09d94..7c3c9508 100644
--- a/src/components/verses/VersesWords.svelte
+++ b/src/components/verses/VersesWords.svelte
@@ -37,7 +37,7 @@
 {#if displayOptions[`${$displayTypeStore}`].layout === "wbw"}
   {#each { length: value.meta.words } as _, word}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div id={`${chapter}:${verse}:${word + 1}`} on:click={() => wordAudioController({ chapter, verse, word })} class="word {$displayTypeStore === 1 ? 'text-center flex flex-col p-3' : 'inline-flex flex-col p-3'} {wordClasses} {$audioSettingsStore.playingWordKey === `${chapter}:${verse}:${word + 1}` ? 'bg-[#ebebeb]' : ''}" style={$currentPageStore === "supplications" && word + 1 < supplicationsFromQuran[key] ? "opacity: 30%;" : ""} data-timestamp={timestampSplit[word]}>
+    <div id={`${chapter}:${verse}:${word + 1}`} on:click={() => wordAudioController({ chapter, verse, word })} class="word {$displayTypeStore === 1 ? 'text-center flex flex-col p-3' : 'inline-flex flex-col p-3'} {wordClasses} {$audioSettingsStore.playingWordKey === `${chapter}:${verse}:${word + 1}` ? 'bg-[#ebebeb]' : ''}" style={$currentPageStore === "supplications" && word + 1 < supplicationsFromQuran[key] && "opacity: 30%;"} data-timestamp={timestampSplit[word]}>
       <span class={currentLayoutClasses} data-fontSize={fontSizes.arabicText}>
         <!-- 1: Uthmani Hafs, 2: Naskh Nastaleeq IndoPak -->
         {#if $wordTypeStore === 1 || $wordTypeStore === 2}
@@ -47,7 +47,7 @@
           <img class="mx-auto max-h-16 md:max-h-20" alt={arabicSplit[word]} src="{tajweedWordsURL}/{value.meta.chapter}/{value.meta.verse}/{word + 1}.png?v=1" />
           <!-- 4: KFGQPC Tajweed v4 -->
         {:else if $wordTypeStore === 4}
-          <span class="p{value.meta.page} {$websiteThemeStore === 2 ? 'v4dark' : ''}">{arabicSplit[word]}</span>
+          <span class="p{value.meta.page} {$websiteThemeStore === 2 && 'v4dark'}">{arabicSplit[word]}</span>
         {/if}
       </span>
 
@@ -68,7 +68,7 @@
         <img class="mx-auto max-h-16 md:max-h-20" alt={verse} src="{tajweedEndURL}/{verse}.png?v=1" />
         <!-- 4: KFGQPC Tajweed v4 -->
       {:else if $wordTypeStore === 4}
-        <span class="p{value.meta.page} {$websiteThemeStore === 2 ? 'v4dark' : ''}">{value.words.end}</span>
+        <span class="p{value.meta.page} {$websiteThemeStore === 2 && 'v4dark'}">{value.words.end}</span>
       {/if}
     </span>
   </div>
@@ -87,7 +87,7 @@
           <img class="mx-auto max-h-16 md:max-h-20" alt={arabicSplit[word]} src="{tajweedWordsURL}/{value.meta.chapter}/{value.meta.verse}/{word + 1}.png?v=1" />
           <!-- 4: KFGQPC Tajweed v4 -->
         {:else if $wordTypeStore === 4}
-          <span class="p{value.meta.page} {$websiteThemeStore === 2 ? 'v4dark' : ''}">{arabicSplit[word]}</span>
+          <span class="p{value.meta.page} {$websiteThemeStore === 2 && 'v4dark'}">{arabicSplit[word]}</span>
         {/if}
       </span>
     {/each}
@@ -101,7 +101,7 @@
         <img class="mx-auto max-h-16 md:max-h-20" alt={verse} src="{tajweedEndURL}/{verse}.png?v=1" />
         <!-- 4: KFGQPC Tajweed v4 -->
       {:else if $wordTypeStore === 4}
-        <span class="p{value.meta.page} {$websiteThemeStore === 2 ? 'v4dark' : ''}">{value.words.end}</span>
+        <span class="p{value.meta.page} {$websiteThemeStore === 2 && 'v4dark'}">{value.words.end}</span>
       {/if}
     </span>
   </div>