From 4ba6dfa7be99c786ca1ce5ef88f6e6dc12737602 Mon Sep 17 00:00:00 2001
From: Mann Patel <130435633+MannPatel0@users.noreply.github.com>
Date: Mon, 21 Apr 2025 22:46:39 -0600
Subject: [PATCH] UI Color update

---
 README.md                                     |   3 +-
 frontend/src/App.jsx                          |  42 +++++------
 frontend/src/components/CategoryForm.jsx      |   8 +--
 frontend/src/components/DashboardNav.jsx      |   1 +
 frontend/src/components/FloatingAlert.jsx     |   2 +-
 frontend/src/components/Navbar.jsx            |   2 +-
 frontend/src/components/Pagination.jsx        |   8 +--
 frontend/src/components/UserDropdown.jsx      |   2 +-
 frontend/src/pages/Dashboard.jsx              |  22 +++---
 frontend/src/pages/Favorites.jsx              |  56 ++-------------
 frontend/src/pages/Home.jsx                   |  62 ++--------------
 frontend/src/pages/ProductDetail.jsx          |  24 +++----
 frontend/src/pages/SearchPage.jsx             |  57 ++-------------
 frontend/src/pages/Selling.jsx                |  33 +++++----
 frontend/src/pages/Settings.jsx               |  21 +++---
 frontend/src/pages/Transactions.jsx           |  66 +++---------------
 .../__pycache__/app.cpython-313.pyc           | Bin 11849 -> 11849 bytes
 17 files changed, 109 insertions(+), 300 deletions(-)

