Merge branch 'master' into Events

front-end/src/App.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { useLocation, BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Event from "./components/Event";
 import "./index.css";
 import "./App.css";
@@ -16,22 +16,32 @@ import ForgotPassword from "./components/ForgotPassword";
 import Logout from "./components/Logout";
 
 function App() {
-  // used to keep track of which specific event the user choose to see
-  const [isDarkMode, setIsDarkMode] = useState(false);
-  const toggleDarkMode = () =>
-    setIsDarkMode(
-      (prevMode) => !prevMode
-    ); /* global Dark Mode switch, controls for isDarkMode state */
+  // initialize dark mode from local storage
+  const [isDarkMode, setIsDarkMode] = useState(
+    localStorage.getItem("darkMode") === "true"
+  );
+  const toggleDarkMode = () => {
+    setIsDarkMode((prevMode) => {
+      const newMode = !prevMode;
+      localStorage.setItem("darkMode", newMode);
+      return newMode;
+    });
+  };
+
+  const resetDarkModeOnLogin = () => {
+    setIsDarkMode(false);
+    localStorage.setItem("darkMode", "false");
+  };
 
   return (
-    <div className={`container ${isDarkMode ? "dark-mode" : ""}`}>
       <Router>
+        <AppContainer isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode}>
         <Routes>
           <Route path="/forgot-password" element={<ForgotPassword />} />
           <Route path="/logout" element={<Logout />} />
 
           <Route path="/signup" element={<SignUp />} />
-          <Route path="/" element={<Login />} />
+          <Route path="/" element={<Login onLoginSuccess={resetDarkModeOnLogin}/>} />
           <Route
             path="/home"
             element={
@@ -96,9 +106,21 @@ function App() {
             }
           />
         </Routes>
+        </AppContainer>
       </Router>
-    </div>
   );
 }
 
+// dark mode should not affect Login and ForgotPassword page
+function AppContainer({ isDarkMode, children }) {
+  const location = useLocation();
+  // check if the current route is either the login page or the forgot password page
+  const isLoginPage = location.pathname === "/";
+  const isForgotPasswordPage = location.pathname === "/forgot-password";
+  // disable dark mode on Login and ForgotPassword page
+  const containerClass = isDarkMode && !isLoginPage && !isForgotPasswordPage ? "container dark-mode" : "container";
+  return <div className={containerClass}>{children}</div>;
+}
+
+
 export default App;

front-end/src/components/ForgotPassword.jsx

@@ -101,7 +101,7 @@ const ForgotPassword = () => {
 
           <div className="mt-4">
             <p>
-              No need to rest?{" "}
+              No need to reset?{" "}
               <a href="/" className="forgot-password-link">
                 Login
               </a>

front-end/src/components/Login.jsx

@@ -5,7 +5,7 @@ import { useNavigate, Navigate, useSearchParams } from "react-router-dom";
 import axios from "axios";
 import { useLocation } from "react-router-dom";
 
-const Login = () => {
+const Login = ({ onLoginSuccess }) => {
   const [formData, setFormData] = useState({
     username: "",
     password: "",
@@ -42,8 +42,9 @@ const Login = () => {
     if (response.success && response.token) {
       console.log(`User successfully logged in: ${response.username}`);
       localStorage.setItem("token", response.token);
+      onLoginSuccess(); // reset isDarkMode to be false when login
     }
-  }, [response]);
+  }, [response, onLoginSuccess]);
 
   const handleSubmit = async (e) => {
     e.preventDefault();

front-end/src/components/SplitModal.js

@@ -189,7 +189,7 @@ function SplitModal({
                         handlePercentageChange(e, participant._id)
                       }
                     />
-                    <span>% =</span>
+                    <span className="percentage-sign">%</span> <span className="equals-sign">=</span>
                     <span className="calculated-amount">
                       {" " +
                         "$" +

front-end/src/styles/AddExpense.css

@@ -100,5 +100,7 @@
 }
 
 .dark-mode .space-to-scroll {
-    @apply bg-gray-700; 
+    @apply bg-gray-800; 
+    height: 20px;
+
 }

front-end/src/styles/Events.css

@@ -105,6 +105,7 @@
 .dark-mode .select-members-popup,
 .dark-mode .add-members-content {
   @apply bg-gray-800;
+  @apply text-gray-400;
 }
 
 .dark-mode .Total_Balance_Section {

front-end/src/styles/SplitModal.css

@@ -66,6 +66,18 @@
     @apply whitespace-nowrap;
 }
 
+.percentage-sign {
+    margin-right: 3px;
+}
+
+.equals-sign {
+    padding-right: 4px; 
+}
+
+.participant-percentage-input {
+    margin-right: -4px;
+}
+
 /* Dark Mode for Split Modal */
 .dark-mode .split-modal-content {
     @apply bg-gray-900;