mannpatel/Campus-Plug
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update to the color

Browse Source
This commit is contained in:
Mann Patel
2025-04-18 19:05:20 -06:00
parent 067a5c3b0e
commit 649dad75cb
9 changed files with 213 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/pages/Favorites.jsx
View File

@@ -129,7 +129,7 @@ const Favorites = () => {
{sortedFavorites.map((product) => (
<div
key={product.id}
className="border-2 border-gray-200 rounded overflow-hidden hover:shadow-md transition-shadow"
className="border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
>
<Link to={`/product/${product.id}`}>
<div className="h-48 bg-gray-200 flex items-center justify-center">
@@ -150,10 +150,14 @@ const Favorites = () => {
{product.name}
</h3>
<button
onClick={() => removeFromFavorites(product.id)}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
removeFromFavorites(product.id);
}}
className="text-red-500 hover:text-red-600"
>
<Trash2 size={18} />
<Trash2 size={24} />
</button>
</div>

22
frontend/src/pages/Home.jsx
View File

@@ -1,6 +1,12 @@
import { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Tag, ChevronLeft, ChevronRight } from "lucide-react";
import {
Tag,
ChevronLeft,
ChevronRight,
Bookmark,
BookmarkCheck,
} from "lucide-react";
import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
@@ -246,7 +252,7 @@ const Home = () => {
{/* Scrollable Listings Container */}
<div
id="RecomContainer"
className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0"
className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0 rounded"
>
{recommended.map((recommended) => (
<Link
@@ -267,9 +273,9 @@ const Home = () => {
e.preventDefault();
toggleFavorite(recommended.id);
}}
className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm hover:bg-gray-100 transition"
className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
>
<span className="text-xl font-bold text-gray-600">+</span>
<Bookmark className="text-white w-5 h-5" />
</button>
</div>
@@ -362,9 +368,9 @@ const Home = () => {
e.preventDefault();
toggleFavorite(listing.id);
}}
className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm hover:bg-gray-100 transition"
className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
>
<span className="text-xl font-bold text-gray-600">+</span>
<Bookmark className="text-white w-5 h-5" />
</button>
</div>
@@ -454,9 +460,9 @@ const Home = () => {
e.preventDefault();
toggleFavorite(history.id);
}}
className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm hover:bg-gray-100 transition"
className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
>
<span className="text-xl font-bold text-gray-600">+</span>
<Bookmark className="text-white w-5 h-5" />
</button>
</div>

40
frontend/src/pages/ProductDetail.jsx
View File

@@ -9,6 +9,7 @@ import {
Star,
Phone,
Mail,
Bookmark,
} from "lucide-react";
import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
@@ -247,7 +248,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-500"></div>
<div className="animate-spin h-32 w-32 border-t-2 border-green-500"></div>
</div>
);
}
@@ -261,7 +262,7 @@ const ProductDetail = () => {
<p className="text-gray-600">{error.product}</p>
<Link
to="/"
className="mt-4 inline-block bg-emerald-500 text-white px-4 py-2 hover:bg-emerald-600"
className="mt-4 inline-block bg-green-500 text-white px-4 py-2 hover:bg-green-600"
>
Back to Listings
</Link>
@@ -278,7 +279,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-500 text-white px-4 py-2 hover:bg-emerald-600"
className="mt-4 inline-block bg-green-500 text-white px-4 py-2 hover:bg-green-600"
>
Back to Listings
</Link>
@@ -293,7 +294,7 @@ const ProductDetail = () => {
<div className="mb-6">
<Link
to="/search"
className="flex items-center text-emerald-600 hover:text-emerald-700"
className="flex items-center text-green-600 hover:text-green-700"
>
<ArrowLeft className="h-4 w-4 mr-1" />
<span>Back</span>
@@ -350,7 +351,7 @@ const ProductDetail = () => {
{product.images.map((image, index) => (
<div
key={index}
className={`bg-white border ${currentImage === index ? "border-emerald-500 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
className={`bg-white border ${currentImage === index ? "border-green-500 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
onClick={() => selectImage(index)}
>
<img
@@ -375,17 +376,18 @@ const ProductDetail = () => {
{product.Name || "Unnamed Product"}
</h1>
<button
onClick={() => toggleFavorite(product.ProductID)}
className="p-2 hover:bg-gray-100"
aria-label={
isFavorite ? "Remove from favorites" : "Add to favorites"
}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
toggleFavorite(product.ProductID);
}}
className="top-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
>
<Heart className={`h-6 w-6 ext-red-500 fill-red-500`} />
<Bookmark className="text-white w-5 h-5" />
</button>
</div>
<div className="text-2xl font-bold text-emerald-600 mb-4">
<div className="text-2xl font-bold text-green-600 mb-4">
$
{typeof product.Price === "number"
? product.Price.toFixed(2)
@@ -416,7 +418,7 @@ const ProductDetail = () => {
<div className="relative">
<button
onClick={() => setShowContactOptions(!showContactOptions)}
className="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-3 px-4 mb-3"
className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 mb-3"
>
Contact Seller
</button>
@@ -428,7 +430,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-500" />
<Phone className="h-5 w-5 text-green-500" />
<span>Call Seller</span>
</a>
)}
@@ -438,7 +440,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-500" />
<Mail className="h-5 w-5 text-green-500" />
<span>Email Seller</span>
</a>
)}
@@ -475,7 +477,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-500"></div>
<div className="animate-spin h-8 w-8 border-t-2 border-green-500"></div>
</div>
) : error.reviews ? (
<div className="text-red-500 mb-4">
@@ -522,7 +524,7 @@ const ProductDetail = () => {
<div className="mt-4">
<button
onClick={() => setShowReviewForm(true)}
className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
>
Write a Review
</button>
@@ -580,7 +582,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-500"
className="w-full p-3 border border-gray-300 focus:outline-none focus:border-green-500"
rows="4"
required
></textarea>
@@ -596,7 +598,7 @@ const ProductDetail = () => {
</button>
<button
type="submit"
className="px-4 py-2 bg-emerald-500 text-white hover:bg-emerald-600"
className="px-4 py-2 bg-green-500 text-white hover:bg-green-600"
disabled={loading.submitting}
>
{loading.submitting ? "Submitting..." : "Submit Review"}

137
frontend/src/pages/Settings.jsx
View File

@@ -10,9 +10,7 @@ const Settings = () => {
phone: "",
UCID: "",
address: "",
currentPassword: "",
newPassword: "",
confirmPassword: "",
password: "",
});
const [isLoading, setIsLoading] = useState(true);
@@ -62,10 +60,7 @@ const Settings = () => {
UCID: data.UCID || storedUser.UCID || "",
phone: data.phone || storedUser.phone || "",
address: data.address || storedUser.address || "",
// Reset password fields
currentPassword: "",
newPassword: "",
confirmPassword: "",
password: data.password,
}));
} else {
throw new Error(data.error || "Failed to retrieve user data");
@@ -146,41 +141,6 @@ const Settings = () => {
}
};
const handlePasswordUpdate = async (e) => {
e.preventDefault();
try {
// Validate passwords match
if (userData.newPassword !== userData.confirmPassword) {
alert("New passwords do not match!");
return;
}
// TODO: Implement the actual password update API call
console.log("Password updated");
// Update password in localStorage
const storedUser = JSON.parse(localStorage.getItem("user"));
const updatedUser = {
...storedUser,
password: userData.newPassword,
};
localStorage.setItem("user", JSON.stringify(updatedUser));
// Reset password fields
setUserData((prevData) => ({
...prevData,
currentPassword: "",
newPassword: "",
confirmPassword: "",
}));
alert("Password updated successfully!");
} catch (error) {
console.error("Error updating password:", error);
alert("Failed to update password: " + error.message);
}
};
const handleDeleteAccount = async () => {
if (
window.confirm(
@@ -345,6 +305,21 @@ const Settings = () => {
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
/>
</div>
<div>
<label
htmlFor="password"
className="block text-sm font-medium text-gray-700 mb-1"
>
password
</label>
<input
type="text"
id="password"
value={userData.password}
onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
/>
</div>
</div>
<button
@@ -357,84 +332,10 @@ const Settings = () => {
</div>
</div>
{/* Security Section */}
<div className="bg-white border border-gray-200 mb-6">
<div className="border-b border-gray-200 p-4">
<div className="flex items-center">
<Lock className="h-5 w-5 text-gray-500 mr-2" />
<h2 className="text-lg font-medium text-gray-800">Password</h2>
</div>
</div>
<div className="p-4">
<form onSubmit={handlePasswordUpdate}>
<div className="space-y-4 mb-4">
<div>
<label
htmlFor="currentPassword"
className="block text-sm font-medium text-gray-700 mb-1"
>
Current Password
</label>
<input
type="password"
id="currentPassword"
value={userData.currentPassword}
onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
required
/>
</div>
<div>
<label
htmlFor="newPassword"
className="block text-sm font-medium text-gray-700 mb-1"
>
New Password
</label>
<input
type="password"
id="newPassword"
value={userData.newPassword}
onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
required
/>
</div>
<div>
<label
htmlFor="confirmPassword"
className="block text-sm font-medium text-gray-700 mb-1"
>
Confirm New Password
</label>
<input
type="password"
id="confirmPassword"
value={userData.confirmPassword}
onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
required
/>
</div>
</div>
<button
type="submit"
className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
>
Change Password
</button>
</form>
</div>
</div>
{/* Privacy Section */}
{showAlert && (
<FloatingAlert
message="Removed Your History! 😉"
message="We Removed Your History! 😉"
onClose={() => setShowAlert(false)}
/>
)}
@@ -448,7 +349,7 @@ const Settings = () => {
<div className="p-4">
<div className="space-y-4">
<div className="flex justify-between items-center pb-4 border-b border-gray-100">
<div className="flex justify-between items-center">
<div className="flex items-start">
<History className="h-5 w-5 text-gray-500 mr-2 mt-0.5" />
<div>