diff --git a/README.md b/README.md
index b506b12..c40db75 100644
--- a/README.md
+++ b/README.md
@@ -25,12 +25,13 @@
     1. python3 server.py    #Start The Server
 ```
 ---
+
 ### Recommendation system
 1. Install the dependencies
 ```Bash
   pip install mysql.connector
 ```
-
+---
 
 ### Database
 1. MySql Version 9.2.0
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8543792..6569551 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -105,7 +105,7 @@ function App() {
           body: JSON.stringify({
             userId: user.ID,
           }),
-        }
+        },
       );
 
       if (!response.ok) {
@@ -117,14 +117,14 @@ function App() {
       if (result.success) {
         console.log(
           "Recommendations generated successfully:",
-          result.recommendations
+          result.recommendations,
         );
         setRecommendations(result.recommendations);
 
         // Store recommendations in session storage for access across the app
         sessionStorage.setItem(
           "userRecommendations",
-          JSON.stringify(result.recommendations)
+          JSON.stringify(result.recommendations),
         );
       } else {
         console.error("Error generating recommendations:", result.message);
@@ -178,7 +178,7 @@ function App() {
             email: userData.email,
             // Add any other required fields
           }),
-        }
+        },
       );
 
       if (!response.ok) {
@@ -227,7 +227,7 @@ function App() {
             email: tempUserData.email,
             code: code,
           }),
-        }
+        },
       );
 
       if (!response.ok) {
@@ -271,7 +271,7 @@ function App() {
             "Content-Type": "application/json",
           },
           body: JSON.stringify(userData),
-        }
+        },
       );
 
       if (!response.ok) {
@@ -382,7 +382,7 @@ function App() {
               email: formValues.email,
               password: formValues.password,
             }),
-          }
+          },
         );
 
         if (!response.ok) {
@@ -517,7 +517,7 @@ function App() {
   // Loading overlay component
   const LoadingOverlay = () => (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="animate-spin rounded-full h-12 w-12 border-4 border-green-500 border-t-transparent"></div>
+      <div className="animate-spin rounded-full h-12 w-12 border-4 border-emerald-600 border-t-transparent"></div>
     </div>
   );
 
@@ -584,7 +584,7 @@ function App() {
                       id="name"
                       name="name"
                       placeholder="Enter your name"
-                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
                       required={isSignUp}
                     />
                   </div>
@@ -603,7 +603,7 @@ function App() {
                       id="ucid"
                       name="ucid"
                       placeholder="1234567"
-                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
                       required={isSignUp}
                     />
                   </div>
@@ -621,7 +621,7 @@ function App() {
                     id="email"
                     name="email"
                     placeholder="your.email@ucalgary.ca"
-                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
                     required
                   />
                 </div>
@@ -639,7 +639,7 @@ function App() {
                       id="phone"
                       name="phone"
                       placeholder="+1(123)456 7890"
-                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
                       required={isSignUp}
                     />
                   </div>
@@ -658,7 +658,7 @@ function App() {
                       id="address"
                       name="address"
                       placeholder="Your address"
-                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
                       required={isSignUp}
                     />
                   </div>
@@ -680,7 +680,7 @@ function App() {
                         ? "Create a secure password"
                         : "Enter your password"
                     }
-                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
                     required
                   />
                 </div>
@@ -689,13 +689,13 @@ function App() {
                   <button
                     type="submit"
                     disabled={isLoading}
-                    className="w-full px-6 py-2 text-base font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors disabled:bg-green-300"
+                    className="w-full px-6 py-2 text-base font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 transition-colors disabled:bg-emerald-300"
                   >
                     {isLoading
                       ? "Please wait..."
                       : isSignUp
-                      ? "Create Account"
-                      : "Sign In"}
+                        ? "Create Account"
+                        : "Sign In"}
                   </button>
                 </div>
               </form>
@@ -716,7 +716,7 @@ function App() {
                     id="verificationCode"
                     name="verificationCode"
                     placeholder="Enter the 6-digit code"
-                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
                     required
                   />
                   <p className="mt-1 text-xs text-gray-500">
@@ -728,7 +728,7 @@ function App() {
                   <button
                     type="submit"
                     disabled={isLoading}
-                    className="w-full px-6 py-2 text-base font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors disabled:bg-green-300"
+                    className="w-full px-6 py-2 text-base font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 transition-colors disabled:bg-emerald-300"
                   >
                     {isLoading ? "Please wait..." : "Verify Code"}
                   </button>
@@ -746,7 +746,7 @@ function App() {
                     type="button"
                     onClick={handleResendCode}
                     disabled={isLoading}
-                    className="text-sm text-green-500 hover:text-green-700"
+                    className="text-sm text-emerald-600 hover:text-emerald-700"
                   >
                     Resend code
                   </button>
@@ -764,7 +764,7 @@ function App() {
                   <button
                     onClick={toggleAuthMode}
                     type="button"
-                    className="text-green-500 font-medium hover:text-green-700"
+                    className="text-emerald-600 font-medium hover:text-emerald-700"
                   >
                     {isSignUp ? "Sign in" : "Sign up"}
                   </button>
diff --git a/frontend/src/components/CategoryForm.jsx b/frontend/src/components/CategoryForm.jsx
index 08d7e86..21652cb 100644
--- a/frontend/src/components/CategoryForm.jsx
+++ b/frontend/src/components/CategoryForm.jsx
@@ -22,7 +22,7 @@ export default function CategoryForm({ visible, onAddCategory }) {
           .classList.remove("opacity-0", "bg-red-200", "text-red-500");
         document
           .getElementById("noti")
-          .classList.add("bg-green-200", "text-green-800");
+          .classList.add("bg-emerald-200", "text-emerald-800");
         document.getElementById("noti").innerHTML = `${message.message}`;
         setCategory("");
         onAddCategory();
@@ -42,18 +42,18 @@ export default function CategoryForm({ visible, onAddCategory }) {
 
   return (
     <form onSubmit={handleSubmit} action="" className="flex p-2 items-center">
-      <label htmlFor="category" className="text-green-700">
+      <label htmlFor="category" className="text-emerald-700">
         Category:
       </label>
       <input
         type="text"
-        className="border border-green-700 ml-2 rounded-sm focus:bg-green-100 text-green-900"
+        className="border border-emerald-700 ml-2 rounded-sm focus:bg-emerald-100 text-emerald-900"
         name="category"
         id="category"
         onChange={handleChange}
         value={category}
       />
-      <button type="submit" className="text-2xl pl-1 text-green-700">
+      <button type="submit" className="text-2xl pl-1 text-emerald-700">
         <MdAddBox className="text-3xl" />
       </button>
       <p
diff --git a/frontend/src/components/DashboardNav.jsx b/frontend/src/components/DashboardNav.jsx
index 2013901..a880956 100644
--- a/frontend/src/components/DashboardNav.jsx
+++ b/frontend/src/components/DashboardNav.jsx
@@ -3,6 +3,7 @@ import { FaArrowLeft } from "react-icons/fa";
 export default function DashboardNav({ handleCloseAdminDashboard }) {
   return (
     <div className="w-48 min-w-[12rem] bg-gray-100 text-emerald-600 flex flex-col p-4 shadow-md">
+      <h2 className="text-lg font-semibold mb-4">Admin Dashboard</h2>
       <button
         onClick={handleCloseAdminDashboard}
         className="flex items-center gap-2 text-sm font-medium hover:text-emerald-700 underline underline-offset-4 transition"
diff --git a/frontend/src/components/FloatingAlert.jsx b/frontend/src/components/FloatingAlert.jsx
index c3f0229..6523fda 100644
--- a/frontend/src/components/FloatingAlert.jsx
+++ b/frontend/src/components/FloatingAlert.jsx
@@ -11,7 +11,7 @@ const FloatingAlert = ({ message, onClose, duration = 3000 }) => {
   }, [onClose, duration]);
 
   return (
-    <div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-emerald-500 text-white px-4 py-2 rounded-xl shadow-lg z-50 text-center">
+    <div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-emerald-600 text-white px-4 py-2 rounded-xl shadow-lg z-50 text-center">
       {message}
     </div>
   );
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 1c40ad8..694dcfe 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -35,7 +35,7 @@ const Navbar = ({ onLogout, userName, isAdmin, handleShowAdminDashboard }) => {
                 alt="Campus Plug"
                 className="h-8 px-2"
               />
-              <span className="hidden md:block text-emerald-600 font-bold text-xl">
+              <span className="hidden md:block text-emerald-700 font-bold text-xl">
                 Campus Plug
               </span>
             </Link>
diff --git a/frontend/src/components/Pagination.jsx b/frontend/src/components/Pagination.jsx
index ca14f76..8c9ad14 100644
--- a/frontend/src/components/Pagination.jsx
+++ b/frontend/src/components/Pagination.jsx
@@ -32,7 +32,7 @@ export default function Pagination({ pageNum, onChange }) {
               onClick={() => {
                 handleTogglePage("previous");
               }}
-              className=" flex items-center justify-center px-3 h-8 ms-0 leading-tight border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 text-white bg-green-700 border border-gray-300 hover:bg-green-600 hover:text-white"
+              className=" flex items-center justify-center px-3 h-8 ms-0 leading-tight border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 text-white bg-emerald-700 border border-gray-300 hover:bg-emerald-700 hover:text-white"
             >
               <span className="sr-only">Previous</span>
               <svg
@@ -56,9 +56,9 @@ export default function Pagination({ pageNum, onChange }) {
             <li key={page}>
               <NavLink
                 className={`${
-                  currentPage == page ? "bg-green-600" : "bg-green-700"
+                  currentPage == page ? "bg-emerald-700" : "bg-emerald-700"
                 } +
