Minor tweaks, changed checkout UI

web/app/adopt/page.js

@@ -131,7 +131,7 @@ export default function AdoptPage() {
             <input
               className={`${inputCls} flex-1 max-w-[400px] font-[inherit] max-[600px]:max-w-full`}
               type="text"
-              placeholder="Search by name, species, or breed..."
+              placeholder="Search"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
             />

web/app/products/page.js

@@ -56,7 +56,7 @@ export default function ProductsPage() {
             <input
               className="flex-1 max-w-[400px] px-4 py-[0.6rem] border-2 border-[#ddd] rounded-md text-base outline-none transition-colors focus:border-[#e68672] font-[inherit]"
               type="text"
-              placeholder="Search by name or category..."
+              placeholder="Search"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
             />

web/components/ProductProfile.js

@@ -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?.type === "error" && (
-                {feedback && (
+                <p className="mt-3 text-[0.9rem] rounded-lg px-4 py-[0.6rem] m-0 bg-[#fff0f0] border border-[#f5c6c6] text-[#c0392b]">
-                  <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>
             </>
           )}
         </div>

web/public/bootstrap/cart-plus-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart-plus-fill" viewBox="0 0 16 16">
+  <path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0m7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M9 5.5V7h1.5a.5.5 0 0 1 0 1H9v1.5a.5.5 0 0 1-1 0V8H6.5a.5.5 0 0 1 0-1H8V5.5a.5.5 0 0 1 1 0"/>
+</svg>