Merge pull request #621 from FalkorDB/copilot/fix-logo-dark-mode

Fix logo visibility in dark mode using inline SVG with currentColor

Author: gkorland

app/src/App.tsx

@@ -20,6 +20,8 @@ import GTM from './GTM';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { ThemeToggle } from './components/theme-toggle';
+import Logo from './components/logo';
+
 
 const Chat = lazy(() => import('./components/chat').then(mod => ({ default: mod.Chat })));
 const CodeGraph = lazy(() => import('./components/code-graph').then(mod => ({ default: mod.CodeGraph })));
@@ -383,8 +385,8 @@ export default function App() {
           <header className="flex flex-col text-xl">
             <div className="flex items-center justify-between py-2 px-4 border-b border-border">
               <div className="flex gap-4 items-center">
-                <a href="https://www.falkordb.com" target='_blank' rel="noopener noreferrer">
-                  <img src="/logo_02.svg" alt="FalkorDB" width={27.73} height={23.95} />
+                <a href="https://www.falkordb.com" target='_blank' rel="noopener noreferrer" aria-label="FalkorDB">
+                  <Logo />
                 </a>
                 <h1 className='font-semibold text-[22px]'>
                   CODE GRAPH
@@ -579,11 +581,12 @@ export default function App() {
           </Suspense>
         </div>
         <div className='flex flex-col md:hidden h-full overflow-hidden' id='mobile'>
-          <header className='flex justify-center items-center relative bg-muted'>
-            <a href="https://www.falkordb.com" target='_blank' rel="noopener noreferrer">
-              <img style={{ width: 'auto', height: '70px', background: "transparent" }} src="/code-graph-logo.svg" alt="FalkorDB" />
+          <header className='flex justify-between items-center bg-muted py-2 px-4'>
+            <a href="https://www.falkordb.com" target='_blank' rel="noopener noreferrer" aria-label="FalkorDB" className="flex gap-2 items-center">
+              <Logo width={40} height={34} />
+              <span className='font-semibold text-[22px]'>CODE GRAPH</span>
             </a>
-            <div className='absolute top-4 right-4 flex gap-2'>
+            <div className='flex gap-2'>
               <ThemeToggle />
               <button onClick={() => setMenuOpen(prev => !prev)}>
                 <AlignRight />

app/src/components/logo.tsx

@@ -0,0 +1,25 @@
+import { useId } from 'react'
+
+interface Props {
+  width?: number
+  height?: number
+  className?: string
+}
+
+export default function Logo({ width = 27.73, height = 23.95, className }: Props) {
+  const gradientId = useId()
+
+  return (
+    <svg width={width} height={height} viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+      <path d="M12.2414 5.00223H4.36942C4.28983 5.00223 4.22093 5.05647 4.20549 5.13104L1.41282 18.8113C1.39262 18.9096 1.47221 19.0011 1.57674 19.0011H3.21125C4.01187 19.0011 4.70202 18.4599 4.85525 17.7118L5.64518 13.8486C5.66063 13.774 5.72952 13.7186 5.80911 13.7186H8.72889C9.53189 13.7186 10.2208 13.1774 10.3729 12.4282L10.5535 11.5424C10.5736 11.4452 10.4941 11.3525 10.3883 11.3525H6.35434C6.24981 11.3525 6.16903 11.261 6.19042 11.1627L6.94352 7.49601C6.95897 7.42143 7.02786 7.3672 7.10745 7.3672H10.582C11.385 7.3672 12.0739 6.82595 12.226 6.0768L12.4065 5.19093C12.4267 5.09262 12.3471 5.0011 12.2414 5.0011V5.00223Z" fill="currentColor"/>
+      <path d="M27.7117 11.9211C27.6843 12.0662 27.6294 12.2095 27.5697 12.3369C27.4776 12.5344 27.3562 12.7211 27.2103 12.882C26.8792 13.2485 26.4111 13.4341 25.9332 13.5319C25.4552 13.6297 24.0018 13.5665 23.3956 13.4193C21.8501 13.043 20.2547 13.0509 19.3096 13.4193C18.7103 13.6534 18.5007 13.7877 18.1833 14.0623C16.9307 15.1487 16.3695 17.7759 15.873 19.3225C15.5351 20.3803 15.2031 21.4806 14.4431 22.3151C13.2728 23.5971 11.3248 23.9467 9.55896 23.9467H0.154001C0.0570427 23.9467 -0.0164084 23.8579 0.00317914 23.7621L0.185342 22.8179C0.333228 22.0485 1.00214 21.4934 1.77879 21.4934H8.63345C10.1378 21.4934 11.7469 21.2811 12.5803 20.1206C13.0485 19.4677 13.1826 18.6598 13.3736 17.8904C14.0435 15.1981 14.2658 12.7092 16.9386 11.6485C16.1511 11.1517 15.5782 10.3497 15.3794 9.46775C15.0131 7.83911 15.8799 6.1996 15.9592 4.53639C15.9944 3.82824 15.8289 3.02923 15.2129 2.63614C14.781 2.36059 14.2267 2.3517 13.7076 2.3517C11.7586 2.35367 10.5266 2.35466 8.26128 2.35664H5.59542C4.57589 2.35664 3.81099 1.42034 4.00589 0.411945L4.06074 0.125525C4.07543 0.0524388 4.1381 9.31427e-05 4.21156 9.31427e-05C5.41717 9.31427e-05 12.1318 0.00700673 14.4265 9.31427e-05C15.7515 -0.00286982 17.2402 0.0593524 18.1373 0.989723C18.435 1.29886 18.625 1.65836 18.7367 2.0475C18.7426 2.0633 18.7455 2.07911 18.7504 2.0959C19.008 3.04898 18.8052 4.17392 18.5467 5.16651C18.2137 6.45837 17.8553 7.9596 18.5702 9.19417C18.8542 9.68503 19.2998 10.0475 19.8287 10.2401C20.1245 10.3477 20.2508 10.402 20.5642 10.3991C20.7209 10.3971 20.8776 10.3823 21.0324 10.3537C21.3409 10.2993 21.6768 10.2233 21.9549 10.168C22.0881 10.1413 22.2223 10.1176 22.3574 10.0979C22.7237 10.0455 23.1165 10.0356 23.4896 10.1107C23.7629 10.166 24.0302 10.2677 24.2594 10.4297C24.5033 10.6025 24.6463 10.8169 24.7745 11.0835C24.846 11.2327 24.9352 11.3838 25.0801 11.4618C25.3397 11.6011 25.7432 11.5072 26.0223 11.4845C26.3132 11.4608 26.6021 11.4154 26.892 11.3818C27.033 11.365 27.174 11.3512 27.316 11.3443C27.4277 11.3393 27.5491 11.3532 27.6324 11.4371C27.6921 11.4974 27.7215 11.5833 27.7274 11.6692C27.7332 11.7522 27.7264 11.8361 27.7107 11.9201L27.7117 11.9211Z" fill={`url(#${gradientId})`}/>
+      <defs>
+        <linearGradient id={gradientId} x1="-0.478772" y1="23.2987" x2="27.7346" y2="23.2981" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#7466FF"/>
+          <stop offset="0.5" stopColor="#FF66B3"/>
+          <stop offset="1" stopColor="#FF804D"/>
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}