From f092bd29abc4c5c237d6f83b845fb119d77e769d Mon Sep 17 00:00:00 2001
From: Halyna Riabokonenko <sgallina89@gmail.com>
Date: Sat, 2 Mar 2024 22:59:11 +0100
Subject: [PATCH] fix body overlay when basket open

---
 .../Components/BasketModal/BasketModal.jsx    | 37 +++++++++----------
 .../BasketModal/BasketModal.module.css        |  2 +-
 .../Components/Portfolio/Portfolio.module.css | 14 ++++---
 3 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/my-app/src/Components/BasketModal/BasketModal.jsx b/my-app/src/Components/BasketModal/BasketModal.jsx
index 83e38fe..1183f53 100644
--- a/my-app/src/Components/BasketModal/BasketModal.jsx
+++ b/my-app/src/Components/BasketModal/BasketModal.jsx
@@ -5,6 +5,7 @@ import { ThemeContext } from "../../providers/theme.tsx";
 
 export const BasketModal = ({ isOpen, onClose }) => {
   const { theme } = useContext(ThemeContext);
+
   useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -28,24 +29,22 @@ export const BasketModal = ({ isOpen, onClose }) => {
   }, [isOpen]);
 
   return (
-    <>
-      <div style={{ display: isOpen ? "block" : "none" }}>
-        {isOpen && (
-          <div className="basket-modal__overlay" onClick={onClose}></div>
-        )}
-
-        <Modal>
-          <button
-            className={`${styles["basket-modal__button-close"]} ${styles[theme]}`}
-            onClick={onClose}
-          >
-            x
-          </button>
-          <div>
-            <h1>Basket modal </h1>
-          </div>
-        </Modal>
-      </div>
-    </>
+    <div style={{ display: isOpen ? "block" : "none" }}>
+      <div
+        className={`${styles["basket-modal__overlay"]}`}
+        onClick={onClose}
+      ></div>
+      <Modal>
+        <button
+          className={`${styles["basket-modal__button-close"]} ${styles[theme]}`}
+          onClick={onClose}
+        >
+          x
+        </button>
+        <div>
+          <h1>Basket modal</h1>
+        </div>
+      </Modal>
+    </div>
   );
 };
diff --git a/my-app/src/Components/BasketModal/BasketModal.module.css b/my-app/src/Components/BasketModal/BasketModal.module.css
index 9abfa5d..ee9c1b7 100644
--- a/my-app/src/Components/BasketModal/BasketModal.module.css
+++ b/my-app/src/Components/BasketModal/BasketModal.module.css
@@ -25,6 +25,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(114, 111, 111, 0.5);
   z-index: 1;
 }
diff --git a/my-app/src/Components/Portfolio/Portfolio.module.css b/my-app/src/Components/Portfolio/Portfolio.module.css
index c3fbcc9..0adc739 100644
--- a/my-app/src/Components/Portfolio/Portfolio.module.css
+++ b/my-app/src/Components/Portfolio/Portfolio.module.css
@@ -14,14 +14,16 @@
 }
 
 .portfolio__info {
-  font-size: 1.3rem;
-  color: var(--main-text-color);
-  margin: 10px;
-  width: 100%;
+  font-weight: 400;
+  font-size: 20px;
+  letter-spacing: 2px;
+  word-spacing: 5px;
+  justify-self: center;
+  text-align: center;
+  margin: 20px 0px 20px 40px;
+  word-spacing: 5px;
   text-align: justify;
-  padding: 0 70px;
   line-height: 150%;
-  font-weight: 500;
 }
 
 .portfolio__photos {