From 862f7c52518767d8b3ddc069ddd2e28ba5e09bde Mon Sep 17 00:00:00 2001
From: lyannne <xu.ly@northeastern.edu>
Date: Wed, 4 Feb 2026 23:09:35 -0500
Subject: [PATCH 1/9] login styles changed to tailwind in line

---
 frontend/src/Login.tsx | 25 +++----------------------
 1 file changed, 3 insertions(+), 22 deletions(-)

diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx
index 2f8ae70..fa43e8b 100644
--- a/frontend/src/Login.tsx
+++ b/frontend/src/Login.tsx
@@ -28,9 +28,9 @@ const Login = observer(() => {
   };
 
   return (
-    <div className="bg-white grid grid-cols-2" style={styles.pageContainer}>
+    <div className="bg-white grid grid-cols-[60%_40%] w-screen h-screen relative m-0 p-0 overflow-hidden flex justify-center items-start text-start">
       {/*/ Left side: Registration form */}
-      <div className="w-[60%] h-full py-20 px-24 flex flex-col justify-center items-start">
+      <div className="h-full py-20 px-24 flex flex-col justify-center items-start">
         <div className="mb-12">
           <h1 className="text-[32px] pb-4">Welcome back!</h1>
           <h2 className="text-lg">
@@ -52,7 +52,6 @@ const Login = observer(() => {
                   required
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="Enter your email"
-                  style={styles.inputContainer}
                   className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
@@ -70,7 +69,6 @@ const Login = observer(() => {
                   required
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder="Enter your password"
-                  style={styles.inputContainer}
                   className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
@@ -88,7 +86,6 @@ const Login = observer(() => {
           <button
             type="submit"
             className="w-full block mt-8 min-w-0 rounded-md grow bg-dark-orange text-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500"
-            style={{ ...styles.button, ...styles.helloButton }}
           >
             Login
           </button>
@@ -111,7 +108,7 @@ const Login = observer(() => {
       </div>
 
       {/*/ Right side: logo */}
-      <div className="w-[40%] h-full flex flex-col justify-center items-center">
+      <div className="h-full flex flex-col justify-center items-center">
         <div className="w-full h-full  bg-medium-orange rounded-l-4xl flex flex-col justify-center items-center">
           <img
             className="w-[60%] h-[60%] object-contain p-10 mb-40"
@@ -125,19 +122,3 @@ const Login = observer(() => {
 });
 
 export default Login;
-
-// Inline style objects
-const styles: { [key: string]: React.CSSProperties } = {
-  pageContainer: {
-    position: "relative",
-    width: "100vw",
-    height: "100vh",
-    margin: 0,
-    padding: 0,
-    overflow: "hidden",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "start",
-    textAlign: "start",
-  },
-};

From 8a2d2220cea588c15351db57b43d76d2bb15844b Mon Sep 17 00:00:00 2001
From: lyannne <xu.ly@northeastern.edu>
Date: Wed, 4 Feb 2026 23:38:00 -0500
Subject: [PATCH 2/9] register styles changes

---
 frontend/src/Register.tsx | 68 ++++++++++++---------------------------
 1 file changed, 20 insertions(+), 48 deletions(-)

diff --git a/frontend/src/Register.tsx b/frontend/src/Register.tsx
index 771c7a9..085a288 100644
--- a/frontend/src/Register.tsx
+++ b/frontend/src/Register.tsx
@@ -89,8 +89,8 @@ const Register = observer(() => {
   };
 
   return (
-    <div className="bg-white grid grid-cols-2" style={styles.pageContainer}>
-      <div className="sm:w-3/4 lg:w-[60%] h-full py-20 px-20 flex flex-col justify-center items-start">
+    <div className="bg-white grid grid-cols-[60%_40%] w-screen h-screen relative m-0 p-0 overflow-hidden flex justify-center items-start text-start">
+      <div className="h-full py-20 px-20 flex flex-col justify-center items-start">
         {/*/ Left side: Registration form */}
         <div className="mb-4">
           <h1 className="text-[32px]">Get Started Now</h1>
@@ -111,7 +111,6 @@ const Register = observer(() => {
                   required
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="Enter your username"
-                  style={styles.inputContainer}
                   className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
@@ -129,12 +128,11 @@ const Register = observer(() => {
                   required
                   onChange={(e) => setEmail(e.target.value)}
                   placeholder="Enter your email"
-                  style={
+                  className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
                     failure.item === "email"
-                      ? styles.errorItem
-                      : styles.inputContainer
-                  }
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
+                      ? "border-[#D33221]"
+                      : "border-medium-gray"
+                  }`}
                 />
               </div>
             </div>
@@ -151,12 +149,11 @@ const Register = observer(() => {
                   required
                   onChange={(e) => handlePassword(e.target.value)}
                   placeholder="Enter your password"
-                  style={
+                  className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
                     failure.item === "password"
-                      ? styles.errorItem
-                      : styles.inputContainer
-                  }
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
+                      ? "border-[#D33221]"
+                      : "border-medium-gray"
+                  }`}
                 />
               </div>
             </div>
@@ -173,20 +170,22 @@ const Register = observer(() => {
                   onChange={(e) => handlePasswordMatch(e.target.value)}
                   required
                   placeholder="Re-enter your password"
-                  style={
+                  className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
                     failure.item === "password"
-                      ? styles.errorItem
-                      : styles.inputContainer
-                  }
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
+                      ? "border-[#D33221]"
+                      : "border-medium-gray"
+                  }`}
                 />
               </div>
             </div>
           </div>
           <div className="items-center">
             <div
-              style={failure.state ? styles.error : styles.warning}
-              className={`min-h-28 mt-4 text-sm rounded-md flex items-center justify-center p-4 whitespace-pre-line text-left`}
+              className={`min-h-28 mt-4 text-sm rounded-md flex items-center justify-center p-4 whitespace-pre-line text-left ${
+                failure.state
+                  ? "text-[#D33221] bg-[#FFA399]"
+                  : "text-[#616161] bg-[#E7E7E7]"
+              }`}
             >
               {failure.state ? failure.message : defaultPasswordMessage}
             </div>
@@ -195,7 +194,6 @@ const Register = observer(() => {
           <button
             type="submit"
             className="w-full block mt-8 min-w-0 rounded-md grow bg-dark-orange text-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500"
-            style={{ ...styles.button, ...styles.helloButton }}
           >
             Register
           </button>
@@ -217,7 +215,7 @@ const Register = observer(() => {
         </form>
       </div>
       {/*/ Right side: logo */}
-      <div className="sm:w-1/4 lg:w-[40%] h-full flex flex-col justify-center items-center">
+      <div className="h-full flex flex-col justify-center items-center">
         <div className="w-full h-full  bg-medium-orange rounded-l-4xl flex flex-col justify-center items-center">
           <img
             className="w-[60%] h-[60%] object-contain p-10 mb-40"
@@ -231,29 +229,3 @@ const Register = observer(() => {
 });
 
 export default Register;
-
-// Inline style objects
-const styles: { [key: string]: React.CSSProperties } = {
-  pageContainer: {
-    position: "relative",
-    width: "100%",
-    height: "100vh",
-    margin: 0,
-    padding: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "start",
-    textAlign: "start",
-  },
-  warning: {
-    color: "#616161",
-    backgroundColor: "#E7E7E7",
-  },
-  error: {
-    color: "#D33221",
-    backgroundColor: "#FFA399",
-  },
-  errorItem: {
-    borderColor: "#D33221",
-  },
-};

From f191c1b23dad94b7f0dc3c518cf29a62711e806e Mon Sep 17 00:00:00 2001
From: lyannne <xu.ly@northeastern.edu>
Date: Wed, 4 Feb 2026 23:41:09 -0500
Subject: [PATCH 3/9] register landing file

---
 frontend/src/RegisterLanding.tsx | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/frontend/src/RegisterLanding.tsx b/frontend/src/RegisterLanding.tsx
index 3562e75..8bbb7e9 100644
--- a/frontend/src/RegisterLanding.tsx
+++ b/frontend/src/RegisterLanding.tsx
@@ -9,7 +9,7 @@ import { useAuthContext } from "./context/auth/authContext";
 const RegisterLanding = () => {
   const {logout} = useAuthContext();
   return (
-    <div className="bg-white grid grid-cols-2" style={styles.pageContainer}>
+    <div className="bg-white grid grid-cols-2 position-relative w-screen h-screen m-0 p-0 overflow-hidden flex justify-center items-start text-start">
       <div className="w-[35%] h-full flex flex-col justify-center items-center pb-32">
         <div className="w-full h-[70%] bg-medium-orange rounded-r-4xl flex flex-col justify-center items-center">
           <img
@@ -51,19 +51,3 @@ const RegisterLanding = () => {
 };
 
 export default RegisterLanding;
-
-// Inline style objects
-const styles: { [key: string]: React.CSSProperties } = {
-  pageContainer: {
-    position: "relative",
-    width: "100vw",
-    height: "100vh",
-    margin: 0,
-    padding: 0,
-    overflow: "hidden",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "start",
-    textAlign: "start",
-  },
-};

From 5de07000ce6fa3368c8227fa6e4bbe0e770eb343 Mon Sep 17 00:00:00 2001
From: lyannne <xu.ly@northeastern.edu>
Date: Wed, 4 Feb 2026 23:45:52 -0500
Subject: [PATCH 4/9] register landing fixed percentage widths

---
 frontend/src/RegisterLanding.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/RegisterLanding.tsx b/frontend/src/RegisterLanding.tsx
index 8bbb7e9..c7ce6f7 100644
--- a/frontend/src/RegisterLanding.tsx
+++ b/frontend/src/RegisterLanding.tsx
@@ -9,8 +9,8 @@ import { useAuthContext } from "./context/auth/authContext";
 const RegisterLanding = () => {
   const {logout} = useAuthContext();
   return (
-    <div className="bg-white grid grid-cols-2 position-relative w-screen h-screen m-0 p-0 overflow-hidden flex justify-center items-start text-start">
-      <div className="w-[35%] h-full flex flex-col justify-center items-center pb-32">
+    <div className="bg-white grid grid-cols-[35%_65%] position-relative w-screen h-screen m-0 p-0 overflow-hidden flex justify-center items-start text-start">
+      <div className="h-full flex flex-col justify-center items-center pb-32">
         <div className="w-full h-[70%] bg-medium-orange rounded-r-4xl flex flex-col justify-center items-center">
           <img
             className="w-[90%] h-[90%] object-contain p-20 ml-10"
@@ -19,7 +19,7 @@ const RegisterLanding = () => {
           />
         </div>
       </div>
-      <div className="w-[65%] h-full py-20 px-24 flex flex-col justify-center items-start mb-32">
+      <div className="h-full py-20 px-24 flex flex-col justify-center items-start mb-32">
         <div className="mb-24">
           <h1 className="text-[40px] pb-8 font-bold">
             Account registration successful!
@@ -29,6 +29,7 @@ const RegisterLanding = () => {
             our team. You'll receive an email notification once your account has
             been approved. Please try logging in after receiving approval.
           </h2>
+          <br />
           <Link to="/login">
                     <button
                       style={{

From 015fa7e0eb64168dbc69f95aa52ba5175b42201a Mon Sep 17 00:00:00 2001
From: lyannne <xu.ly@northeastern.edu>
Date: Thu, 5 Feb 2026 01:07:44 -0500
Subject: [PATCH 5/9] deleted files, fixed frontend testing error due to object
 structure

---
 frontend/src/Account.tsx                  |  97 ------------
 frontend/src/Profile.tsx                  | 175 ----------------------
 frontend/tests/GrantCalculations.test.tsx |  16 +-
 3 files changed, 8 insertions(+), 280 deletions(-)
 delete mode 100644 frontend/src/Account.tsx
 delete mode 100644 frontend/src/Profile.tsx

diff --git a/frontend/src/Account.tsx b/frontend/src/Account.tsx
deleted file mode 100644
index d1ecfc0..0000000
--- a/frontend/src/Account.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react-lite";
-import { useAuthContext } from "./context/auth/authContext";
-import Profile from "./Profile";
-
-/**
- * Account page that renders the Profile component as a nested child
- * Provides navigation options for the user to logout, or continue into the app.
- */
-const Account = observer(() => {
-  const { user } = useAuthContext();
-
-  return (
-    <div style={styles.pageContainer}>
-      {/* Blurred background layer */}
-      <div style={styles.backgroundLayer} />
-
-      {/* Foreground container */}
-      <div style={styles.foregroundContent}>
-        <div style={styles.accountContainer}>
-          <h1 style={styles.heading}>Welcome, {user?.userId}</h1>
-          <Profile />
-        </div>
-      </div>
-    </div>
-  );
-});
-
-export default Account;
-
-const styles: { [key: string]: React.CSSProperties } = {
-  pageContainer: {
-    position: "relative",
-    width: "100vw",
-    height: "100vh",
-    margin: 0,
-    padding: 0,
-    overflow: "hidden",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  backgroundLayer: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    zIndex: 0,
-    background: `
-    linear-gradient(135deg,
-     rgb(164, 183, 251) 0%,
-      rgb(212, 240, 255) 47%, rgb(111, 147, 237) 96%)
-    `,
-    backgroundSize: "cover",
-    backgroundBlendMode: "overlay",
-    filter: "blur(7px)",
-  },
-  foregroundContent: {
-    position: "relative",
-    zIndex: 1,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-  },
-  accountContainer: {
-    width: "100%",
-    padding: "3rem",
-    backgroundColor: "rgba(255, 255, 255, 0.8)", // partially transparent
-    borderRadius: "8px",
-    boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
-    display: "flex",
-    flexDirection: "column",
-  },
-  topRow: {
-    display: "flex",
-    width: "100%",
-    justifyContent: "flex-end",
-    marginBottom: "1.5rem",
-  },
-  navButton: {
-    marginLeft: "0.5rem",
-    padding: "1.2rem",
-    fontSize: "1.2rem",
-    borderRadius: "4px",
-    cursor: "pointer",
-    backgroundColor: "#0b303b",
-    border: "1px solid #ccc",
-    color: "#fff",
-  },
-  heading: {
-    marginBottom: "2rem",
-    fontSize: "2.2rem",
-    fontWeight: 500,
-    textAlign: "center",
-  },
-};
diff --git a/frontend/src/Profile.tsx b/frontend/src/Profile.tsx
deleted file mode 100644
index 641db37..0000000
--- a/frontend/src/Profile.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import React, { useState } from "react";
-import { observer } from "mobx-react-lite";
-import { useAuthContext } from "./context/auth/authContext";
-import { updateUserProfile } from "./external/bcanSatchel/actions";
-import { toJS } from 'mobx';
-import { Link } from "react-router-dom";
-import { api } from "./api";
-import { UserStatus } from "../../middle-layer/types/UserStatus";
-
-/**
- * Current logged in user's profile
- * Information can be updated for the profile here.
- */
-const Profile = observer(() => {
-  const { user } = useAuthContext();
-  const [email, setEmail] = useState(user?.email || "");
-  const [position, setPosition] = useState(user?.position || "");
-
-  console.log(toJS(user))
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-  
-    try {
-      const response = await api("/auth/update-profile", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          // TODO: Bearer token guarded by Auth
-          // Authorization: `Bearer ${user?.accessToken ?? ""}`,
-        },
-        body: JSON.stringify({
-          username: user?.userId,
-          email,
-          position: position,
-        }),
-      });
-  
-      if (!response.ok) {
-        const errorData = await response.json();
-        alert(errorData.message || "Failed to update profile.");
-        return;
-      }
-  
-      // Optionally parse the updated item returned
-      // const updatedData = await response.json();
-  
-      // Update local store so changes reflect immediately in the UI
-      // Conditional update semantics based on valid non-null 'User' object available
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      user && updateUserProfile({
-        ...user,
-        email,
-        position: position as UserStatus,
-      });
-  
-      alert("Profile updated successfully.");
-    } catch (error) {
-      console.error("Error updating profile:", error);
-      alert("An error occurred while updating your profile.");
-    }
-  };  
-
-  return (
-    <form onSubmit={handleSubmit} style={styles.formContainer}>
-      <h2 style={styles.heading}>Profile</h2>
-
-      {/* Username (read-only) */}
-      <div style={styles.field}>
-        <label style={styles.label}>Username:</label>
-        <span style={styles.readonlyValue}>{user?.userId}</span>
-      </div>
-
-      {/* Email */}
-      <div style={styles.field}>
-        <label style={styles.label}>Email:</label>
-        <input
-          type="email"
-          style={styles.input}
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-      </div>
-
-      {/* Biography */}
-      <div style={styles.field}>
-        <label style={styles.label}>Position/Role:</label>
-        <textarea
-          style={styles.textarea}
-          value={position}
-          onChange={(e) => setPosition(e.target.value)}
-        />
-      </div>
-      {/* Account Page Action Buttons */}
-      <div style={styles.actionButtons}>
-      <button type="submit" style={styles.button}>
-        Save Changes
-      </button>
-      <Link to="/main" style={{ textDecoration: "none" }}>
-        <button style={styles.button}>Home</button>
-      </Link>
-      </div>
-    </form>
-  );
-});
-
-export default Profile;
-
-// Style objects
-const styles: { [key: string]: React.CSSProperties } = {
-  formContainer: {
-    width: "500px",
-    padding: "2rem",
-    backgroundColor: "#ffffff",
-    borderRadius: "8px",
-    boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
-    display: "flex",
-    flexDirection: "column",
-    margin: "0 auto",
-  },
-  heading: {
-    marginBottom: "1.5rem",
-    fontSize: "2rem",
-    fontWeight: 500,
-    textAlign: "center",
-  },
-  field: {
-    marginBottom: "1.5rem",
-  },
-  label: {
-    display: "block",
-    marginBottom: "0.5rem",
-    fontSize: "1.2rem",
-    fontWeight: 500,
-  },
-  readonlyValue: {
-    marginLeft: "0.5rem",
-    fontSize: "1.2rem",
-  },
-  input: {
-    width: "100%",
-    padding: "1rem",
-    fontSize: "1.2rem",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    boxSizing: "border-box",
-    color: "lightgray",
-  },
-  textarea: {
-    width: "100%",
-    padding: "1rem",
-    fontSize: "1.2rem",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    boxSizing: "border-box",
-    minHeight: "120px",
-    color: "lightgray",
-  },
-  button: {
-    padding: "1rem",
-    fontSize: "1.1rem",
-    backgroundColor: "#0b303b",
-    color: "#fff",
-    border: "none",
-    borderRadius: "4px",
-    cursor: "pointer",
-    alignSelf: "flex-start",
-  },
-  actionButtons: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center"
-  }
-};
diff --git a/frontend/tests/GrantCalculations.test.tsx b/frontend/tests/GrantCalculations.test.tsx
index 3743518..21a1e3b 100644
--- a/frontend/tests/GrantCalculations.test.tsx
+++ b/frontend/tests/GrantCalculations.test.tsx
@@ -97,16 +97,16 @@ describe("Grant Calculations", () => {
   it("should aggregate money by year without grouping", () => {
     const result = aggregateMoneyGrantsByYear(mockGrants);
     assert.deepEqual(result, [
-      { year: 2024, All: 1000 },
-      { year: 2025, All: 6000 },
+      { year: 2024, data: { All: 1000 } },
+      { year: 2025, data: { All: 6000 } },
     ]);
   });
 
   it("should aggregate money by year by status", () => {
     const result = aggregateMoneyGrantsByYear(mockGrants, "status");
     assert.deepEqual(result, [
-      { year: 2024, Potential: 1000 },
-      { year: 2025, Active: 2000, Potential: 4000 },
+      { year: 2024, data: { Potential: 1000 } },
+      { year: 2025, data: { Active: 2000, Potential: 4000 } },
     ]);
   });
 
@@ -118,16 +118,16 @@ describe("Grant Calculations", () => {
   it("should count by year without grouping", () => {
     const result = aggregateCountGrantsByYear(mockGrants);
     assert.deepEqual(result, [
-      { year: 2024, All: 1 },
-      { year: 2025, All: 3 },
+      { year: 2024, data: { All: 1 } },
+      { year: 2025, data: { All: 3 } },
     ]);
   });
 
   it("should count by year by status", () => {
     const result = aggregateCountGrantsByYear(mockGrants, "status");
     assert.deepEqual(result, [
-      { year: 2024, Potential: 1 },
-      { year: 2025, Active: 1, Potential: 2 },
+      { year: 2024, data: { Potential: 1 } },
+      { year: 2025, data: { Active: 1, Potential: 2 } },
     ]);
   });
 

From 7f8a5697749f5d4abd2a7991172b7ffb8fac1945 Mon Sep 17 00:00:00 2001
From: lyannne <xu.ly@northeastern.edu>
Date: Thu, 5 Feb 2026 01:13:55 -0500
Subject: [PATCH 6/9] changed line break to top margin on component

---
 frontend/src/RegisterLanding.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/RegisterLanding.tsx b/frontend/src/RegisterLanding.tsx
index c7ce6f7..488e450 100644
--- a/frontend/src/RegisterLanding.tsx
+++ b/frontend/src/RegisterLanding.tsx
@@ -29,13 +29,13 @@ const RegisterLanding = () => {
             our team. You'll receive an email notification once your account has
             been approved. Please try logging in after receiving approval.
           </h2>
-          <br />
           <Link to="/login">
                     <button
                       style={{
                         backgroundColor: ButtonColorOption.ORANGE ,
                         color: 'black',
-                        borderStyle: 'solid', borderColor: 'black', borderWidth: '1px'
+                        borderStyle: 'solid', borderColor: 'black', borderWidth: '1px',
+                        marginTop: '20px',
                       }}
                       className="py-2 px-4 rounded"
                       onClick={() => {

From d49b9f2514fb7fda84ec06f046de14d19d3f48d2 Mon Sep 17 00:00:00 2001
From: lyannne <xu.ly@northeastern.edu>
Date: Thu, 5 Feb 2026 02:14:49 -0500
Subject: [PATCH 7/9] removed unnecessary tailwind styles

---
 frontend/src/Login.tsx           | 2 +-
 frontend/src/Register.tsx        | 2 +-
 frontend/src/RegisterLanding.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx
index fa43e8b..282bbd9 100644
--- a/frontend/src/Login.tsx
+++ b/frontend/src/Login.tsx
@@ -28,7 +28,7 @@ const Login = observer(() => {
   };
 
   return (
-    <div className="bg-white grid grid-cols-[60%_40%] w-screen h-screen relative m-0 p-0 overflow-hidden flex justify-center items-start text-start">
+    <div className="bg-white grid grid-cols-[60%_40%] w-screen h-screen relative m-0 p-0 overflow-hidden text-start">
       {/*/ Left side: Registration form */}
       <div className="h-full py-20 px-24 flex flex-col justify-center items-start">
         <div className="mb-12">
diff --git a/frontend/src/Register.tsx b/frontend/src/Register.tsx
index 085a288..aa808bc 100644
--- a/frontend/src/Register.tsx
+++ b/frontend/src/Register.tsx
@@ -89,7 +89,7 @@ const Register = observer(() => {
   };
 
   return (
-    <div className="bg-white grid grid-cols-[60%_40%] w-screen h-screen relative m-0 p-0 overflow-hidden flex justify-center items-start text-start">
+    <div className="bg-white grid grid-cols-[60%_40%] w-screen h-screen relative m-0 p-0 overflow-hidden text-start">
       <div className="h-full py-20 px-20 flex flex-col justify-center items-start">
         {/*/ Left side: Registration form */}
         <div className="mb-4">
diff --git a/frontend/src/RegisterLanding.tsx b/frontend/src/RegisterLanding.tsx
index 488e450..4c8cb0a 100644
--- a/frontend/src/RegisterLanding.tsx
+++ b/frontend/src/RegisterLanding.tsx
@@ -9,7 +9,7 @@ import { useAuthContext } from "./context/auth/authContext";
 const RegisterLanding = () => {
   const {logout} = useAuthContext();
   return (
-    <div className="bg-white grid grid-cols-[35%_65%] position-relative w-screen h-screen m-0 p-0 overflow-hidden flex justify-center items-start text-start">
+    <div className="bg-white grid grid-cols-[35%_65%] position-relative w-screen h-screen m-0 p-0 overflow-hidden text-start">
       <div className="h-full flex flex-col justify-center items-center pb-32">
         <div className="w-full h-[70%] bg-medium-orange rounded-r-4xl flex flex-col justify-center items-center">
           <img

From afceb968944816e37bb69de024f68e49da4e2144 Mon Sep 17 00:00:00 2001
From: lyannne <xu.ly@northeastern.edu>
Date: Thu, 5 Feb 2026 02:20:45 -0500
Subject: [PATCH 8/9] button css fixes

---
 frontend/src/RegisterLanding.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/frontend/src/RegisterLanding.tsx b/frontend/src/RegisterLanding.tsx
index 4c8cb0a..f95715a 100644
--- a/frontend/src/RegisterLanding.tsx
+++ b/frontend/src/RegisterLanding.tsx
@@ -9,7 +9,7 @@ import { useAuthContext } from "./context/auth/authContext";
 const RegisterLanding = () => {
   const {logout} = useAuthContext();
   return (
-    <div className="bg-white grid grid-cols-[35%_65%] position-relative w-screen h-screen m-0 p-0 overflow-hidden text-start">
+    <div className="bg-white grid grid-cols-[35%_65%] relative w-screen h-screen m-0 p-0 overflow-hidden text-start">
       <div className="h-full flex flex-col justify-center items-center pb-32">
         <div className="w-full h-[70%] bg-medium-orange rounded-r-4xl flex flex-col justify-center items-center">
           <img
@@ -31,13 +31,7 @@ const RegisterLanding = () => {
           </h2>
           <Link to="/login">
                     <button
-                      style={{
-                        backgroundColor: ButtonColorOption.ORANGE ,
-                        color: 'black',
-                        borderStyle: 'solid', borderColor: 'black', borderWidth: '1px',
-                        marginTop: '20px',
-                      }}
-                      className="py-2 px-4 rounded"
+                      className={`py-2 px-4 rounded bg-[${ButtonColorOption.ORANGE}] text-black border border-black mt-5`}
                       onClick={() => {
                         logout()
                       }}

From 700be0573e0242bafb6010a16babe90a946a13b4 Mon Sep 17 00:00:00 2001
From: prooflesben <prooflesben@gmail.com>
Date: Thu, 5 Feb 2026 12:06:33 -0500
Subject: [PATCH 9/9] Changed css styling for the login button

---
 frontend/src/RegisterLanding.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/RegisterLanding.tsx b/frontend/src/RegisterLanding.tsx
index 3562e75..f110b1a 100644
--- a/frontend/src/RegisterLanding.tsx
+++ b/frontend/src/RegisterLanding.tsx
@@ -31,11 +31,7 @@ const RegisterLanding = () => {
           </h2>
           <Link to="/login">
                     <button
-                      style={{
-                        backgroundColor: ButtonColorOption.ORANGE ,
-                        color: 'black',
-                        borderStyle: 'solid', borderColor: 'black', borderWidth: '1px'
-                      }}
+                      style={styles.loginButton}
                       className="py-2 px-4 rounded"
                       onClick={() => {
                         logout()
@@ -66,4 +62,11 @@ const styles: { [key: string]: React.CSSProperties } = {
     alignItems: "start",
     textAlign: "start",
   },
+  loginButton :{
+    backgroundColor: ButtonColorOption.ORANGE,
+    color: 'black',
+    borderStyle: 'solid',
+    borderColor: 'black',
+    borderWidth: '1px'
+  }
 };