From 96cc5b5b5a43888dcf967c3905140f405e647a0a Mon Sep 17 00:00:00 2001 From: Antoine Dewez <44063631+Zewed@users.noreply.github.com> Date: Thu, 18 Jul 2024 15:30:27 +0200 Subject: [PATCH] fix(frontend): logo color on dark mode (#2882) # Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate): --- frontend/lib/assets/QuivrLogo.tsx | 30 ++++++++++++++---------------- frontend/public/logo-black.svg | 1 + 2 files changed, 15 insertions(+), 16 deletions(-) create mode 100644 frontend/public/logo-black.svg 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