fix body overlay when basket open

infoshareacademy · Mar 2, 2024 · f092bd2 · f092bd2
1 parent fa39d52
commit f092bd2
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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 {