"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

@@ -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}>

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;

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>

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: {},
   },