fix: change logo

packages/graphic-walker/src/components/timeoutImg.tsx

@@ -0,0 +1,29 @@
+import React, { useRef, useState, useEffect } from 'react';
+
+export const ImageWithFallback = (
+    props: React.ImgHTMLAttributes<HTMLImageElement> & { fallbackSrc: string; timeout: number }
+) => {
+    const { src, fallbackSrc, timeout, ...rest } = props;
+    const [failed, setFailed] = useState(false);
+    const imgLoadedOnInitSrc = useRef(false);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (!imgLoadedOnInitSrc.current) setFailed(true);
+        }, timeout);
+        return () => clearTimeout(timer);
+    }, []);
+
+    return (
+        <img
+            {...rest}
+            src={failed ? src : fallbackSrc}
+            onError={() => {
+                setFailed(true);
+            }}
+            onLoad={() => {
+                imgLoadedOnInitSrc.current = true;
+            }}
+        />
+    );
+};

packages/graphic-walker/src/components/toolbar/components.tsx

@@ -74,6 +74,7 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean; dark: bo
     outline: none;
     width: ${({ split }) => split ? 'calc(var(--height) + 10px)' : 'var(--height)'};
     height: var(--height);
+    align-items: center;
     overflow: hidden;
     color: ${({ dark }) => dark ? 'var(--dark-mode-color)' : 'var(--color)'};
     position: relative;

packages/graphic-walker/src/visualSettings/index.tsx

@@ -33,7 +33,8 @@ import Toolbar, { ToolbarItemProps } from '../components/toolbar';
 import { ButtonWithShortcut } from './menubar';
 import { useCurrentMediaTheme } from '../utils/media';
 import throttle from '../utils/throttle';
-import KanariesLogo from '../assets/kanaries-logo.svg';
+import KanariesLogo from '../assets/kanaries.png';
+import { ImageWithFallback } from '../components/timeoutImg';
 
 const Invisible = styled.div`
     clip: rect(1px, 1px, 1px, 1px);
@@ -101,30 +102,8 @@ const VisualSettings: React.FC<IVisualSettings> = ({
 
     const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
 
-    console.log('kanaries logo', KanariesLogo);
-
     const items = useMemo<ToolbarItemProps[]>(() => {
         const builtInItems = [
-            {
-                key: 'kanaries',
-                label: 'kanaries',
-                icon: () => (
-                    // Kanaries brand info is not allowed to be removed or changed unless you are granted with special permission.
-                    <a href="https://kanaries.net" target="_blank">
-                        <img
-                            id="kanaries-logo"
-                            className="m-1"
-                            src="https://imagedelivery.net/tSvh1MGEu9IgUanmf58srQ/b6bc899f-a129-4c3a-d08f-d406166d0c00/public"
-                            alt="kanaries"
-                            onError={(e) => {
-                                // @ts-ignore
-                                e.target.src = KanariesLogo;
-                            }}
-                        />
-                    </a>
-                ),
-            },
-            '-',
             {
                 key: 'undo',
                 label: 'undo (Ctrl + Z)',
@@ -512,6 +491,24 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                     commonStore.setShowCodeExportPanel(true);
                 },
             },
+            '-',
+            {
+                key: 'kanaries',
+                label: 'kanaries',
+                icon: () => (
+                    // Kanaries brand info is not allowed to be removed or changed unless you are granted with special permission.
+                    <a href="https://docs.kanaries.net" target="_blank">
+                        <ImageWithFallback
+                            id="kanaries-logo"
+                            className="p-1.5 opacity-70 hover:opacity-100"
+                            src="https://imagedelivery.net/tSvh1MGEu9IgUanmf58srQ/b6bc899f-a129-4c3a-d08f-d406166d0c00/public"
+                            fallbackSrc={KanariesLogo}
+                            timeout={1000}
+                            alt="kanaries"
+                        />
+                    </a>
+                ),
+            },
         ] as ToolbarItemProps[];
 
         const items = builtInItems.filter((item) => typeof item === 'string' || !exclude.includes(item.key));