Add Dark Mode Support

package.json

@@ -41,8 +41,8 @@
   },
   "scripts": {
     "server": "npx nodemon server/server.js",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -57,6 +57,7 @@
   ],
   "proxy": "http://localhost:5000",
   "devDependencies": {
-    "nodemon": "^2.0.2"
+    "nodemon": "^2.0.2",
+    "cross-env": "^7.0.3"
   }
 }

src/App.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import ScrollToTop from "./components/ScrollToTop";
+import { ThemeProvider, useTheme } from "./contexts/ThemeContext";
+
+const AppContent = () => {
+  const { darkMode, toggleDarkMode } = useTheme();
+
+  return (
+    <div className={`app ${darkMode ? "dark-mode" : ""}`}>
+      <button className="theme-toggle" onClick={toggleDarkMode}>
+        {darkMode ? "☀️" : "🌙"}
+      </button>
+      <ScrollToTop />
+    </div>
+  );
+};
+
+function App() {
+  return (
+    <ThemeProvider>
+      <AppContent />
+    </ThemeProvider>
+  );
+}
+
+export default App;

src/components/ScrollToTop.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from "react";
+import "../styles/ScrollToTop.css";
+
+const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Show button when page is scrolled up to given distance
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  // Set the top cordinate to 0
+  // make scrolling smooth
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", toggleVisibility);
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <>
+      {isVisible && (
+        <button onClick={scrollToTop} className="scroll-to-top">
+          ↑
+        </button>
+      )}
+    </>
+  );
+};
+
+export default ScrollToTop;

src/contexts/ThemeContext.jsx

@@ -0,0 +1,19 @@
+import React, { createContext, useState, useContext } from "react";
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [darkMode, setDarkMode] = useState(false);
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);

src/index.css

@@ -0,0 +1,36 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.app {
+  min-height: 100vh;
+}
+
+.app.dark-mode {
+  background-color: #1a1a1a;
+  color: #ffffff;
+}
+
+.theme-toggle {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 10px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  background-color: #f0f0f0;
+  color: #1a1a1a;
+  z-index: 1000;
+}
+
+.dark-mode .theme-toggle {
+  background-color: #333;
+  color: #ffffff;
+}

src/index.js

@@ -1,37 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { BrowserRouter } from "react-router-dom";
-import { Provider } from "react-redux";
-import configureStore from "app/store/configureStore";
-
-const store = configureStore();
-
-// Save a reference to the root element for reuse
-const rootEl = document.getElementById("root");
-
-const render = () => {
-  const App = require("app/layout/App").default;
-  console.debug("render me");
-  ReactDOM.render(
-    <Provider store={store}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </Provider>,
-    rootEl
-  );
-};
-
-// if (process.env.NODE_ENV !== "production") {
-//   console.debug("render me");
-//   if (module.hot) {
-//     // Support hot reloading of components.
-//     // Whenever the App component file or one of its dependencies
-//     // is changed, re-import the updated component and re-render it
-//     module.hot.accept("app/layout/App", () => {
-//       setTimeout(render);
-//     });
-//   }
-// }
-
-render();
+import App from "./App";
+import "./index.css";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);

src/styles/ScrollToTop.css

@@ -0,0 +1,32 @@
+.scroll-to-top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #000;
+  color: white;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  opacity: 0.7;
+  transition: opacity 0.3s;
+  z-index: 1000;
+}
+
+.scroll-to-top:hover {
+  opacity: 1;
+}
+
+.dark-mode .scroll-to-top {
+  background-color: #333;
+  color: #ffffff;
+}
+
+.dark-mode .scroll-to-top:hover {
+  background-color: #444;
+}