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

color theme update emerald

Browse Source
This commit is contained in:
Mann Patel
2025-04-18 10:43:41 -06:00
parent a8417a3697
commit 067a5c3b0e
8 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/FloatingAlert.jsx
View File

@@ -11,7 +11,7 @@ const FloatingAlert = ({ message, onClose, duration = 3000 }) => {
}, [onClose, duration]); }, [onClose, duration]);
return ( 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} {message}
</div> </div>
); );

2
frontend/src/components/Navbar.jsx
View File

@@ -35,7 +35,7 @@ const Navbar = ({ onLogout, userName }) => {
alt="Campus Plug" alt="Campus Plug"
className="h-8 px-2" 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 Campus Plug
</span> </span>
</Link> </Link>

4
frontend/src/components/UserDropdown.jsx
View File

@@ -48,8 +48,8 @@ const UserDropdown = ({ onLogout, userName }) => {
className="flex items-center focus:outline-none" className="flex items-center focus:outline-none"
onClick={toggleDropdown} onClick={toggleDropdown}
> >
<div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center"> <div className="h-8 w-8 rounded-full bg-emerald-100 flex items-center justify-center">
<User className="h-5 w-5 text-green-600" /> <User className="h-5 w-5 text-emerald-600" />
</div> </div>
</button> </button>

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

@@ -119,7 +119,7 @@ const Favorites = () => {
</p> </p>
<Link <Link
to="/" 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 Browse Listings
</Link> </Link>

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

@@ -211,7 +211,7 @@ const Home = () => {
</p> </p>
<button <button
onClick={handleSelling} 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 Post an Item
</button> </button>
@@ -277,7 +277,7 @@ const Home = () => {
<h3 className="text-lg font-medium text-gray-800 leading-tight"> <h3 className="text-lg font-medium text-gray-800 leading-tight">
{recommended.title} {recommended.title}
</h3> </h3>
<span className="font-semibold text-green-600 block mt-1"> <span className="font-semibold text-emerald-600 block mt-1">
${recommended.price} ${recommended.price}
</span> </span>
@@ -372,7 +372,7 @@ const Home = () => {
<h3 className="text-lg font-medium text-gray-800 leading-tight"> <h3 className="text-lg font-medium text-gray-800 leading-tight">
{listing.title} {listing.title}
</h3> </h3>
<span className="font-semibold text-green-600 block mt-1"> <span className="font-semibold text-emerald-600 block mt-1">
${listing.price} ${listing.price}
</span> </span>
@@ -464,7 +464,7 @@ const Home = () => {
<h3 className="text-lg font-medium text-gray-800 leading-tight"> <h3 className="text-lg font-medium text-gray-800 leading-tight">
{history.title} {history.title}
</h3> </h3>
<span className="font-semibold text-green-600 block mt-1"> <span className="font-semibold text-emerald-600 block mt-1">
${history.price} ${history.price}
</span> </span>

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

@@ -247,7 +247,7 @@ const ProductDetail = () => {
if (loading.product) { if (loading.product) {
return ( return (
<div className="flex justify-center items-center h-screen"> <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> </div>
); );
} }
@@ -261,7 +261,7 @@ const ProductDetail = () => {
<p className="text-gray-600">{error.product}</p> <p className="text-gray-600">{error.product}</p>
<Link <Link
to="/" 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 Back to Listings
</Link> </Link>
@@ -278,7 +278,7 @@ const ProductDetail = () => {
<h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2> <h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2>
<Link <Link
to="/" 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 Back to Listings
</Link> </Link>
@@ -293,7 +293,7 @@ const ProductDetail = () => {
<div className="mb-6"> <div className="mb-6">
<Link <Link
to="/search" 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" /> <ArrowLeft className="h-4 w-4 mr-1" />
<span>Back</span> <span>Back</span>
@@ -350,7 +350,7 @@ const ProductDetail = () => {
{product.images.map((image, index) => ( {product.images.map((image, index) => (
<div <div
key={index} 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)} onClick={() => selectImage(index)}
> >
<img <img
@@ -385,7 +385,7 @@ const ProductDetail = () => {
</button> </button>
</div> </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" {typeof product.Price === "number"
? product.Price.toFixed(2) ? product.Price.toFixed(2)
@@ -416,7 +416,7 @@ const ProductDetail = () => {
<div className="relative"> <div className="relative">
<button <button
onClick={() => setShowContactOptions(!showContactOptions)} 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 Contact Seller
</button> </button>
@@ -428,7 +428,7 @@ const ProductDetail = () => {
href={`tel:${product.SellerPhone}`} href={`tel:${product.SellerPhone}`}
className="flex items-center gap-2 p-3 hover:bg-gray-50 border-b border-gray-100" 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> <span>Call Seller</span>
</a> </a>
)} )}
@@ -438,7 +438,7 @@ const ProductDetail = () => {
href={`mailto:${product.SellerEmail}`} href={`mailto:${product.SellerEmail}`}
className="flex items-center gap-2 p-3 hover:bg-gray-50" 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> <span>Email Seller</span>
</a> </a>
)} )}
@@ -475,7 +475,7 @@ const ProductDetail = () => {
<div className="bg-white border border-gray-200 p-6"> <div className="bg-white border border-gray-200 p-6">
{loading.reviews ? ( {loading.reviews ? (
<div className="flex justify-center py-8"> <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> </div>
) : error.reviews ? ( ) : error.reviews ? (
<div className="text-red-500 mb-4"> <div className="text-red-500 mb-4">
@@ -522,7 +522,7 @@ const ProductDetail = () => {
<div className="mt-4"> <div className="mt-4">
<button <button
onClick={() => setShowReviewForm(true)} 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 Write a Review
</button> </button>
@@ -580,7 +580,7 @@ const ProductDetail = () => {
id="comment" id="comment"
value={reviewForm.comment} value={reviewForm.comment}
onChange={handleReviewInputChange} 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" rows="4"
required required
></textarea> ></textarea>
@@ -596,7 +596,7 @@ const ProductDetail = () => {
</button> </button>
<button <button
type="submit" 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} disabled={loading.submitting}
> >
{loading.submitting ? "Submitting..." : "Submit Review"} {loading.submitting ? "Submitting..." : "Submit Review"}

4
frontend/src/pages/SearchPage.jsx
View File

@@ -146,7 +146,7 @@ const SearchPage = () => {
<div className="flex space-x-2"> <div className="flex space-x-2">
<button <button
onClick={applyFilters} 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 Apply Filters
</button> </button>
@@ -187,7 +187,7 @@ const SearchPage = () => {
<h3 className="text-lg font-medium text-gray-800"> <h3 className="text-lg font-medium text-gray-800">
{listing.title} {listing.title}
</h3> </h3>
<p className="text-green-600 font-semibold"> <p className="text-emerald-600 font-semibold">
${Number(listing.price).toFixed(2)} ${Number(listing.price).toFixed(2)}
</p> </p>
</div> </div>

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

@@ -230,7 +230,7 @@ const Settings = () => {
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex justify-center items-center h-64"> <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> </div>
); );
} }
@@ -274,7 +274,7 @@ const Settings = () => {
id="name" id="name"
value={userData.name} value={userData.name}
onChange={handleInputChange} 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 required
/> />
</div> </div>
@@ -291,7 +291,7 @@ const Settings = () => {
id="email" id="email"
value={userData.email} value={userData.email}
onChange={handleInputChange} 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 required
readOnly // Email is often used as identifier and not changeable readOnly // Email is often used as identifier and not changeable
/> />
@@ -309,7 +309,7 @@ const Settings = () => {
id="phone" id="phone"
value={userData.phone} value={userData.phone}
onChange={handleInputChange} 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>
@@ -325,7 +325,7 @@ const Settings = () => {
id="UCID" id="UCID"
value={userData.UCID} value={userData.UCID}
onChange={handleInputChange} 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 required
/> />
</div> </div>
@@ -342,14 +342,14 @@ const Settings = () => {
id="address" id="address"
value={userData.address} value={userData.address}
onChange={handleInputChange} 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>
</div> </div>
<button <button
type="submit" 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 Update Profile
</button> </button>
@@ -381,7 +381,7 @@ const Settings = () => {
id="currentPassword" id="currentPassword"
value={userData.currentPassword} value={userData.currentPassword}
onChange={handleInputChange} 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 required
/> />
</div> </div>
@@ -398,7 +398,7 @@ const Settings = () => {
id="newPassword" id="newPassword"
value={userData.newPassword} value={userData.newPassword}
onChange={handleInputChange} 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 required
/> />
</div> </div>
@@ -415,7 +415,7 @@ const Settings = () => {
id="confirmPassword" id="confirmPassword"
value={userData.confirmPassword} value={userData.confirmPassword}
onChange={handleInputChange} 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 required
/> />
</div> </div>
@@ -423,7 +423,7 @@ const Settings = () => {
<button <button
type="submit" 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 Change Password
</button> </button>