feat(logo): update svg logos (#128)

* feat(logo): update svg logos

* add `"evenodd"` to `.cspell.json`.

.changes/update-logo.md

@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Update logo to use `.svg` file instead of `.png`.

.cspell.json

@@ -10,6 +10,7 @@
         "covector",
         "dtolnay",
         "emptydirs",
+        "evenodd",
         "farmfe",
         "Gridlines",
         "icns",

src/components/UniversalToolBar.vue

@@ -145,7 +145,7 @@ const toString = (value: any) => {
     <div class="bg-gray-100 dark:bg-zinc-900 flex flex-row items-center justify-between w-full py-3 px-5 flex-wrap"
         :class="{ 'border-b-[1.2px] border-zinc-300 dark:border-zinc-600 shadow-sm': separateBottom ?? true }">
         <div class="inline-flex justify-center items-center">
-            <img @click="router.push('/')" class="cursor-pointer" :src="themeStore.dark ? '/acm-light.png' : '/acm.png'"
+            <img @click="router.push('/')" class="cursor-pointer" :src="themeStore.logo"
                 width="40"></img>
             <Breadcrumb v-if="path?.length" :model="path" class="!bg-transparent !p-0">
                 <template #item="{ item }">

src/scripts/store.ts

@@ -31,7 +31,7 @@ export const useThemeStore = defineStore(
       }
     };
     const icon = computed(() => (dark.value ? "pi pi-moon" : "pi pi-sun"));
-    const logo = computed(() => (dark.value ? "/acm-light.png" : "/acm.png"));
+    const logo = computed(() => (dark.value ? "/algohub-night.svg" : "/algohub-day.svg"));
     return { dark, toggle, init, icon, logo };
   },
   {

src/views/login.vue

@@ -69,7 +69,7 @@ const onLogin = async ({ valid, states }: { valid: boolean, states: LoginForm<Re
   <div class="flex flex-row h-full">
     <div class="hidden md:flex flex-col items-center justify-center h-full w-full">
       <div class="flex flex-1 flex-col items-center justify-center w-full h-full">
-        <Image class="hidden md:flex" :src="themeStore.dark ? '/acm-light.png' : '/acm.png'" alt="Image" width="250" />
+        <Image class="hidden md:flex" :src="themeStore.logo" alt="Image" width="250" />
         <h1 class="text-3xl md:text-4xl font-bold mt-6 md:m-0">ACM Algorithm Hub</h1>
       </div>
       <footer class="flex flex-row items-start w-full">