RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor tweaks, changed checkout UI

Browse Source
This commit is contained in:
augmentedpotato
2026-04-20 05:41:36 -06:00
parent a717837bd4
commit d3b9c51952
4 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/components/ProductProfile.js
View File

@@ -26,6 +26,7 @@ export default function ProductProfile({ prodId, prodName, categoryName, prodDes
await addItem(prodId, quantity);
setFeedback({ type: "success", message: `${quantity} × ${prodName} added to cart!` });
setQuantity(1);
setTimeout(() => setFeedback(null), 1000);
} catch (err) {
setFeedback({ type: "error", message: err.message ?? "Failed to add to cart." });
} finally {
@@ -90,20 +91,20 @@ export default function ProductProfile({ prodId, prodName, categoryName, prodDes
</div>
<button
className="w-full py-[0.85rem] bg-[#e68672] text-[#2f2f2f] border-none rounded-[10px] text-base font-bold cursor-pointer transition-all hover:bg-[#d4705e] hover:text-white active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed"
className="w-full py-[0.85rem] border-none rounded-[10px] text-base font-bold cursor-pointer transition-all active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-2"
style={feedback?.type === "success" ? { background: "#2ecc71", color: "white", boxShadow: "0 0 16px 4px rgba(46,204,113,0.6)" } : { background: "#e68672", color: "#2f2f2f" }}
onClick={handleAddToCart}
disabled={adding}
>
<img src="/bootstrap/cart-plus-fill.svg" alt="" className="w-5 h-5" style={{ filter: "brightness(0) invert(0.2)" }} />
{adding ? "Adding…" : "Add to Cart"}
</button>
<div className="mt-3 h-[44px] overflow-hidden">
{feedback && (
<p className={`text-[0.9rem] rounded-lg px-4 py-[0.6rem] m-0 ${feedback.type === "success" ? "bg-[#f0fff4] border border-[#b2dfdb] text-[#1a7a3c]" : "bg-[#fff0f0] border border-[#f5c6c6] text-[#c0392b]"}`}>
{feedback.message}
</p>
)}
</div>
{feedback?.type === "error" && (
<p className="mt-3 text-[0.9rem] rounded-lg px-4 py-[0.6rem] m-0 bg-[#fff0f0] border border-[#f5c6c6] text-[#c0392b]">
{feedback.message}
</p>
)}
</>
)}
</div>