Fix Issue with Checkbox not Updating on AniDB Settings. (#664)

* Fix Issue With Checkbox not Updating on AniDB Settings. * CSS Updates. * Update Check in updateSettings.
ShokoAnime · Oct 29, 2023 · a2fad60 · a2fad60
1 parent bc96d23
commit a2fad60
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 15 deletions.
diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
@@ -517,7 +517,7 @@ export const initialSettings = {
 type ContextType = {
   newSettings: SettingsType;
   setNewSettings: (settings: SettingsType) => void;
-  updateSetting: (type: string, key: string, value: string) => void;
+  updateSetting: (type: string, key: string, value: string | boolean) => void;
 };
 
 function SettingsPage() {
@@ -544,8 +544,8 @@ function SettingsPage() {
     return !isEqual(newSettings, initialSettings);
   }, [newSettings, settings]);
 
-  const updateSetting = (type: string, key: string, value: string) => {
-    if (key === 'theme') {
+  const updateSetting = (type: string, key: string, value: string | boolean) => {
+    if (key === 'theme' && typeof value === 'string') {
       globalThis.localStorage.setItem('theme', value);
     }
 

diff --git a/src/pages/settings/tabs/AniDBSettings.tsx b/src/pages/settings/tabs/AniDBSettings.tsx
@@ -112,7 +112,7 @@ function AniDBSettings() {
             onClick={() => testLogin()}
             loading={testAniDbLoginResult.isLoading}
             buttonType="primary"
-            className="!text-base font-semibold"
+            className="px-4"
           >
             Test
           </Button>
@@ -179,28 +179,28 @@ function AniDBSettings() {
             label="Character Images"
             id="character-images"
             isChecked={DownloadCharacters}
-            onChange={event => updateSetting('AniDb', 'DownloadCharacters', event.target.checked.toString())}
+            onChange={event => updateSetting('AniDb', 'DownloadCharacters', event.target.checked)}
           />
           <Checkbox
             justify
             label="Creator Images"
             id="creator-images"
             isChecked={DownloadCreators}
-            onChange={event => updateSetting('AniDb', 'DownloadCreators', event.target.checked.toString())}
+            onChange={event => updateSetting('AniDb', 'DownloadCreators', event.target.checked)}
           />
           <Checkbox
             justify
             label="Release Groups"
             id="release-groups"
             isChecked={DownloadReleaseGroups}
-            onChange={event => updateSetting('AniDb', 'DownloadReleaseGroups', event.target.checked.toString())}
+            onChange={event => updateSetting('AniDb', 'DownloadReleaseGroups', event.target.checked)}
           />
           <Checkbox
             justify
             label="Related Anime"
             id="related-anime"
             isChecked={DownloadRelatedAnime}
-            onChange={event => updateSetting('AniDb', 'DownloadRelatedAnime', event.target.checked.toString())}
+            onChange={event => updateSetting('AniDb', 'DownloadRelatedAnime', event.target.checked)}
           />
           <div
             className={cx(
@@ -228,35 +228,35 @@ function AniDBSettings() {
             label="Add Files"
             id="add-files"
             isChecked={MyList_AddFiles}
-            onChange={event => updateSetting('AniDb', 'MyList_AddFiles', event.target.checked.toString())}
+            onChange={event => updateSetting('AniDb', 'MyList_AddFiles', event.target.checked)}
           />
           <Checkbox
             justify
             label="Read Watched"
             id="read-watched"
             isChecked={MyList_ReadWatched}
-            onChange={event => updateSetting('AniDb', 'MyList_ReadWatched', event.target.checked.toString())}
+            onChange={event => updateSetting('AniDb', 'MyList_ReadWatched', event.target.checked)}
           />
           <Checkbox
             justify
             label="Read Unwatched"
             id="read-unwatched"
             isChecked={MyList_ReadUnwatched}
-            onChange={event => updateSetting('AniDb', 'MyList_ReadUnwatched', event.target.checked.toString())}
+            onChange={event => updateSetting('AniDb', 'MyList_ReadUnwatched', event.target.checked)}
           />
           <Checkbox
             justify
             label="Set Watched"
             id="set-watched"
             isChecked={MyList_SetWatched}
-            onChange={event => updateSetting('AniDb', 'MyList_SetWatched', event.target.checked.toString())}
+            onChange={event => updateSetting('AniDb', 'MyList_SetWatched', event.target.checked)}
           />
           <Checkbox
             justify
             label="Set Unwatched"
             id="set-unwatched"
             isChecked={MyList_SetUnwatched}
-            onChange={event => updateSetting('AniDb', 'MyList_SetUnwatched', event.target.checked.toString())}
+            onChange={event => updateSetting('AniDb', 'MyList_SetUnwatched', event.target.checked)}
           />
           <div className="flex items-center justify-between">
             <span>Storage State</span>

diff --git a/src/pages/settings/tabs/MetadataSitesSettings.tsx b/src/pages/settings/tabs/MetadataSitesSettings.tsx
@@ -247,7 +247,8 @@ function MetadataSitesSettings() {
                       undefined,
                       { autoClose: 10000 },
                     ), () => {})}
-                className="bg-panel-text-primary px-2 py-1 font-semibold "
+                className="px-4"
+                buttonType="primary"
               >
                 {traktCodeResult.isFetching ? 'Requesting...' : 'Get Code'}
               </Button>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -64,7 +64,7 @@ module.exports = {
         'panel-border': 'var(--panel-border)',
         'panel-icon': 'var(--panel-icon)',
         'panel-icon-action': 'var(--panel-icon-action)',
-        'panel-icon-danger': 'var(--panel-icon-remove)',
+        'panel-icon-danger': 'var(--panel-icon-danger)',
         'panel-icon-important': 'var(--panel-icon-important)',
         'panel-icon-warning': 'var(--panel-icon-warning)',
         'panel-input': 'var(--panel-input)',