Merge pull request #38 from Muhammed-Rahif/hotfix/dark-toggle

Muhammed-Rahif · Mar 30, 2023 · 76651ed · 76651ed
2 parents 2536328 + 89a2ba8
commit 76651ed
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 49 deletions.
diff --git a/git-conventional-commits.yaml b/git-conventional-commits.yaml
@@ -43,6 +43,7 @@ convention:
       "atom-state",
       "community",
       "deps",
+      "ionic",
     ]
   releaseTagGlobPattern: v[0-9]*.[0-9]*.[0-9]*
 changelog:

diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
     "@capacitor/ios": "4.7.1",
     "@capacitor/keyboard": "4.1.1",
     "@capacitor/status-bar": "4.1.1",
-    "@ionic/react": "^6.7.0",
-    "@ionic/react-router": "^6.7.0",
+    "@ionic/react": "^7.0.0",
+    "@ionic/react-router": "^7.0.0",
     "@tanstack/react-query": "^4.27.0",
     "@tanstack/react-query-devtools": "^4.27.0",
     "@testing-library/jest-dom": "^5.11.9",

diff --git a/src/components/AppTypeahead.tsx b/src/components/AppTypeahead.tsx
@@ -135,8 +135,12 @@ function AppTypeahead(props: TypeaheadProps) {
             data={filteredItems}
             itemContent={(index, { text, value }) => (
               <IonItem key={value}>
-                <IonLabel className="capitalize !text-sm">{text}</IonLabel>
+                <IonLabel className="capitalize !text-sm !whitespace-normal">
+                  {text}
+                </IonLabel>
                 <IonCheckbox
+                  className="w-min"
+                  aria-label={text}
                   value={value}
                   checked={isChecked(value)}
                   onIonChange={checkboxChange}

diff --git a/src/features/settings/components/GeneralSettings.tsx b/src/features/settings/components/GeneralSettings.tsx
@@ -1,12 +1,6 @@
-import {
-  IonItemDivider,
-  IonItemGroup,
-  IonSelect,
-  IonSelectOption,
-  IonText,
-} from '@ionic/react';
+import { IonItemDivider, IonItemGroup, IonText, IonToggle } from '@ionic/react';
 import { useAtom } from 'jotai/react';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { settingsAtom, SettingsType } from 'stores/settings';
 
 const GeneralSettings: React.FC = () => {
@@ -30,22 +24,18 @@ const GeneralSettings: React.FC = () => {
       <h2 className="text-xl font-bold mb-2">General</h2>
       <div className="flex justify-between items-center h-9">
         <IonText>
-          <h2 className="text-base">Theme</h2>
+          <h2 className="text-base">Dark mode</h2>
         </IonText>
-        <IonSelect
-          interface="popover"
-          placeholder="Select theme"
-          className="py-0"
-          value={settings.general.theme}
+        <IonToggle
+          aria-label="Dark mode"
+          checked={settings.general.theme === 'dark'}
           onIonChange={(e) =>
             updateGeneralSettings({
-              theme: e.detail.value,
+              theme: e.detail.checked ? 'dark' : 'light',
             })
           }
-        >
-          <IonSelectOption value="dark">Dark</IonSelectOption>
-          <IonSelectOption value="light">Light</IonSelectOption>
-        </IonSelect>
+          className="py-0"
+        ></IonToggle>
       </div>
       <IonItemDivider className="min-h-[2px] my-2" />
     </IonItemGroup>

diff --git a/src/features/settings/components/QuranSettings.tsx b/src/features/settings/components/QuranSettings.tsx
@@ -88,7 +88,8 @@ const QuranSettings: React.FC = () => {
         <IonSelect
           interface="popover"
           placeholder="Select font size"
-          className="py-0"
+          aria-label="Select font size"
+          className="py-0 w-min"
           value={settings?.quran.fontSize}
           onIonChange={(e) => {
             updateQuranSettings({
@@ -112,7 +113,8 @@ const QuranSettings: React.FC = () => {
         <IonSelect
           interface="alert"
           placeholder="Select font family"
-          className="py-0 capitalize"
+          aria-label="Select font family"
+          className="py-0 capitalize w-min"
           value={settings?.quran.fontFamily}
           onIonChange={(e) => {
             updateQuranSettings({

diff --git a/src/screens/Quran.tsx b/src/screens/Quran.tsx
@@ -26,7 +26,7 @@ const Quran: React.FC = () => {
       </IonHeader>
       <IonContent ref={contentRef} fullscreen scrollY={false}>
         <IonSearchbar
-          onIonChange={(e) => setSearch(e.detail.value!)}
+          onIonInput={(e) => setSearch(e.detail.value!)}
           className="sticky top-0 z-30"
           color="light"
         />

diff --git a/yarn.lock b/yarn.lock
@@ -1251,30 +1251,30 @@
     debug "^4.0.0"
     tslib "^2.0.1"
 
-"@ionic/core@6.7.0":
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/@ionic/core/-/core-6.7.0.tgz#9972c27b15c611a67fb321883038b6538f65fc6b"
-  integrity sha512-PAwqiH3daFN9R70EoIyX0UJ3Aa6MA8BWqU6x2IKiomyutvQkNvBO15zaAQrlH9XXeaDu9GzjC2qn7Jjzf5POQw==
+"@ionic/core@7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@ionic/core/-/core-7.0.0.tgz#a38ba73e10caf4fc31b97008e1adf20956cb9cc3"
+  integrity sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==
   dependencies:
-    "@stencil/core" "^2.18.0"
-    ionicons "^6.1.3"
+    "@stencil/core" "^3.1.0"
+    ionicons "^7.1.0"
     tslib "^2.1.0"
 
-"@ionic/react-router@^6.7.0":
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/@ionic/react-router/-/react-router-6.7.0.tgz#5614e433eb5f3670c7d461b4a9c0785091c0dc2d"
-  integrity sha512-QUm24h9Ja3JWj7Dwz8LBCwQSsL2phNXN/DY7KDA1jZICJBJHTDtgMqLTR1qLgXqMCwOWbKUJaeXEP+Z018T77Q==
+"@ionic/react-router@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@ionic/react-router/-/react-router-7.0.0.tgz#95312875a8dcb229819732c8bc71bff2c2558e0c"
+  integrity sha512-rlYWI9Rh8lk3STZ38J7AGx0wnCHYpLg7Ocoxjsvxyuif5PEqQlzZyu0UN9IWVyEMctZEZ2cN0CLayBVaOCMYuA==
   dependencies:
-    "@ionic/react" "6.7.0"
+    "@ionic/react" "7.0.0"
     tslib "*"
 
-"@ionic/react@6.7.0", "@ionic/react@^6.7.0":
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/@ionic/react/-/react-6.7.0.tgz#5a35689e7c70f0da4be310bde108d5f8548b9bf4"
-  integrity sha512-UpSNO4F3Mw0+T0liz/2fdEciPZXOvnqurZYfT5yUjY6iOzKfrWQ5eEYv9WfUONE8UfJiWeoBnGhAHSS7Cu2yhA==
+"@ionic/[email protected].0", "@ionic/react@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@ionic/react/-/react-7.0.0.tgz#35abdaab505fd01e1f2fd03a81d273cc10b11d81"
+  integrity sha512-t9NlHZTiH/NvT3GLcO4yS5Whe9stpsZ9AtNOYS+aPcKM5vhxJSFGXDUvKtABOLi2CniW2kFE8krHwjz9V0GQYA==
   dependencies:
-    "@ionic/core" "6.7.0"
-    ionicons "^6.1.3"
+    "@ionic/core" "7.0.0"
+    ionicons "^7.0.0"
     tslib "*"
 
 "@ionic/[email protected]", "@ionic/utils-array@^2.1.5":
@@ -2103,6 +2103,11 @@
   resolved "https://registry.yarnpkg.com/@stencil/core/-/core-2.22.3.tgz#83987e20bba855c450f6d6780e3a20192603f13f"
   integrity sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==
 
+"@stencil/core@^3.1.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@stencil/core/-/core-3.2.0.tgz#be869b68bbe588d33fe3109c5aea08fda6de761e"
+  integrity sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ==
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -5518,20 +5523,20 @@ into-stream@^6.0.0:
     from2 "^2.3.0"
     p-is-promise "^3.0.0"
 
-ionicons@^6.1.3:
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/ionicons/-/ionicons-6.1.3.tgz#32ce7dd0ed00bb71a9df612501745ad0d2e5d2df"
-  integrity sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==
-  dependencies:
-    "@stencil/core" "^2.18.0"
-
 ionicons@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/ionicons/-/ionicons-7.0.0.tgz#7597e4954a00facac928809cde162d80d3d9427d"
   integrity sha512-5G9gBxaUfJm0aAr/Kg5Eb/d7d+pMC65yiHjlkGATLrHSZgAzlc9l6ho0dCSdfq3wGef2QiZeNsvyChPVggfXwQ==
   dependencies:
     "@stencil/core" "^2.18.0"
 
+ionicons@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/ionicons/-/ionicons-7.1.0.tgz#25daa91345acedcb0f4fb7da670f5aff2e1f266a"
+  integrity sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==
+  dependencies:
+    "@stencil/core" "^2.18.0"
+
 ip-regex@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-4.3.0.tgz#687275ab0f57fa76978ff8f4dddc8a23d5990db5"