diff --git a/frontend/lib/assets/QuivrLogo.tsx b/frontend/lib/assets/QuivrLogo.tsx index 43c50c4fd..7c12738f0 100644 --- a/frontend/lib/assets/QuivrLogo.tsx +++ b/frontend/lib/assets/QuivrLogo.tsx @@ -1,4 +1,5 @@ import Image from "next/image"; +import { useEffect, useState } from "react"; interface QuivrLogoProps { size: number; @@ -9,22 +10,19 @@ export const QuivrLogo = ({ size, color = "white", }: QuivrLogoProps): JSX.Element => { - let src = "/logo-white.svg"; - if (color === "primary") { - src = "/logo-primary.svg"; - } else if (color === "accent") { - src = "/logo-accent.svg"; - } + const [src, setSrc] = useState("/logo-white.svg"); - const filter = color === "black" ? "invert(1)" : "none"; + useEffect(() => { + if (color === "primary") { + setSrc("/logo-primary.svg"); + } else if (color === "accent") { + setSrc("/logo-accent.svg"); + } else if (color === "black") { + setSrc("/logo-black.svg"); + } else { + setSrc("/logo-white.svg"); + } + }, [color]); - return ( - Quivr Logo - ); + return Quivr Logo; }; diff --git a/frontend/public/logo-black.svg b/frontend/public/logo-black.svg new file mode 100644 index 000000000..ca8a6cbc2 --- /dev/null +++ b/frontend/public/logo-black.svg @@ -0,0 +1 @@ + \ No newline at end of file