From 8ab9caa45b85b6ea42986776c8db66b06dfd3553 Mon Sep 17 00:00:00 2001 From: thatmattlove Date: Sun, 24 Mar 2024 14:39:41 -0400 Subject: [PATCH] fix issue where incorrect light/dark logo was loaded. closes #240 --- hyperglass/ui/components/header/logo.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/hyperglass/ui/components/header/logo.tsx b/hyperglass/ui/components/header/logo.tsx index 1858c32..c67ddbd 100644 --- a/hyperglass/ui/components/header/logo.tsx +++ b/hyperglass/ui/components/header/logo.tsx @@ -1,5 +1,5 @@ -import { useCallback, useMemo, useState } from 'react'; import { Image, Skeleton } from '@chakra-ui/react'; +import { useCallback, useMemo, useState } from 'react'; import { useConfig } from '~/context'; import { useColorValue } from '~/hooks'; @@ -12,21 +12,16 @@ function useLogo(): [string, () => void] { const { web } = useConfig(); const { darkFormat, lightFormat } = web.logo; - const src = useColorValue(`/images/dark${darkFormat}`, `/images/light${lightFormat}`); + const src = useColorValue(`/images/light${darkFormat}`, `/images/dark${lightFormat}`); // Use the hyperglass logo if the user's logo can't be loaded for whatever reason. - const fallbackSrc = useColorValue( - 'https://res.cloudinary.com/hyperglass/image/upload/v1593916013/logo-dark.svg', - 'https://res.cloudinary.com/hyperglass/image/upload/v1593916013/logo-light.svg', - ); - const [fallback, setSource] = useState(null); // If the user image cannot be loaded, log an error to the console and set the fallback image. const setFallback = useCallback(() => { console.warn(`Error loading image from '${src}'`); - setSource(fallbackSrc); - }, [fallbackSrc, src]); + setSource('https://res.cloudinary.com/hyperglass/image/upload/v1593916013/logo-light.svg'); + }, [src]); // Only return the fallback image if it's been set. return useMemo(() => [fallback ?? src, setFallback], [fallback, setFallback, src]);