-                  " flex items-center justify-center px-3 h-8 leading-tight text-white  border border-gray-300 hover:bg-green-600 hover:text-white"`}
+                  " flex items-center justify-center px-3 h-8 leading-tight text-white  border border-gray-300 hover:bg-emerald-700 hover:text-white"`}
                 onClick={() => {
                   handleClick(page);
                 }}
@@ -72,7 +72,7 @@ export default function Pagination({ pageNum, onChange }) {
               onClick={() => {
                 handleTogglePage("next");
               }}
-              className="flex items-center justify-center px-3 h-8 leading-tight border border-gray-300 rounded-e-lg text-white bg-green-700 border border-gray-300 hover:bg-green-600 hover:text-white"
+              className="flex items-center justify-center px-3 h-8 leading-tight border border-gray-300 rounded-e-lg text-white bg-emerald-700 border border-gray-300 hover:bg-emerald-700 hover:text-white"
             >
               <span className="sr-only">Next</span>
               <svg
diff --git a/frontend/src/components/UserDropdown.jsx b/frontend/src/components/UserDropdown.jsx
index cf3cb1f..9ccf634 100644
--- a/frontend/src/components/UserDropdown.jsx
+++ b/frontend/src/components/UserDropdown.jsx
@@ -55,7 +55,7 @@ const UserDropdown = ({
         onClick={toggleDropdown}
       >
         <div className="h-8 w-8 rounded-full bg-emerald-100 flex items-center justify-center">
-          <User className="h-5 w-5 text-emerald-600" />
+          <User className="h-5 w-5 text-emerald-700" />
         </div>
       </button>
 
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index dd951f4..d5ae753 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -18,7 +18,7 @@ import { useNavigate } from "react-router-dom";
 // Spinner Component
 const Spinner = () => (
   <div className="flex justify-center items-center h-40 w-full">
-    <div className="w-12 h-12 border-4 border-green-500 border-dashed rounded-full animate-spin"></div>
+    <div className="w-12 h-12 border-4 border-emerald-600 border-dashed rounded-full animate-spin"></div>
   </div>
 );
 
@@ -87,7 +87,7 @@ const Dashboard = ({
         })
         .finally(() => setLoading(false));
     },
-    [fetchDataFn]
+    [fetchDataFn],
   );
 
   const handleRemove = (id) => {
@@ -116,7 +116,7 @@ const Dashboard = ({
     <div className="w-full mt-6">
       <div className="flex flex-col md:flex-row justify-between items-center mb-4 w-full">
         <h2 className="text-xl font-semibold text-gray-700 mb-2 md:mb-0">
-          Total: <span className="text-green-600">{total}</span>
+          Total: <span className="text-emerald-700">{total}</span>
         </h2>
         {headerAction && <div>{headerAction}</div>}
       </div>
@@ -124,7 +124,7 @@ const Dashboard = ({
       {items.length > 0 ? (
         <div className="w-full overflow-x-auto bg-white rounded-lg shadow">
           <table className="min-w-full divide-y divide-gray-200 table-fixed">
-            <thead className="bg-green-600">
+            <thead className="bg-emerald-700">
               <tr>
                 {columns.map((col) => (
                   <th
@@ -296,7 +296,7 @@ export default function AdminDashboardTabs() {
             headerAction={
               <button
                 onClick={toggleForm}
-                className="flex items-center bg-green-500 rounded-md px-4 py-2 text-white text-sm hover:bg-green-600 transition-colors font-medium shadow"
+                className="flex items-center bg-emerald-600 rounded-md px-4 py-2 text-white text-sm hover:bg-emerald-700 transition-colors font-medium shadow"
               >
                 <IoAddCircleSharp className="mr-1" size={18} />
                 Add Category
@@ -318,16 +318,10 @@ export default function AdminDashboardTabs() {
   return (
     <div className="w-full min-h-screen bg-gray-50">
       <div className="w-full px-4 py-8">
-        <div className="mb-8 flex justify-between items-center w-full">
-          <h1 className="text-2xl md:text-3xl font-bold text-gray-800">
-            Admin Dashboard
-          </h1>
-        </div>
-
         {/* Mobile Tabs */}
         <div className="md:hidden w-full mb-4">
           <select
-            className="w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 p-2"
+            className="w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-600 focus:ring focus:ring-emerald-600 focus:ring-opacity-50 p-2"
             value={activeTab}
             onChange={(e) => {
               setActiveTab(parseInt(e.target.value));
@@ -348,8 +342,8 @@ export default function AdminDashboardTabs() {
               key={tab.key}
               className={`px-6 py-3 font-medium text-sm rounded-t-lg transition-colors ${
                 index === activeTab
-                  ? "text-green-700 bg-white border-l border-t border-r border-gray-200 border-b-0"
-                  : "text-gray-600 hover:text-green-700 bg-gray-50"
+                  ? "text-emerald-700 bg-white border-l border-t border-r border-gray-200 border-b-0"
+                  : "text-gray-600 hover:text-emerald-700 bg-gray-50"
               }`}
               onClick={() => {
                 setActiveTab(index);
diff --git a/frontend/src/pages/Favorites.jsx b/frontend/src/pages/Favorites.jsx
index f36dc41..3206ddf 100644
--- a/frontend/src/pages/Favorites.jsx
+++ b/frontend/src/pages/Favorites.jsx
@@ -119,7 +119,7 @@ const Favorites = () => {
           </p>
           <Link
             to="/"
-            className="inline-block bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
+            className="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
           >
             Browse Listings
           </Link>
@@ -161,7 +161,7 @@ const Favorites = () => {
                     </button>
                   </div>
 
-                  <p className="text-emerald-600 font-bold mt-1">
+                  <p className="text-emerald-700 font-bold mt-1">
                     ${product.price.toFixed(2)}
                   </p>
 
@@ -200,56 +200,8 @@ const Favorites = () => {
       )}
 
       <footer className="bg-gray-800 text-white py-6 mt-12">
-        <div className="container mx-auto px-4">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <div className="mb-4 md:mb-0">
-              <h3 className="text-lg font-semibold mb-2">Campus Marketplace</h3>
-              <p className="text-gray-400 text-sm">
-                Your trusted university trading platform
-              </p>
-            </div>
-
-            <div className="flex space-x-6">
-              <div>
-                <h4 className="font-medium mb-2">Quick Links</h4>
-                <ul className="text-sm text-gray-400">
-                  <li className="mb-1">
-                    <Link to="/" className="hover:text-white transition">
-                      Home
-                    </Link>
-                  </li>
-                  <li className="mb-1">
-                    <Link to="/selling" className="hover:text-white transition">
-                      Sell an Item
-                    </Link>
-                  </li>
-                  <li className="mb-1">
-                    <Link
-                      to="/favorites"
-                      className="hover:text-white transition"
-                    >
-                      My Favorites
-                    </Link>
-                  </li>
-                </ul>
-              </div>
-
-              <div>
-                <h4 className="font-medium mb-2">Contact</h4>
-                <ul className="text-sm text-gray-400">
-                  <li className="mb-1">support@campusmarket.com</li>
-                  <li className="mb-1">University of Calgary</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          <div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
-            <p>
-              © {new Date().getFullYear()} Campus Marketplace. All rights
-              reserved.
-            </p>
-          </div>
+        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
+          <p>© 2025 Campus Marketplace. All rights reserved.</p>
         </div>
       </footer>
     </div>
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 594148a..9a37c3f 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -219,7 +219,7 @@ const Home = () => {
   // Loading indicator component
   const LoadingSection = () => (
     <div className="flex justify-center items-center h-48">
-      <Loader className="animate-spin text-emerald-600 h-8 w-8" />
+      <Loader className="animate-spin text-emerald-700 h-8 w-8" />
     </div>
   );
 
@@ -243,7 +243,7 @@ const Home = () => {
             e.preventDefault();
             toggleFavorite(product.id);
           }}
-          className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
+          className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-600 transition shadow-sm"
         >
           <Bookmark className="text-white w-5 h-5" />
         </button>
@@ -253,7 +253,7 @@ const Home = () => {
         <h3 className="text-lg font-medium text-gray-800 leading-tight">
           {product.title}
         </h3>
-        <span className="font-semibold text-emerald-600 block mt-1">
+        <span className="font-semibold text-emerald-700 block mt-1">
           ${product.price}
         </span>
 
@@ -353,7 +353,7 @@ const Home = () => {
             </p>
             <button
               onClick={handleSelling}
-              className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-colors"
+              className="bg-emerald-700 hover:bg-emerald-700 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-colors"
             >
               Post an Item
             </button>
@@ -405,59 +405,9 @@ const Home = () => {
           </ScrollableProductList>
         )}
       </div>
-
-      {/* Footer */}
       <footer className="bg-gray-800 text-white py-6 mt-12">
-        <div className="container mx-auto px-4">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <div className="mb-4 md:mb-0">
-              <h3 className="text-lg font-semibold mb-2">Campus Marketplace</h3>
-              <p className="text-gray-400 text-sm">
-                Your trusted university trading platform
-              </p>
-            </div>
-
-            <div className="flex space-x-6">
-              <div>
-                <h4 className="font-medium mb-2">Quick Links</h4>
-                <ul className="text-sm text-gray-400">
-                  <li className="mb-1">
-                    <Link to="/" className="hover:text-white transition">
-                      Home
-                    </Link>
-                  </li>
-                  <li className="mb-1">
-                    <Link to="/selling" className="hover:text-white transition">
-                      Sell an Item
-                    </Link>
-                  </li>
-                  <li className="mb-1">
-                    <Link
-                      to="/favorites"
-                      className="hover:text-white transition"
-                    >
-                      My Favorites
-                    </Link>
-                  </li>
-                </ul>
-              </div>
-
-              <div>
-                <h4 className="font-medium mb-2">Contact</h4>
-                <ul className="text-sm text-gray-400">
-                  <li className="mb-1">support@campusmarket.com</li>
-                  <li className="mb-1">University of Calgary</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          <div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
-            <p>
-              © {new Date().getFullYear()} Campus Marketplace. All rights
-              reserved.
-            </p>
-          </div>
+        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
+          <p>© 2025 Campus Marketplace. All rights reserved.</p>
         </div>
       </footer>
     </div>
diff --git a/frontend/src/pages/ProductDetail.jsx b/frontend/src/pages/ProductDetail.jsx
index c3d892d..2eb08e1 100644
--- a/frontend/src/pages/ProductDetail.jsx
+++ b/frontend/src/pages/ProductDetail.jsx
@@ -247,7 +247,7 @@ const ProductDetail = () => {
   if (loading.product) {
     return (
       <div className="flex justify-center items-center h-screen">
-        <div className="animate-spin h-32 w-32 border-t-2 border-emerald-600"></div>
+        <div className="animate-spin h-32 w-32 border-t-2 border-emerald-700"></div>
       </div>
     );
   }
@@ -261,7 +261,7 @@ const ProductDetail = () => {
           <p className="text-gray-600">{error.product}</p>
           <Link
             to="/"
-            className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
+            className="mt-4 inline-block bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
           >
             Back to Listings
           </Link>
@@ -278,7 +278,7 @@ const ProductDetail = () => {
           <h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2>
           <Link
             to="/"
-            className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2  hover:bg-emerald-700"
+            className="mt-4 inline-block bg-emerald-700 text-white px-4 py-2  hover:bg-emerald-700"
           >
             Back to Listings
           </Link>
@@ -356,7 +356,7 @@ const ProductDetail = () => {
               {product.images.map((image, index) => (
                 <div
                   key={index}
-                  className={`bg-white border ${currentImage === index ? "border-emerald-600 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
+                  className={`bg-white border ${currentImage === index ? "border-emerald-700 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
                   onClick={() => selectImage(index)}
                 >
                   <img
@@ -386,7 +386,7 @@ const ProductDetail = () => {
                   e.preventDefault();
                   toggleFavorite(product.ProductID);
                 }}
-                className="top-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-600 transition shadow-sm"
+                className="top-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-700 transition shadow-sm"
               >
                 <Bookmark className="text-white w-5 h-5" />
               </button>
@@ -455,7 +455,7 @@ const ProductDetail = () => {
                     alert(`Error: ${error.message}`);
                   }
                 }}
-                className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 mb-3"
+                className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-3 px-4 mb-3"
               >
                 Contact Seller
               </button>
@@ -467,7 +467,7 @@ const ProductDetail = () => {
                       href={`tel:${product.SellerPhone}`}
                       className="flex items-center gap-2 p-3 hover:bg-gray-50 border-b border-gray-100"
                     >
-                      <Phone className="h-5 w-5 text-emerald-600" />
+                      <Phone className="h-5 w-5 text-emerald-700" />
                       <span>Call Seller</span>
                     </a>
                   )}
@@ -477,7 +477,7 @@ const ProductDetail = () => {
                       href={`mailto:${product.SellerEmail}`}
                       className="flex items-center gap-2 p-3 hover:bg-gray-50"
                     >
-                      <Mail className="h-5 w-5 text-emerald-600" />
+                      <Mail className="h-5 w-5 text-emerald-700" />
                       <span>Email Seller</span>
                     </a>
                   )}
@@ -514,7 +514,7 @@ const ProductDetail = () => {
         <div className="bg-white border border-gray-200 p-6">
           {loading.reviews ? (
             <div className="flex justify-center py-8">
-              <div className="animate-spin h-8 w-8 border-t-2 border-emerald-600"></div>
+              <div className="animate-spin h-8 w-8 border-t-2 border-emerald-700"></div>
             </div>
           ) : error.reviews ? (
             <div className="text-red-500 mb-4">
@@ -561,7 +561,7 @@ const ProductDetail = () => {
         <div className="mt-4">
           <button
             onClick={() => setShowReviewForm(true)}
-            className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
+            className="bg-emerald-700 hover:bg-emerald-700 text-white font-medium py-2 px-4"
           >
             Write a Review
           </button>
@@ -619,7 +619,7 @@ const ProductDetail = () => {
                     id="comment"
                     value={reviewForm.comment}
                     onChange={handleReviewInputChange}
-                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-600"
+                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-700"
                     rows="4"
                     required
                   ></textarea>
@@ -635,7 +635,7 @@ const ProductDetail = () => {
                   </button>
                   <button
                     type="submit"
-                    className="px-4 py-2 bg-emerald-600 text-white  hover:bg-emerald-700"
+                    className="px-4 py-2 bg-emerald-700 text-white  hover:bg-emerald-700"
                     disabled={loading.submitting}
                   >
                     {loading.submitting ? "Submitting..." : "Submit Review"}
diff --git a/frontend/src/pages/SearchPage.jsx b/frontend/src/pages/SearchPage.jsx
index 631c2bd..bd93f17 100644
--- a/frontend/src/pages/SearchPage.jsx
+++ b/frontend/src/pages/SearchPage.jsx
@@ -146,7 +146,7 @@ const SearchPage = () => {
             <div className="flex space-x-2">
               <button
                 onClick={applyFilters}
-                className="w-full bg-emerald-500 text-white p-3 hover:bg-emerald-600 transition-colors"
+                className="w-full bg-emerald-600 text-white p-3 hover:bg-emerald-700 transition-colors"
               >
                 Apply Filters
               </button>
@@ -187,7 +187,7 @@ const SearchPage = () => {
                   <h3 className="text-lg font-medium text-gray-800">
                     {listing.title}
                   </h3>
-                  <p className="text-emerald-600 font-semibold">
+                  <p className="text-emerald-700 font-semibold">
                     ${Number(listing.price).toFixed(2)}
                   </p>
                 </div>
@@ -196,58 +196,9 @@ const SearchPage = () => {
           </div>
         </div>
       </div>
-      {/* Footer - Added here */}
       <footer className="bg-gray-800 text-white py-6 mt-12">
-        <div className="container mx-auto px-4">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <div className="mb-4 md:mb-0">
-              <h3 className="text-lg font-semibold mb-2">Campus Marketplace</h3>
-              <p className="text-gray-400 text-sm">
-                Your trusted university trading platform
-              </p>
-            </div>
-
-            <div className="flex space-x-6">
-              <div>
-                <h4 className="font-medium mb-2">Quick Links</h4>
-                <ul className="text-sm text-gray-400">
-                  <li className="mb-1">
-                    <Link to="/" className="hover:text-white transition">
-                      Home
-                    </Link>
-                  </li>
-                  <li className="mb-1">
-                    <Link to="/selling" className="hover:text-white transition">
-                      Sell an Item
-                    </Link>
-                  </li>
-                  <li className="mb-1">
-                    <Link
-                      to="/favorites"
-                      className="hover:text-white transition"
-                    >
-                      My Favorites
-                    </Link>
-                  </li>
-                </ul>
-              </div>
-
-              <div>
-                <h4 className="font-medium mb-2">Contact</h4>
-                <ul className="text-sm text-gray-400">
-                  <li className="mb-1">support@campusmarket.com</li>
-                  <li className="mb-1">University of Calgary</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          <div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
-            <p>
-              © {new Date().getFullYear()} Campus Marketplace. All rights
-              reserved.
-            </p>
-          </div>
+        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
+          <p>© 2025 Campus Marketplace. All rights reserved.</p>
         </div>
       </footer>
     </div>
diff --git a/frontend/src/pages/Selling.jsx b/frontend/src/pages/Selling.jsx
index adb1db4..a667757 100644
--- a/frontend/src/pages/Selling.jsx
+++ b/frontend/src/pages/Selling.jsx
@@ -323,7 +323,7 @@ const Selling = () => {
         {!showForm && (
           <button
             onClick={handleAddProduct}
-            className="bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
+            className="bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
           >
             + Add New Product
           </button>
@@ -335,7 +335,7 @@ const Selling = () => {
           {/* Back Button */}
           <button
             onClick={() => setShowForm(false)}
-            className="mb-4 text-emerald-600 hover:text-emerald-800 flex items-center gap-1"
+            className="mb-4 text-emerald-700 hover:text-emerald-800 flex items-center gap-1"
           >
             <ChevronLeft size={16} />
             <span>Back to Listings</span>
@@ -363,7 +363,7 @@ const Selling = () => {
                     name: e.target.value,
                   })
                 }
-                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
+                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-600 focus:outline-none"
               />
             </div>
 
@@ -382,7 +382,7 @@ const Selling = () => {
                     price: e.target.value,
                   })
                 }
-                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
+                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-600 focus:outline-none"
               />
             </div>
 
@@ -406,7 +406,7 @@ const Selling = () => {
                 <select
                   value={selectedCategory}
                   onChange={(e) => setSelectedCategory(e.target.value)}
-                  className="flex-1 px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
+                  className="flex-1 px-3 py-2 border border-gray-300 focus:border-emerald-600 focus:outline-none"
                 >
                   <option value="" disabled>
                     Select a category
@@ -425,7 +425,7 @@ const Selling = () => {
                   type="button"
                   onClick={addCategory}
                   disabled={!selectedCategory}
-                  className="px-3 py-2 bg-emerald-600 text-white hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1"
+                  className="px-3 py-2 bg-emerald-700 text-white hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1"
                 >
                   <Plus size={16} />
                   <span>Add</span>
@@ -444,7 +444,7 @@ const Selling = () => {
                       <button
                         type="button"
                         onClick={() => removeCategory(category)}
-                        className="ml-1 text-emerald-600 hover:text-emerald-800"
+                        className="ml-1 text-emerald-700 hover:text-emerald-800"
                       >
                         <X size={14} />
                       </button>
@@ -475,7 +475,7 @@ const Selling = () => {
                   })
                 }
                 rows="4"
-                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
+                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-600 focus:outline-none"
                 placeholder="Describe your product in detail..."
               ></textarea>
             </div>
@@ -504,7 +504,7 @@ const Selling = () => {
                 htmlFor="image-upload"
                 className="block w-full p-3 border border-gray-300 bg-gray-50 text-center cursor-pointer hover:bg-gray-100"
               >
-                <span className="text-emerald-600 font-medium">
+                <span className="text-emerald-700 font-medium">
                   Click to upload images
                 </span>
               </label>
@@ -588,7 +588,7 @@ const Selling = () => {
                 onClick={markAsSold}
                 className={`px-4 py-2 rounded-md transition-colors ${
                   editingProduct.isSold
-                    ? "bg-green-600 text-white hover:bg-green-700"
+                    ? "bg-emerald-700 text-white hover:bg-emerald-700"
                     : "bg-red-600 text-white hover:bg-red-700"
                 }`}
               >
@@ -598,7 +598,7 @@ const Selling = () => {
 
             <button
               onClick={handleSaveProduct}
-              className="bg-emerald-600 text-white px-6 py-2 hover:bg-emerald-700 rounded-md"
+              className="bg-emerald-700 text-white px-6 py-2 hover:bg-emerald-700 rounded-md"
             >
               {editingProduct.ProductID ? "Update Product" : "Add Product"}
             </button>
@@ -613,7 +613,7 @@ const Selling = () => {
               </p>
               <button
                 onClick={handleAddProduct}
-                className="bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
+                className="bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
               >
                 Create Your First Listing
               </button>
@@ -645,7 +645,7 @@ const Selling = () => {
                         </h3>
                       </div>
 
-                      <p className="text-emerald-600 font-bold mt-1">
+                      <p className="text-emerald-700 font-bold mt-1">
                         ${product.Price}
                       </p>
 
@@ -679,7 +679,7 @@ const Selling = () => {
                             e.preventDefault();
                             handleEditProduct(product);
                           }}
-                          className="text-emerald-600 hover:text-emerald-800 font-medium"
+                          className="text-emerald-700 hover:text-emerald-800 font-medium"
                         >
                           Edit
                         </button>
@@ -692,6 +692,11 @@ const Selling = () => {
           )}
         </>
       )}
+      <footer className="bg-gray-800 text-white py-6 mt-12">
+        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
+          <p>© 2025 Campus Marketplace. All rights reserved.</p>
+        </div>
+      </footer>
     </div>
   );
 };
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index 61c0c27..04eb49e 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -190,7 +190,7 @@ const Settings = () => {
   if (isLoading) {
     return (
       <div className="flex justify-center items-center h-64">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-500"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-600"></div>
       </div>
     );
   }
@@ -234,7 +234,7 @@ const Settings = () => {
                   id="name"
                   value={userData.name}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                   required
                 />
               </div>
@@ -251,7 +251,7 @@ const Settings = () => {
                   id="email"
                   value={userData.email}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                   required
                   readOnly // Email is often used as identifier and not changeable
                 />
@@ -269,7 +269,7 @@ const Settings = () => {
                   id="phone"
                   value={userData.phone}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                 />
               </div>
 
@@ -285,7 +285,7 @@ const Settings = () => {
                   id="UCID"
                   value={userData.UCID}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                   required
                 />
               </div>
@@ -302,7 +302,7 @@ const Settings = () => {
                   id="address"
                   value={userData.address}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                 />
               </div>
               <div>
@@ -317,14 +317,14 @@ const Settings = () => {
                   id="password"
                   value={userData.password}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                 />
               </div>
             </div>
 
             <button
               type="submit"
-              className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
+              className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
             >
               Update Profile
             </button>
@@ -395,6 +395,11 @@ const Settings = () => {
           </div>
         </div>
       </div>
+      <footer className="bg-gray-800 text-white py-6 mt-12">
+        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
+          <p>© 2025 Campus Marketplace. All rights reserved.</p>
+        </div>
+      </footer>
     </div>
   );
 };
diff --git a/frontend/src/pages/Transactions.jsx b/frontend/src/pages/Transactions.jsx
index e4051de..84fff33 100644
--- a/frontend/src/pages/Transactions.jsx
+++ b/frontend/src/pages/Transactions.jsx
@@ -14,7 +14,7 @@ const Transactions = () => {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({ userID: 1 }), // replace with actual userID
-          }
+          },
         );
         if (!response.ok) throw new Error(`HTTP ${response.status}`);
         const { transactions: txData } = await response.json();
@@ -29,7 +29,7 @@ const Transactions = () => {
             image: tx.Image_URL || "/default-image.jpg",
             date: tx.Date,
             status: tx.PaymentStatus,
-          }))
+          })),
         );
       } catch (error) {
         console.error("Failed to fetch transactions:", error);
@@ -47,7 +47,7 @@ const Transactions = () => {
           method: "DELETE",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ transactionID: id }),
-        }
+        },
       );
       const data = await res.json();
       if (data.success) {
@@ -86,7 +86,7 @@ const Transactions = () => {
           </p>
           <Link
             to="/"
-            className="inline-block bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
+            className="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
           >
             Browse Listings
           </Link>
@@ -106,7 +106,7 @@ const Transactions = () => {
                     deleteTransaction(tx.id);
                   }}
                   className="absolute bottom-2 right-2 text-red-500 hover:text-red-600 z-10"
-                > 
+                >
                   <Trash2 size={20} />
                 </button>
 
@@ -127,7 +127,7 @@ const Transactions = () => {
                       {tx.name}
                     </h3>
                     {tx.price !== null && (
-                      <p className="text-emerald-600 font-bold mt-1">
+                      <p className="text-emerald-700 font-bold mt-1">
                         ${tx.price.toFixed(2)}
                       </p>
                     )}
@@ -152,58 +152,8 @@ const Transactions = () => {
       )}
 
       <footer className="bg-gray-800 text-white py-6 mt-12">
-        <div className="container mx-auto px-4">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <div className="mb-4 md:mb-0">
-              <h3 className="text-lg font-semibold mb-2">
-                Campus Marketplace
-              </h3>
-              <p className="text-gray-400 text-sm">
-                Your trusted university trading platform
-              </p>
-            </div>
-            <div className="flex space-x-6">
-              <div>
-                <h4 className="font-medium mb-2">Quick Links</h4>
-                <ul className="text-sm text-gray-400">
-                  <li className="mb-1">
-                    <Link to="/" className="hover:text-white transition">
-                      Home
-                    </Link>
-                  </li>
-                  <li className="mb-1">
-                    <Link
-                      to="/selling"
-                      className="hover:text-white transition"
-                    >
-                      Sell an Item
-                    </Link>
-                  </li>
-                  <li className="mb-1">
-                    <Link
-                      to="/favorites"
-                      className="hover:text-white transition"
-                    >
-                      My Favorites
-                    </Link>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <h4 className="font-medium mb-2">Contact</h4>
-                <ul className="text-sm text-gray-400">
-                  <li className="mb-1">support@campusmarket.com</li>
-                  <li className="mb-1">University of Calgary</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
-            <p>
-              © {new Date().getFullYear()} Campus Marketplace. All rights
-              reserved.
-            </p>
-          </div>
+        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
+          <p>© 2025 Campus Marketplace. All rights reserved.</p>
         </div>
       </footer>
     </div>
diff --git a/recommondation-engine/__pycache__/app.cpython-313.pyc b/recommondation-engine/__pycache__/app.cpython-313.pyc
index 58214b2e39d9df5ca42b618b7e4ee9dc8ab9e808..96396dc2d1062146925dabce773af1c527748b57 100644
GIT binary patch
delta 19
ZcmX>Zb25hOGcPX}0}$+cyOGOY4**2P20s7*

delta 19
ZcmX>Zb25hOGcPX}0}wpkw~@<U4**2C1~mWx