From 6da94a516b2b59affab377a1d0fd2ec3679f1b8f Mon Sep 17 00:00:00 2001
From: Halyna Riabokonenko <sgallina89@gmail.com>
Date: Sat, 2 Mar 2024 23:21:12 +0100
Subject: [PATCH] add styles to disabled button at PortfolioImage

---
 .../PortfolioImage/PortfolioImage.jsx         | 27 +++++++++++++++----
 .../PortfolioImage/PortfolioImage.module.css  | 13 ++++++++-
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
index 079c591..3612702 100644
--- a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
+++ b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
@@ -25,6 +25,10 @@ export const PortfolioImage = () => {
     fetchData();
   }, [imageId]);
 
+  const addToBasket = () => {
+    console.log("ADDED");
+  };
+
   if (!photo) {
     return <div>Loading...</div>;
   }
@@ -41,11 +45,24 @@ export const PortfolioImage = () => {
         </p>
         <h3>Price: {photo.price}$</h3>
       </div>
-      <button
-        className={classnames(styles["portfolio__input--buy"], styles[theme])}
-      >
-        {photo.amount ? "Add to basket" : "Out of stock"}
-      </button>
+      {photo.amount ? (
+        <button
+          onClick={addToBasket}
+          className={classnames(styles["portfolio__input--buy"], styles[theme])}
+        >
+          Add to basket
+        </button>
+      ) : (
+        <button
+          disabled
+          className={classnames(
+            styles["portfolio__input--buy--disabled"],
+            styles[theme]
+          )}
+        >
+          Out of stock
+        </button>
+      )}
     </div>
   );
 };
diff --git a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.module.css b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.module.css
index d3d085e..85687a7 100644
--- a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.module.css
+++ b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.module.css
@@ -11,7 +11,8 @@
   border-radius: 35px;
 }
 
-.portfolio__input--buy {
+.portfolio__input--buy,
+.portfolio__input--buy--disabled {
   align-self: center;
   padding: 2px 20px;
   margin: 20px 20px;
@@ -32,6 +33,11 @@
   color: var(--main-text-color-dark);
 }
 
+.portfolio__input--buy--disabled.light {
+  color: var(--box-light-color-light);
+  background-color: rgb(202, 200, 200);
+}
+
 .portfolio__input--buy.light {
   color: var(--dark-text-color-light);
   background-color: var(--box-dark-color-light);
@@ -42,6 +48,11 @@
   background-color: var(--dark-hover-color-light);
 }
 
+.portfolio__input--buy--disabled.dark {
+  color: var(--dark-text-color-light);
+  background-color: rgb(166, 165, 165);
+}
+
 .portfolio__input--buy.dark {
   color: var(--dark-text-color-dark);
   background-color: var(--box-dark-color-dark);