diff --git a/share/al-quran.reflectslight.io/CHANGELOG.txt b/share/al-quran.reflectslight.io/CHANGELOG.txt
index b25d4661a..2f135b75b 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 0510d3239..c6fd14696 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 e5719d5c7..a1710284e 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 5f9fa2734..e6036b81a 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 (
-
+
{children as string}
);
diff --git a/src/js/components/Select/ThemeSelect.tsx b/src/js/components/Select/ThemeSelect.tsx
index ef70e8df3..c12e6b096 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) {