From ed5abe81ad7d1731a28670c36b7bdfdf3a3ef283 Mon Sep 17 00:00:00 2001
From: Dainiz Almazan Bustos <85927389+dainizzz@users.noreply.github.com>
Date: Wed, 10 Dec 2025 22:10:52 -0800
Subject: [PATCH 1/2] Adds login modal

---
 src/Components/LoginModal.jsx  | 69 ++++++++++++++++++++++++++++++++++
 src/Components/NavBar.jsx      | 21 +++++------
 src/Context/UserContext.jsx    | 10 +++++
 src/assets/icons/closeIcon.svg |  4 ++
 src/styles/LoginModal.css      | 37 ++++++++++++++++++
 5 files changed, 129 insertions(+), 12 deletions(-)
 create mode 100644 src/Components/LoginModal.jsx
 create mode 100644 src/assets/icons/closeIcon.svg
 create mode 100644 src/styles/LoginModal.css

diff --git a/src/Components/LoginModal.jsx b/src/Components/LoginModal.jsx
new file mode 100644
index 0000000..e635593
--- /dev/null
+++ b/src/Components/LoginModal.jsx
@@ -0,0 +1,69 @@
+import "../styles/LoginModal.css";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useUserContext } from "../Context/UserContext";
+import closeIcon from "../assets/icons/closeIcon.svg";
+
+export default function LoginModal() {
+  const navigate = useNavigate();
+  const { setIsLoggedIn, setShowLoginModal } = useUserContext();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  function handleLogin() {
+    if (email && password) {
+      setIsLoggedIn(true);
+      setShowLoginModal(false);
+      navigate("/dashboard");
+    }
+  }
+
+  function handleClose() {
+    setShowLoginModal(false);
+  }
+
+  return (
+    <div className="loginModalOverlayer">
+      <div className="loginModal">
+        <button onClick={handleClose} className="iconButton">
+          <img src={closeIcon} alt="close-icon" />
+        </button>
+        <h2>Welcome, Collaborator!</h2>
+        <p>
+          Ready to connect? Enter your email to begin your mission. This is a
+          private, secure space designed for you and your teammates. Your
+          mission of connection starts here.
+        </p>
+        <form>
+          <div>
+            <label>Email</label>
+            <input
+              name="Email"
+              type="text"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <div>
+            <label>Password</label>
+            <input
+              name="Password"
+              type="password"
+              placeholder="Enter your password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+        </form>
+        <div className="loginNav">
+          <p>Forgot your password?</p>
+          <button onClick={handleLogin}>Log In</button>
+          <p>
+            Don't have an account yet? <a>Sign up here!</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx
index 8f23a74..6ca3e82 100644
--- a/src/Components/NavBar.jsx
+++ b/src/Components/NavBar.jsx
@@ -1,19 +1,12 @@
-import { NavLink, useLocation, useNavigate } from "react-router-dom";
-import { useState } from "react";
+import { NavLink, useLocation } from "react-router-dom";
 import logo from "../assets/icons/logo.svg";
 import "../styles/NavBar.css";
 import NavUserSection from "./NavUserSection";
+import LoginModal from "./LoginModal";
+import { useUserContext } from "../Context/UserContext";
 
 export default function NavBar() {
-  const navigate = useNavigate();
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-
-  // TODO: Update to link to the dashboard after activity has been completed
-  const handleLoginClick = () => {
-    setIsLoggedIn(true);
-    navigate("/dashboard");
-  };
-
+  const { showLoginModal, setShowLoginModal, isLoggedIn } = useUserContext();
   const { pathname } = useLocation();
 
   const hideOnActivity =
@@ -24,8 +17,13 @@ export default function NavBar() {
 
   if (hideOnActivity || hideOnResults) return null;
 
+  function handleLoginClick() {
+    setShowLoginModal(true);
+  }
+
   return (
     <nav>
+      {showLoginModal ? <LoginModal /> : <></>}
       <div className="navElements">
         <div className="menu">
           <img src={logo} alt="logo" />
@@ -50,7 +48,6 @@ export default function NavBar() {
               <a className="inactiveLink" title="Coming Soon">
                 Your Team
               </a>
-              {/* Just use testing-Remove later */}
               <NavLink
                 to="/results"
                 className={({ isActive }) => (isActive ? "activeLink" : "")}
diff --git a/src/Context/UserContext.jsx b/src/Context/UserContext.jsx
index 1152196..5ce7365 100644
--- a/src/Context/UserContext.jsx
+++ b/src/Context/UserContext.jsx
@@ -7,6 +7,10 @@ export const defaultState = {
   setQuizScore: () => {},
   missionCompleted: false,
   setMissionCompleted: () => {},
+  isLoggedIn: false,
+  setIsLoggedIn: () => {},
+  showLoginModal: false,
+  setShowLoginModal: () => {},
 };
 
 export const UserContext = createContext(defaultState);
@@ -17,6 +21,8 @@ export const UserContextProvider = ({ children }) => {
   const [activityCompleted, setActivityCompleted] = useState(false);
   const [quizScore, setQuizScore] = useState(0);
   const [missionCompleted, setMissionCompleted] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [showLoginModal, setShowLoginModal] = useState(false);
   const value = {
     activityCompleted,
     setActivityCompleted,
@@ -24,6 +30,10 @@ export const UserContextProvider = ({ children }) => {
     setQuizScore,
     missionCompleted,
     setMissionCompleted,
+    isLoggedIn,
+    setIsLoggedIn,
+    showLoginModal,
+    setShowLoginModal,
   };
   return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
 };
diff --git a/src/assets/icons/closeIcon.svg b/src/assets/icons/closeIcon.svg
new file mode 100644
index 0000000..000fbf3
--- /dev/null
+++ b/src/assets/icons/closeIcon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1.5C6.15 1.5 1.5 6.15 1.5 12C1.5 17.85 6.15 22.5 12 22.5C17.85 22.5 22.5 17.85 22.5 12C22.5 6.15 17.85 1.5 12 1.5ZM12 21C7.05 21 3 16.95 3 12C3 7.05 7.05 3 12 3C16.95 3 21 7.05 21 12C21 16.95 16.95 21 12 21Z" fill="#1C1C1E"/>
+<path d="M16.05 17.25L12 13.2L7.95 17.25L6.75 16.05L10.8 12L6.75 7.95L7.95 6.75L12 10.8L16.05 6.75L17.25 7.95L13.2 12L17.25 16.05L16.05 17.25Z" fill="#1C1C1E"/>
+</svg>
diff --git a/src/styles/LoginModal.css b/src/styles/LoginModal.css
new file mode 100644
index 0000000..fe35c60
--- /dev/null
+++ b/src/styles/LoginModal.css
@@ -0,0 +1,37 @@
+.loginModalOverlayer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.15);
+  align-items: center;
+  z-index: 1000;
+}
+
+.loginModal {
+  width: 32.5rem;
+  height: 37.5rem;
+  border-radius: 0.5rem;
+  background: #fff;
+  color: #1c1c1e;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-flow: column;
+  padding: 1rem;
+}
+
+.loginModal > h2 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.875rem;
+}
+
+.loginModal p {
+  color: #1c1c1e;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.375rem;
+}

From b508d2e1b8cacd6aab0c1767fa10cf918d94c7d9 Mon Sep 17 00:00:00 2001
From: anabel <anabelcurry@gmail.com>
Date: Sat, 13 Dec 2025 10:28:21 -0800
Subject: [PATCH 2/2] some initial styling

---
 src/Components/LoginModal.jsx |  6 ++---
 src/styles/LoginModal.css     | 50 ++++++++++++++++++++++++++++++++++-
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/Components/LoginModal.jsx b/src/Components/LoginModal.jsx
index e635593..4c0b2a0 100644
--- a/src/Components/LoginModal.jsx
+++ b/src/Components/LoginModal.jsx
@@ -35,7 +35,7 @@ export default function LoginModal() {
           mission of connection starts here.
         </p>
         <form>
-          <div>
+          <div className="input">
             <label>Email</label>
             <input
               name="Email"
@@ -45,7 +45,7 @@ export default function LoginModal() {
               onChange={(e) => setEmail(e.target.value)}
             />
           </div>
-          <div>
+          <div className="input">
             <label>Password</label>
             <input
               name="Password"
@@ -57,7 +57,7 @@ export default function LoginModal() {
           </div>
         </form>
         <div className="loginNav">
-          <p>Forgot your password?</p>
+          <a>Forgot your password?</a>
           <button onClick={handleLogin}>Log In</button>
           <p>
             Don't have an account yet? <a>Sign up here!</a>
diff --git a/src/styles/LoginModal.css b/src/styles/LoginModal.css
index fe35c60..2e3954e 100644
--- a/src/styles/LoginModal.css
+++ b/src/styles/LoginModal.css
@@ -20,13 +20,22 @@
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
   display: flex;
   flex-flow: column;
-  padding: 1rem;
+  padding: 2.47rem 2.38rem 3.5rem 2.38rem;
+}
+
+.iconButton {
+  height: 1.5rem;
+  margin-left: auto; 
+  margin-right: 0;
+
 }
 
 .loginModal > h2 {
   font-size: 1.75rem;
   font-weight: 700;
   line-height: 1.875rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.5rem;
 }
 
 .loginModal p {
@@ -34,4 +43,43 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.375rem;
+  margin-bottom: 1.63rem;
+}
+
+.input {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2.38rem;
+}
+
+.input label {
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.input input {
+  height: 2.375rem;
+  border-radius: 0.375rem;
+  border: 1px solid #E5E5E5;
+  padding: 0.5rem 0.62rem;
 }
+
+.loginNav {
+  margin: 0.6rem auto 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.loginNav a {
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #0036F5;
+}
+
+.loginNav button {
+  margin-bottom: 1.6rem;
+  width: 9.375rem;
+}
+