Revisit ThemeSelect.tsx

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

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;
     }
   }
 

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);

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>
   );

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>
         );
       })}

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>

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);