From ebd4bb36ca0636cfd16a86ceb9391e965a1bb074 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Sun, 13 Oct 2024 10:57:30 -0300
Subject: [PATCH] Revisit ThemeSelect.tsx

---
 share/al-quran.reflectslight.io/CHANGELOG.txt | 6 ++++++
 src/css/base/_select.scss                     | 8 ++++----
 src/js/components/AudioControl.tsx            | 6 ++++--
 src/js/components/Select/Option.tsx           | 3 ++-
 src/js/components/Select/ThemeSelect.tsx      | 4 ++--
 src/js/components/Select/index.tsx            | 7 ++++++-
 src/js/main/vendor.ts                         | 3 ++-
 7 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/share/al-quran.reflectslight.io/CHANGELOG.txt b/share/al-quran.reflectslight.io/CHANGELOG.txt
index b25d466..2f135b7 100644
--- a/share/al-quran.reflectslight.io/CHANGELOG.txt
+++ b/share/al-quran.reflectslight.io/CHANGELOG.txt
@@ -2,6 +2,12 @@
 
 * vNEXT
 
+** Revisit ~ThemeSelect.tsx~ for touch devices
+On touch devices it is now easier to change themes thanks to
+a container that has a larger height and width than the theme
+icon it contains. Along with this change, the theme icons have
+become larger and less circular
+
 ** Reduce default width
 The look and feel of the website has changed to be more like
 a book that could fit in the palm of your hand
diff --git a/src/css/base/_select.scss b/src/css/base/_select.scss
index 0510d32..c6fd146 100644
--- a/src/css/base/_select.scss
+++ b/src/css/base/_select.scss
@@ -13,12 +13,12 @@
   }
 
   .react-select.theme-select {
+    ul li,
+    ul li a {
+      -webkit-tap-highlight-color: transparent;
+    }
     .circle {
-      width: 16px;
-      height: 16px;
-      border-radius: 12px;
       background: var(--primary-color);
-      border-radius: 10px;
     }
   }
 
diff --git a/src/js/components/AudioControl.tsx b/src/js/components/AudioControl.tsx
index e5719d5..a171028 100644
--- a/src/js/components/AudioControl.tsx
+++ b/src/js/components/AudioControl.tsx
@@ -32,7 +32,9 @@ export function AudioControl({
       return;
     }
     if (enabled) {
-      audio.src = [audioBaseUrl, surah.id, `${ayah.id}.mp3?v=${commitId}`].join("/");
+      audio.src = [audioBaseUrl, surah.id, `${ayah.id}.mp3?v=${commitId}`].join(
+        "/",
+      );
       play(audio);
     }
   }, [hidden, enabled, ayah?.id, audioBaseUrl]);
@@ -42,7 +44,7 @@ export function AudioControl({
       "[data-audio-base-url]",
     );
     const url = el?.dataset?.audioBaseUrl;
-    const commit = el?.dataset?.commitId
+    const commit = el?.dataset?.commitId;
     if (url?.length) {
       setAudioBaseUrl(url);
       setCommitId(commit);
diff --git a/src/js/components/Select/Option.tsx b/src/js/components/Select/Option.tsx
index 5f9fa27..e6036b8 100644
--- a/src/js/components/Select/Option.tsx
+++ b/src/js/components/Select/Option.tsx
@@ -9,8 +9,9 @@ type Props = {
 };
 
 export function Option({ children, href, className, onClick }: Props) {
+  const ref = createRef();
   return (
-    <a href={href} className={className} onClick={onClick}>
+    <a href={href} className={className} onClick={onClick} ref={ref}>
       {children as string}
     </a>
   );
diff --git a/src/js/components/Select/ThemeSelect.tsx b/src/js/components/Select/ThemeSelect.tsx
index ef70e8d..c12e6b0 100644
--- a/src/js/components/Select/ThemeSelect.tsx
+++ b/src/js/components/Select/ThemeSelect.tsx
@@ -15,10 +15,10 @@ export function ThemeSelect({ theme, setTheme }: Props) {
           <Select.Option
             key={i}
             onClick={() => setTheme(t)}
-            className={classNames("block circle mb-1", t)}
+            className="flex justify-end w-10 h-6"
             value={t}
           >
-            <span className="block w-full h-full" />
+            <span className={classNames("rounded w-5 h-5", t)} />
           </Select.Option>
         );
       })}
diff --git a/src/js/components/Select/index.tsx b/src/js/components/Select/index.tsx
index b5d4ad0..336e6b4 100644
--- a/src/js/components/Select/index.tsx
+++ b/src/js/components/Select/index.tsx
@@ -37,7 +37,12 @@ function Select({ value, children: options, className }: Props) {
             <li
               key={key}
               className={classNames({ hidden: isHidden })}
-              onClick={(e) => [e.stopPropagation(), setOpen(!isOpen)]}
+              onClick={(e) => {
+                e.stopPropagation();
+                const { ref } = n.props;
+                setOpen(!isOpen);
+                ref.current?.click();
+              }}
             >
               {n}
             </li>
diff --git a/src/js/main/vendor.ts b/src/js/main/vendor.ts
index 89cabbe..7f74ea9 100644
--- a/src/js/main/vendor.ts
+++ b/src/js/main/vendor.ts
@@ -1,4 +1,4 @@
-import { render } from "preact";
+import { render, createRef } from "preact";
 import { useState, useEffect, useMemo, useRef } from "preact/hooks";
 import * as React from "preact/compat";
 import classNames from "classnames";
@@ -10,6 +10,7 @@ const exports = {
   useEffect,
   useMemo,
   useRef,
+  createRef,
   classNames,
 };
 Object.assign(window, exports);