From 067a5c3b0eeeb9591d8617bea28ce1ba679162fe Mon Sep 17 00:00:00 2001
From: Mann Patel <130435633+MannPatel0@users.noreply.github.com>
Date: Fri, 18 Apr 2025 10:43:41 -0600
Subject: [PATCH] color theme update emerald

---
 frontend/src/components/FloatingAlert.jsx |  2 +-
 frontend/src/components/Navbar.jsx        |  2 +-
 frontend/src/components/UserDropdown.jsx  |  4 ++--
 frontend/src/pages/Favorites.jsx          |  2 +-
 frontend/src/pages/Home.jsx               |  8 +++----
 frontend/src/pages/ProductDetail.jsx      | 26 +++++++++++------------
 frontend/src/pages/SearchPage.jsx         |  4 ++--
 frontend/src/pages/Settings.jsx           | 22 +++++++++----------
 8 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/FloatingAlert.jsx b/frontend/src/components/FloatingAlert.jsx
index 6c6bf69..c3f0229 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-green-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-500 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 95d41c6..aeceb2c 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -35,7 +35,7 @@ const Navbar = ({ onLogout, userName }) => {
                 alt="Campus Plug"
                 className="h-8 px-2"
               />
-              <span className="hidden md:block text-green-500 font-bold text-xl">
+              <span className="hidden md:block text-emerald-600 font-bold text-xl">
                 Campus Plug
               </span>
             </Link>
diff --git a/frontend/src/components/UserDropdown.jsx b/frontend/src/components/UserDropdown.jsx
index 1798b20..e8eed00 100644
--- a/frontend/src/components/UserDropdown.jsx
+++ b/frontend/src/components/UserDropdown.jsx
@@ -48,8 +48,8 @@ const UserDropdown = ({ onLogout, userName }) => {
         className="flex items-center focus:outline-none"
         onClick={toggleDropdown}
       >
-        <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center">
-          <User className="h-5 w-5 text-green-600" />
+        <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" />
         </div>
       </button>
 
diff --git a/frontend/src/pages/Favorites.jsx b/frontend/src/pages/Favorites.jsx
index ffe7139..0a30101 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-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
+            className="inline-block bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
           >
             Browse Listings
           </Link>
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 04b26a8..08b17a2 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -211,7 +211,7 @@ const Home = () => {
             </p>
             <button
               onClick={handleSelling}
-              className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-green-400 transition-colors"
+              className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-colors"
             >
               Post an Item
             </button>
@@ -277,7 +277,7 @@ const Home = () => {
                     <h3 className="text-lg font-medium text-gray-800 leading-tight">
                       {recommended.title}
                     </h3>
-                    <span className="font-semibold text-green-600 block mt-1">
+                    <span className="font-semibold text-emerald-600 block mt-1">
                       ${recommended.price}
                     </span>
 
@@ -372,7 +372,7 @@ const Home = () => {
                     <h3 className="text-lg font-medium text-gray-800 leading-tight">
                       {listing.title}
                     </h3>
-                    <span className="font-semibold text-green-600 block mt-1">
+                    <span className="font-semibold text-emerald-600 block mt-1">
                       ${listing.price}
                     </span>
 
@@ -464,7 +464,7 @@ const Home = () => {
                     <h3 className="text-lg font-medium text-gray-800 leading-tight">
                       {history.title}
                     </h3>
-                    <span className="font-semibold text-green-600 block mt-1">
+                    <span className="font-semibold text-emerald-600 block mt-1">
                       ${history.price}
                     </span>
 
diff --git a/frontend/src/pages/ProductDetail.jsx b/frontend/src/pages/ProductDetail.jsx
index 0b38ca2..8de5e21 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-green-500"></div>
+        <div className="animate-spin h-32 w-32 border-t-2 border-emerald-500"></div>
       </div>
     );
   }
@@ -261,7 +261,7 @@ const ProductDetail = () => {
           <p className="text-gray-600">{error.product}</p>
           <Link
             to="/"
-            className="mt-4 inline-block bg-green-500 text-white px-4 py-2 hover:bg-green-600"
+            className="mt-4 inline-block bg-emerald-500 text-white px-4 py-2 hover:bg-emerald-600"
           >
             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-green-500 text-white px-4 py-2  hover:bg-green-600"
+            className="mt-4 inline-block bg-emerald-500 text-white px-4 py-2  hover:bg-emerald-600"
           >
             Back to Listings
           </Link>
@@ -293,7 +293,7 @@ const ProductDetail = () => {
       <div className="mb-6">
         <Link
           to="/search"
-          className="flex items-center text-green-600 hover:text-green-700"
+          className="flex items-center text-emerald-600 hover:text-emerald-700"
         >
           <ArrowLeft className="h-4 w-4 mr-1" />
           <span>Back</span>
@@ -350,7 +350,7 @@ const ProductDetail = () => {
               {product.images.map((image, index) => (
                 <div
                   key={index}
-                  className={`bg-white border ${currentImage === index ? "border-green-500 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
+                  className={`bg-white border ${currentImage === index ? "border-emerald-500 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
                   onClick={() => selectImage(index)}
                 >
                   <img
@@ -385,7 +385,7 @@ const ProductDetail = () => {
               </button>
             </div>
 
-            <div className="text-2xl font-bold text-green-600 mb-4">
+            <div className="text-2xl font-bold text-emerald-600 mb-4">
               $
               {typeof product.Price === "number"
                 ? product.Price.toFixed(2)
@@ -416,7 +416,7 @@ const ProductDetail = () => {
             <div className="relative">
               <button
                 onClick={() => setShowContactOptions(!showContactOptions)}
-                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-500 hover:bg-emerald-600 text-white font-medium py-3 px-4 mb-3"
               >
                 Contact Seller
               </button>
@@ -428,7 +428,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-green-500" />
+                      <Phone className="h-5 w-5 text-emerald-500" />
                       <span>Call Seller</span>
                     </a>
                   )}
@@ -438,7 +438,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-green-500" />
+                      <Mail className="h-5 w-5 text-emerald-500" />
                       <span>Email Seller</span>
                     </a>
                   )}
@@ -475,7 +475,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-green-500"></div>
+              <div className="animate-spin h-8 w-8 border-t-2 border-emerald-500"></div>
             </div>
           ) : error.reviews ? (
             <div className="text-red-500 mb-4">
@@ -522,7 +522,7 @@ const ProductDetail = () => {
         <div className="mt-4">
           <button
             onClick={() => setShowReviewForm(true)}
-            className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
+            className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
           >
             Write a Review
           </button>
@@ -580,7 +580,7 @@ const ProductDetail = () => {
                     id="comment"
                     value={reviewForm.comment}
                     onChange={handleReviewInputChange}
-                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-green-500"
+                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-500"
                     rows="4"
                     required
                   ></textarea>
@@ -596,7 +596,7 @@ const ProductDetail = () => {
                   </button>
                   <button
                     type="submit"
-                    className="px-4 py-2 bg-green-500 text-white  hover:bg-green-600"
+                    className="px-4 py-2 bg-emerald-500 text-white  hover:bg-emerald-600"
                     disabled={loading.submitting}
                   >
                     {loading.submitting ? "Submitting..." : "Submit Review"}
diff --git a/frontend/src/pages/SearchPage.jsx b/frontend/src/pages/SearchPage.jsx
index 9cd7447..631c2bd 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-green-500 text-white p-3 hover:bg-green-600 transition-colors"
+                className="w-full bg-emerald-500 text-white p-3 hover:bg-emerald-600 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-green-600 font-semibold">
+                  <p className="text-emerald-600 font-semibold">
                     ${Number(listing.price).toFixed(2)}
                   </p>
                 </div>
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index 9dc30f1..f6d610b 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -230,7 +230,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-green-500"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-500"></div>
       </div>
     );
   }
@@ -274,7 +274,7 @@ const Settings = () => {
                   id="name"
                   value={userData.name}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                   required
                 />
               </div>
@@ -291,7 +291,7 @@ const Settings = () => {
                   id="email"
                   value={userData.email}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                   required
                   readOnly // Email is often used as identifier and not changeable
                 />
@@ -309,7 +309,7 @@ const Settings = () => {
                   id="phone"
                   value={userData.phone}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                 />
               </div>
 
@@ -325,7 +325,7 @@ const Settings = () => {
                   id="UCID"
                   value={userData.UCID}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                   required
                 />
               </div>
@@ -342,14 +342,14 @@ const Settings = () => {
                   id="address"
                   value={userData.address}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                 />
               </div>
             </div>
 
             <button
               type="submit"
-              className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
+              className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
             >
               Update Profile
             </button>
@@ -381,7 +381,7 @@ const Settings = () => {
                   id="currentPassword"
                   value={userData.currentPassword}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                   required
                 />
               </div>
@@ -398,7 +398,7 @@ const Settings = () => {
                   id="newPassword"
                   value={userData.newPassword}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                   required
                 />
               </div>
@@ -415,7 +415,7 @@ const Settings = () => {
                   id="confirmPassword"
                   value={userData.confirmPassword}
                   onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                   required
                 />
               </div>
@@ -423,7 +423,7 @@ const Settings = () => {
 
             <button
               type="submit"
-              className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
+              className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
             >
               Change Password
             </button>