fix: wrong logo file when on "dark" appearance setting

cesium · Nov 19, 2024 · bbbd8d7 · bbbd8d7
1 parent fe18ee0
commit bbbd8d7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -28,8 +28,17 @@ const Layout = ({
 }: ILayoutProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const hamburgerLine = `h-1 w-6 my-0.5 rounded-full bg-black transition ease transform duration-300 dark:bg-neutral-200 bg-neutral-900`;
+  const [image, setImage] = useState<string>("");
   const { resolvedTheme } = useTheme();
 
+  useEffect(() => {
+    setImage(
+      resolvedTheme === "dark"
+        ? "/calendarium-dark.svg"
+        : "/calendarium-light.svg"
+    );
+  }, [resolvedTheme]);
+
   return (
     <div className="text-neutral-900 dark:text-neutral-200 lg:flex">
       <Head>
@@ -81,11 +90,7 @@ const Layout = ({
               className="h-9 w-auto min-[400px]:h-10 sm:h-12"
               width={0}
               height={0}
-              src={
-                resolvedTheme === "dark"
-                  ? "/calendarium-dark.svg"
-                  : "/calendarium-light.svg"
-              }
+              src={image}
               alt="Calendarium Logo"
             />
           </Link>

diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx
@@ -39,6 +39,7 @@ const Sidebar = ({
   const [checked, setChecked] = useState<number[] | SelectedShift[]>([]);
   const [promptInstall, setPromptInstall] =
     useState<BeforeInstallPromptEvent>(null);
+  const [image, setImage] = useState<string>("");
 
   function clearSelection() {
     setClear(true);
@@ -59,6 +60,14 @@ const Sidebar = ({
 
   const { resolvedTheme } = useTheme();
 
+  useEffect(() => {
+    setImage(
+      resolvedTheme === "dark"
+        ? "/calendarium-dark.svg"
+        : "/calendarium-light.svg"
+    );
+  }, [resolvedTheme]);
+
   return (
     <nav
       className={`${sidebar} ${isOpen ? "block" : "-translate-x-full"}`}
@@ -75,11 +84,7 @@ const Sidebar = ({
                 className="h-[46px] w-auto"
                 width={0}
                 height={0}
-                src={
-                  resolvedTheme === "dark"
-                    ? "/calendarium-dark.svg"
-                    : "/calendarium-light.svg"
-                }
+                src={image}
                 alt="Calendarium Logo"
               />
             </Link>