From c598a52192f74727e53faf3c989eb62750b485fb Mon Sep 17 00:00:00 2001
From: ucangun <149247682+ucangun@users.noreply.github.com>
Date: Tue, 17 Sep 2024 22:02:01 +0200
Subject: [PATCH] "Updated App.tsx to toggle dark mode class on HTML element,
 replaced Button with MyButton in Navbar.tsx, and added darkMode config to
 tailwind.config.js"

---
 src/App.tsx               | 12 ++++++++++++
 src/components/Button.tsx | 34 ++++++++++++++++++++++++++++++++++
 src/components/Navbar.tsx |  5 ++++-
 tailwind.config.js        |  1 +
 4 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Button.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 8155519..1b0e546 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,9 +6,21 @@ import { ThemeProvider } from "@mui/material/styles";
 import { darkTheme } from "./theme.ts";
 import { lightTheme } from "./theme.ts";
 import { useSelector } from "react-redux";
+import { useEffect } from "react";
 
 function App() {
   const { mode } = useSelector((state: RootState) => state.theme);
+
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+
+    if (mode === "dark") {
+      htmlElement.classList.add("dark");
+    } else {
+      htmlElement.classList.remove("dark");
+    }
+  }, [mode]);
+
   return (
     <>
       <ThemeProvider theme={mode === "dark" ? darkTheme : lightTheme}>
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..87b8eac
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,34 @@
+import { Link } from "react-router-dom";
+
+interface ButtonType {
+  children: string;
+  to?: string;
+  type: "primary" | "secondary";
+  onClick?: () => void;
+}
+
+const MyButton = ({ children, to, type, onClick }: ButtonType) => {
+  const base =
+    "rounded-[1.2rem] bg-[#bbb2cd] px-4 py-3 text-md font-[500]  text-[#111]shadow-sm dark:bg-[#bbb2cd] dark:text-[#111] ";
+
+  const styles = {
+    primary: base,
+    secondary: "",
+  };
+
+  if (to) {
+    return (
+      <Link to={to} className={styles[type]}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button onClick={onClick} className={styles[type]}>
+      {children}
+    </button>
+  );
+};
+
+export default MyButton;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 43d5a84..54455cb 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -14,6 +14,7 @@ import {
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import Logo from "./Logo";
+import MyButton from "./Button";
 import { useSelector } from "react-redux";
 import { RootState } from "../app/store";
 import useAuthCall from "../hooks/useAuthCall";
@@ -197,7 +198,9 @@ function Navbar() {
               </>
             ) : (
               <Box>
-                <Button>sdfgdfgdsf</Button>
+                <MyButton to="/login" type="primary">
+                  Get Started
+                </MyButton>
               </Box>
             )}
           </Box>
diff --git a/tailwind.config.js b/tailwind.config.js
index 614c86b..bb65a49 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "selector",
   theme: {
     extend: {},
   },