Merge pull request #864 from tutors-sdk/fix/theme-lookup

change icon lookup strategy
tutors-sdk · Nov 27, 2024 · 8577fdd · 8577fdd
2 parents 75102c3 + 6ad0863
commit 8577fdd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 40 deletions.
diff --git a/src/lib/ui/themes/LayoutMenu.svelte b/src/lib/ui/themes/LayoutMenu.svelte
@@ -45,7 +45,7 @@
   <h6>Themes</h6>
   <ul class="list">
     {#each themes as theme}
-      <MenuItem type="lightMode" text={theme} onClick={() => changeTheme(theme)} />
+      <MenuItem type="lightMode" text={theme.name} onClick={() => changeTheme(theme.name)} />
     {/each}
   </ul>
 {/snippet}

diff --git a/src/lib/ui/themes/icons/fluent-icons.ts b/src/lib/ui/themes/icons/fluent-icons.ts
@@ -58,6 +58,5 @@ export const FluentIconLib = {
   edit: { type: "typcn:edit", color: "primary" },
   info: { type: "fluent:info-28-regular", color: "primary" },
   close: { type: "fluent:add-square-32-regular", color: "primary" },
-
   default: { type: "fluent:re-order-dots-vertical-24-filled", color: "error" }
 };
diff --git a/src/lib/ui/themes/styles/icon-lib.svelte.ts b/src/lib/ui/themes/styles/icon-lib.svelte.ts
@@ -4,37 +4,22 @@ import type { IconType } from "$lib/services/models/lo-types";
 import { FluentIconLib } from "../icons/fluent-icons";
 import { HeroIconLib } from "../icons/hero-icons";
 
-let StandardIconLib: { [key: string]: IconType } = FluentIconLib;
 export const themes = [
-  "tutors",
-  "classic",
-  "dyslexia",
-  "nouveau",
-  "concord",
-  "nosh",
-  "rose",
-  "vintage",
-  "seafoam",
-  "wintry",
-  "fennec",
-  "mona",
-  "cerberus"
+  { name: "tutors", icons: FluentIconLib },
+  { name: "classic", icons: FluentIconLib },
+  { name: "dyslexia", icons: FluentIconLib },
+  { name: "nouveau", icons: FluentIconLib },
+  { name: "concord", icons: FluentIconLib },
+  { name: "nosh", icons: FluentIconLib },
+  { name: "rose", icons: FluentIconLib },
+  { name: "vintage", icons: FluentIconLib },
+  { name: "seafoam", icons: FluentIconLib },
+  { name: "wintry", icons: FluentIconLib },
+  { name: "fennec", iconExists: FluentIconLib },
+  { name: "mona", icons: FluentIconLib },
+  { name: "cerberus", icons: FluentIconLib }
 ];
 
-export const themeIcons = {
-  tutors: FluentIconLib,
-  classic: FluentIconLib,
-  dyslexia: FluentIconLib,
-  nouveau: FluentIconLib,
-  concord: FluentIconLib,
-  vintage: FluentIconLib,
-  seafoam: FluentIconLib,
-  wintry: FluentIconLib,
-  fennec: FluentIconLib,
-  mona: FluentIconLib,
-  cerberus: HeroIconLib
-};
-
 export function setDisplayMode(mode: string): void {
   if (!mode) {
     mode = "light";
@@ -52,22 +37,22 @@ export function setTheme(theme: string): void {
   if (!theme) {
     theme = "tutors";
   }
-  currentTheme.value = theme;
+  if (themes.find((theme) => theme.name === currentTheme.value)) {
+    currentTheme.value = theme;
+  } else {
+    currentTheme.value = "tutors";
+  }
   document.body.setAttribute("data-theme", currentTheme.value);
   localStorage.theme = currentTheme.value;
-  setIconLibForTheme(currentTheme.value);
-}
-
-export function setIconLibForTheme(theme: string) {
-  StandardIconLib = themeIcons[currentTheme.value];
 }
 
 export function getIcon(type: string): IconType {
-  if (StandardIconLib[type]) {
-    return StandardIconLib[type];
+  const iconLib = themes.find((theme) => theme.name === currentTheme.value)?.icons;
+  if (iconLib && iconLib[type]) {
+    return iconLib[type];
   } else {
     console.log("No type found for icon", type);
-    return StandardIconLib.tutors;
+    return FluentIconLib.tutors;
   }
 }
 
@@ -77,5 +62,9 @@ export function addIcon(type: string, icon: IconType) {
 }
 
 export function getTypeColour(type: string): string {
-  return StandardIconLib[type].color;
+  const iconLib = themes.find((theme) => theme.name === currentTheme.value)?.icons;
+  if (iconLib && iconLib[type]) {
+    return iconLib[type].color;
+  }
+  return "primary";
 }