Nospoko · Fermatka · May 20, 2024 · May 17, 2024 · May 17, 2024 · May 17, 2024
diff --git a/algrtm/package-lock.json b/algrtm/package-lock.json
diff --git a/algrtm/package.json b/algrtm/package.json
@@ -14,6 +14,7 @@
     "dotenv": "^16.4.5",
     "next": "14.1.0",
     "next-plugin-svgr": "^1.1.10",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1"

diff --git a/algrtm/src/app/layout.js b/algrtm/src/app/layout.js
@@ -3,26 +3,39 @@ import "../styles/globals.css";
 import Footer from "@/components/Footer";
 import LinksSection from "@/components/LinksSection";
 import Header from "../components/Header";
-import ThemeContextProvider from "@/contexts/ThemeContext";
+// import ThemeContextProvider from "@/contexts/ThemeContext";
+import { Providers } from "@/providers/providers";
 
 const pingFont = localFont({ src: "../fonts/PingFangHK.ttf" });
 
 export const metadata = {
-  title: "Algrtm | Algorithmic solutions",
-  description: "We develop algorithmic solutions.",
+  title: "EPR | Algorithmic solutions",
+  description: "Make Data Science Great Again.",
 };
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className={`${pingFont.className} dark:bg-neutralDark-neutral100`}>
-        <ThemeContextProvider>
+        <Providers>
           <Header />
           {children}
           <LinksSection />
           <Footer />
-        </ThemeContextProvider>
+        </Providers>
       </body>
     </html>
+
+    // TODO: delete when works
+    // <html lang="en">
+    //   <body className={`${pingFont.className} dark:bg-neutralDark-neutral100`}>
+    //     <ThemeContextProvider>
+    //       <Header />
+    //       {children}
+    //       <LinksSection />
+    //       <Footer />
+    //     </ThemeContextProvider>
+    //   </body>
+    // </html>
   );
 }
