fix: Remove theme-specific logos and update logo usage

Deleted logo-dark.svg and logo-light.svg, and updated the app to use a single logo.svg. Removed theme-based logo logic from config and header component. Also refactored product queries and pages to use 'allPaColor' instead of 'allPaStyle'.

Author: zackha

app/app.config.ts

@@ -1,13 +1,9 @@
 // app/app.config.ts
 export default defineAppConfig({
-    site: {
-        name: 'NuxtCommerce',
-        description: 'NuxtCommerce is a dynamic e-commerce solution developed with Nuxt 3 and GraphQL, tailored for WooCommerce.',
-        logo: {
-            light: 'logo-light.svg',
-            dark: 'logo-dark.svg',
-        }
-    },
+  site: {
+    name: 'NuxtCommerce',
+    description: 'NuxtCommerce is a dynamic e-commerce solution developed with Nuxt 3 and GraphQL, tailored for WooCommerce.',
+  },
   ui: {
     primary: 'red',
     gray: 'neutral',

app/components/AppHeader.vue

@@ -1,9 +1,6 @@
 <script setup>
 const router = useRouter();
 const route = useRoute();
-const colorMode = useColorMode()
-const { light, dark } = useAppConfig().site.logo
-
 const searchQuery = ref((route.query.q || '').toString());
 const searchResults = ref([]);
 const isLoading = ref(false);
@@ -31,11 +28,6 @@ async function fetch() {
 
 onMounted(fetch);
 
-const logoUrl = computed(() => {
-  const logo = colorMode.value === 'dark' ? light : dark
-  return "/" + logo.replace(/^\/+/g, '')
-})
-
 const throttledFetch = useDebounceFn(async () => {
   await fetch();
 }, 300);
@@ -64,18 +56,10 @@ onClickOutside(onClickOutsideRef, event => {
   <div class="flex w-full flex-row items-center px-3 lg:px-5 h-[72px] lg:h-20 z-40 fixed bg-white/85 dark:bg-black/85 backdrop-blur-sm dark:backdrop-blur-lg">
     <div class="flex flex-row w-full flex-nowrap items-center gap-2">
       <NuxtLink
-          aria-label="Home"
-          class="flex items-center justify-center min-w-[52px] min-h-[52px] max-lg:min-w-12 max-lg:min-h-12 hover:bg-black/5 hover:dark:bg-white/15 max-lg:dark:bg-white/15 max-lg:bg-black/5 max-lg:hover:bg-black/10 max-lg:hover:dark:bg-white/20 rounded-2xl max-lg:rounded-full transition active:scale-95 group"
-          :to="localePath('/')">
-          <div class="transform-gpu duration-200 ease-in-out group-hover:scale-[130%]">
-            <img
-                class="rounded-lg max-lg:rounded-full bg-[#b31015] w-8 h-8"
-                :src="logoUrl"
-                alt="Logo"
-                loading="lazy"
-                title="logo"
-            />
-          </div>
+        aria-label="Home"
+        class="flex items-center justify-center min-w-[52px] min-h-[52px] max-lg:min-w-12 max-lg:min-h-12 hover:bg-black/5 hover:dark:bg-white/15 max-lg:dark:bg-white/15 max-lg:bg-black/5 max-lg:hover:bg-black/10 max-lg:hover:dark:bg-white/20 rounded-2xl max-lg:rounded-full transition active:scale-95"
+        :to="localePath('/')">
+        <img class="rounded-lg max-lg:rounded-full bg-[#b31015] w-8 h-8" src="/logo.svg" alt="Logo" loading="lazy" title="logo" />
       </NuxtLink>
       <NuxtLink
         aria-label="Categories"

app/gql/queries/getProduct.ts

@@ -19,7 +19,7 @@ export const getProductQuery = gql`
             sourceUrl(size: LARGE)
           }
         }
-        allPaStyle {
+        allPaColor {
           nodes {
             name
           }
@@ -37,7 +37,7 @@ export const getProductQuery = gql`
                 image {
                   sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
                 }
-                allPaStyle {
+                allPaColor {
                   nodes {
                     name
                   }

app/pages/product/[id].vue

@@ -178,12 +178,12 @@ const { handleAddToCart, addToCartButtonStatus } = useCart();
                 :to="localePath(`/product/${vars.slug}-${product.sku.split('-')[0]}`)"
                 :class="[
                   'flex w-12 rounded-lg border-2 select-varitaion transition-all duration-200 bg-neutral-200 dark:bg-neutral-800',
-                  vars.allPaStyle.nodes[0].name === product.allPaStyle.nodes[0].name ? 'selected-varitaion' : 'border-[#9b9b9b] dark:border-[#8c8c8c]',
+                  vars.allPaColor.nodes[0].name === product.allPaColor.nodes[0].name ? 'selected-varitaion' : 'border-[#9b9b9b] dark:border-[#8c8c8c]',
                 ]">
                 <NuxtImg
-                  :alt="vars.allPaStyle.nodes[0].name"
+                  :alt="vars.allPaColor.nodes[0].name"
                   :src="vars.image.sourceUrl"
-                  :title="vars.allPaStyle.nodes[0].name"
+                  :title="vars.allPaColor.nodes[0].name"
                   class="rounded-md border-2 border-white dark:border-black" />
               </NuxtLink>
             </div>