fixed problems with darkMode

Nospoko · Sep 9, 2024 · 47ce9f6 · 47ce9f6
1 parent 58c56de
commit 47ce9f6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 26 deletions.
diff --git a/algrtm/src/components/Navbar.js b/algrtm/src/components/Navbar.js
@@ -10,7 +10,7 @@ import Image from "next/image";
 import { useTheme } from "next-themes";
 
 export default function Navbar() {
-  const { darkMode } = useTheme();
+  const { resolvedTheme } = useTheme();
   const [menuOpen, setMenuOpen] = useState(false);
   const pathname = usePathname();
   const [selectedMenu, setSelectedMenu] = useState("");
@@ -50,7 +50,7 @@ export default function Navbar() {
               width={97.753}
               sizes="100vw"
               src={
-                darkMode
+                resolvedTheme === "dark"
                   ? "/EPR_Labs_logo_white_waves.svg"
                   : "/EPR_Labs_logo_color.svg"
               }
@@ -86,16 +86,6 @@ export default function Navbar() {
           >
             Custom Solutions
           </Link>
-          {/* TODO- uncomment when we have sth to show on Knowledge page */}
-          {/* <Link
-            href="/knowledge"
-            className={`flex w-full items-center justify-center transition md:p3SB xl:p3 p-2.5 animation ${
-              selectedMenu === "knowledge" ? "text-blueLight-blue50 border-b-2 border-blueLight-blue50" : ""
-            } hover:text-blueLight-blue50`}
-            onClick={() => handleMenuClick("knowledge")}
-          >
-            Knowledge
-          </Link> */}
         </div>
 
         <Link
@@ -119,7 +109,6 @@ export default function Navbar() {
         >
           <Menu className="mr-[1rem]" color="#2E2E2E" />
         </div>
-        {/* NavbarDropdownMenu */}
 
         <div
           className={`fixed bg-neutralLight-neutral100 dark:bg-neutralDark-neutral100 ease-in duration-500 flex flex-col justify-between top-0 w-full h-screen ${
@@ -180,17 +169,7 @@ export default function Navbar() {
                 Custom Solutions
               </li>
             </Link>
-            {/* TODO: add the link when we have sth there */}
-            {/* <Link href="/knowledge">
-              <li
-                onClick={() => handleMenuClick("knowledge")}
-                className={`py-4 cursor-pointer list-none hover:text-blueLight-blue50 transition-transform duration-500 ease-in-out transform hover:scale-110 active:font-semibold ${
-                  selectedMenu === "knowledge" ? "text-blueLight-blue50 border-b-2 border-blueLight-blue50" : ""
-                }`}
-              >
-                Knowledge
-              </li>
-            </Link> */}
+
             <div className="flex flex-col gap-[2rem]">
               <Link
                 href="/contactUs"

diff --git a/algrtm/src/components/PianoRollDescription.js b/algrtm/src/components/PianoRollDescription.js
@@ -5,7 +5,7 @@ import React from "react";
 import CustomLink from "./shared/CustomLink";
 
 const PianoRollDescription = () => {
-  const { darkMode } = useTheme();
+  const { resolvedTheme } = useTheme();
   return (
     <section className="flex flex-col items-center justify-center w-full xl:px-[12.625rem]">
       <div className="lg:flex-row flex flex-col gap-[4rem] lg:gap-[4.5rem] items-center justify-center w-full">
@@ -42,7 +42,11 @@ const PianoRollDescription = () => {
             height={283}
             width={343}
             sizes="100vw"
-            src={darkMode ? "/PianoRollScreenDark.png" : "/PianoRollScreen.png"}
+            src={
+              resolvedTheme === "dark"
+                ? "/PianoRollScreenDark.png"
+                : "/PianoRollScreen.png"
+            }
             alt="Piano Roll App Screen"
             className="w-auto h-[17.678rem] md:h-[29.875rem]"
           />