diff --git a/algrtm/src/components/DataLabSection.js b/algrtm/src/components/DataLabSection.js
@@ -11,9 +11,9 @@ const DataLabSection = () => {
         {dataLabSectionTexts.map((item, index) => (
           <div
             key={index}
-            className="flex flex-col text-start bg-neutralLight-neutral90 border-neutralLight-neutral90  border-1 rounded-[2rem] gap-[1rem] p-[2rem] w-full max-w-[24.75rem] h-[21.62rem] xl:h-[31.38rem] lg:h-[30.12rem]"
+            className="flex flex-col text-start bg-neutralLight-neutral90 border-neutralLight-neutral90  border-1 rounded-[2rem] gap-[1rem] p-[2rem] w-full max-w-[24.75rem] h-[21.62rem] xl:h-[31.38rem] lg:h-[30.12rem] text-neutralLight-neutral20"
           >
-            <h5 className="h6_600 lg:text-[1.625rem] lg:leading-[2.34rem] lg:text-semibold max-w-[15rem]">
+            <h5 className="h6_600 lg:text-[1.625rem] lg:leading-[2.34rem] lg:text-semibold max-w-[15rem] ">
               {item.title}
             </h5>
             <p className="p2">{item.description}</p>

diff --git a/algrtm/src/components/Navbar.js b/algrtm/src/components/Navbar.js
@@ -1,7 +1,6 @@
 "use client";
 import Link from "next/link";
 import React, { useState } from "react";
-import Image from "next/image";
 import { AiOutlineClose } from "react-icons/ai";
 import ThemeToggle from "./shared/ThemeToggle";
 import SocialLinksSection from "./SocialLinksSection";

diff --git a/algrtm/src/components/PianoRollDescription.js b/algrtm/src/components/PianoRollDescription.js
@@ -1,10 +1,10 @@
 "use client";
-import { useThemeContext } from "@/contexts/ThemeContext";
+import { useTheme } from "next-themes";
 import Image from "next/image";
 import React from "react";
 
 const PianoRollDescription = () => {
-  const { darkMode } = useThemeContext();
+  const { darkMode } = useTheme();
   return (
     <section className="flex flex-col items-center justify-center w-full xl:px-[12.625rem] mt-[4rem] md:mt-[3.94rem]">
       <div className="lg:flex-row flex flex-col gap-[4.5rem] items-center justify-center w-full">

diff --git a/algrtm/src/components/shared/ThemeToggle.js b/algrtm/src/components/shared/ThemeToggle.js
@@ -1,17 +1,40 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
-import { useThemeContext } from "@/contexts/ThemeContext";
+import { useTheme } from "next-themes";
 
 const ThemeToggle = () => {
-  const { darkMode, toggleDarkMode } = useThemeContext();
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Image
+        src="data:image/svg+xml;base64,PHN2ZyBzdHJva2U9IiNGRkZGRkYiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMCIgdmlld0JveD0iMCAwIDI0IDI0IiBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4PSIyIiB5PSIyIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiIHJ4PSIyIj48L3JlY3Q+PC9zdmc+Cg=="
+        width={36}
+        height={36}
+        sizes="36x36"
+        alt="Loading Light/Dark Toggle"
+        priority={false}
+        title="Loading Light/Dark Toggle"
+      />
+    );
+  }
+
+  const toggleDarkMode = () => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
 
   return (
     <div className="flex items-center justify-center">
       <div
-        className="toggleButton items-center justify-center flex gap-1.5 dark:bg-neutralLight-neutral10 bg-neutralLight-neutral90 "
+        className="toggleButton items-center justify-center flex gap-1.5 dark:bg-neutralLight-neutral10 bg-neutralLight-neutral90"
         onClick={toggleDarkMode}
       >
-        {darkMode ? (
+        {resolvedTheme === "dark" ? (
           <>
             <Image src="/moon.svg" width={18} height={18} alt="Moon icon" />
             <div

diff --git a/algrtm/src/contexts/ThemeContext.js b/algrtm/src/contexts/ThemeContext.js
@@ -1,47 +1,47 @@
-"use client";
-import React, { createContext, useContext, useEffect, useState } from "react";
-
-export const ThemeContext = createContext(null);
-
-export default function ThemeContextProvider({ children }) {
-  const isClient = typeof window !== "undefined";
-  const [darkMode, setDarkMode] = useState(() => {
-    if (isClient) {
-      const theme = localStorage.getItem("theme");
-      return theme === "dark";
-    }
-    return false;
-  });
-
-  useEffect(() => {
-    if (isClient) {
-      if (darkMode) {
-        document.documentElement.classList.add("dark");
-        localStorage.setItem("theme", "dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-        localStorage.setItem("theme", "light");
-      }
-    }
-  }, [darkMode, isClient]);
-
-  const toggleDarkMode = () => {
-    setDarkMode((prevMode) => !prevMode);
-  };
-
-  return (
-    <ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export const useThemeContext = () => {
-  const context = useContext(ThemeContext);
-
-  if (!context) {
-    throw new Error("Theme context should be used within ThemeContextProvider");
-  }
-
-  return context;
-};
+// "use client";
+// import React, { createContext, useContext, useEffect, useState } from "react";
+
+// export const ThemeContext = createContext(null);
+
+// export default function ThemeContextProvider({ children }) {
+//   const isClient = typeof window !== "undefined";
+//   const [darkMode, setDarkMode] = useState(() => {
+//     if (isClient) {
+//       const theme = localStorage.getItem("theme");
+//       return theme === "dark";
+//     }
+//     return false;
+//   });
+
+//   useEffect(() => {
+//     if (isClient) {
+//       if (darkMode) {
+//         document.documentElement.classList.add("dark");
+//         localStorage.setItem("theme", "dark");
+//       } else {
+//         document.documentElement.classList.remove("dark");
+//         localStorage.setItem("theme", "light");
+//       }
+//     }
+//   }, [darkMode, isClient]);
+
+//   const toggleDarkMode = () => {
+//     setDarkMode((prevMode) => !prevMode);
+//   };
+
+//   return (
+//     <ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
+//       {children}
+//     </ThemeContext.Provider>
+//   );
+// }
+
+// export const useThemeContext = () => {
+//   const context = useContext(ThemeContext);
+
+//   if (!context) {
+//     throw new Error("Theme context should be used within ThemeContextProvider");
+//   }
+
+//   return context;
+// };
diff --git a/algrtm/src/providers/providers.js b/algrtm/src/providers/providers.js
@@ -0,0 +1,11 @@
+"use client";
+import { ThemeProvider } from "next-themes";
+import React from "react";
+
+export function Providers({ children }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system " enableSystem>
+      {children}
+    </ThemeProvider>
+  );
+}