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

UI Color update

Browse Source
This commit is contained in:
Mann Patel
2025-04-21 22:46:39 -06:00
parent 0a1db869f7
commit 4ba6dfa7be
17 changed files with 109 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/App.jsx
View File

@@ -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>

8
frontend/src/components/CategoryForm.jsx
View File

@@ -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

1
frontend/src/components/DashboardNav.jsx
View File

@@ -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"

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

@@ -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>
);

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

@@ -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>

8
frontend/src/components/Pagination.jsx
View File

@@ -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

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

@@ -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>

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

@@ -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);

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

@@ -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>

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

@@ -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>

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

@@ -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"}

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

@@ -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>

33
frontend/src/pages/Selling.jsx
View File

@@ -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>
);
};

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

@@ -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>
);
};

66
frontend/src/pages/Transactions.jsx
View File

@@ -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>