Merge pull request #43 from infoshareacademy/hriabokonenko/basket

Hriabokonenko/basket
infoshareacademy · Mar 2, 2024 · d501244 · d501244
2 parents 59ad05b + f092bd2
commit d501244
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 48 deletions.
diff --git a/my-app/public/images/main-img-dark.png b/my-app/public/images/main-img-dark.png
diff --git a/my-app/public/images/main-img-dark1.png b/my-app/public/images/main-img-dark1.png
diff --git a/my-app/public/images/main-img.png b/my-app/public/images/main-img.png
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/Footer/Footer.module.css b/my-app/src/Components/Footer/Footer.module.css
@@ -4,7 +4,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-top: 0.5px solid rgba(63, 63, 54, 30%);
 }
 
 .footer__text {
@@ -23,4 +22,4 @@
 .dark {
   background-color: var(--box-dark-color-dark);
   color: var(--main-text-color-dark);
-}
+}
diff --git a/my-app/src/Components/Header/Header.module.css b/my-app/src/Components/Header/Header.module.css
@@ -6,7 +6,6 @@
   z-index: 1;
   display: flex;
   flex-direction: row;
-  border-bottom: 0.5px solid rgba(63, 63, 54, 30%);
 }
 
 .header__image-border-container {

diff --git a/my-app/src/Components/LandingPage/LandingPage.tsx b/my-app/src/Components/LandingPage/LandingPage.tsx
@@ -1,9 +1,9 @@
-import {ReactElement, useState, useEffect, useContext } from "react";
+import { ReactElement, useState, useEffect, useContext } from "react";
 import styles from "./LandingPage.module.css";
 import { ThemeContext } from "../../providers/theme.tsx";
 import { LandingPageProps } from "./LandingPage.types";
 
-export const LandingPage = ({ quotes }:LandingPageProps):ReactElement => {
+export const LandingPage = ({ quotes }: LandingPageProps): ReactElement => {
   const [quote, setQuote] = useState<string>(quotes[0]);
 
   const { theme } = useContext(ThemeContext);
@@ -30,10 +30,11 @@ export const LandingPage = ({ quotes }:LandingPageProps):ReactElement => {
           </p>
         </div>
         <div className={styles["info__image-container"]}>
-          <img
-            className={styles["info__img"]}
-            src="../public/images/studio.png"
-          ></img>
+          {theme === "light" ? (
+            <img className={styles["info__img"]} src="../public/images/main-img.png" />
+          ) : (
+            <img className={styles["info__img"]} src="../public/images/main-img-dark1.png" />
+          )}
         </div>
       </div>
     </div>

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 {
@@ -55,12 +57,12 @@
   width: 250px;
   height: 150px;
   border-radius: 25px;
-  transition: 0.5s all ease-in-out;
-  border: 0.3px solid var(--box-light-color-dark);
+  opacity: 1;
 }
 
 .portfolio__photo:hover {
-  transform: scale(1.1);
+  /* transform: scale(1.1); */
+  opacity: 0.3;
 }
 
 .portfolio {
@@ -82,6 +84,57 @@
   color: var(--main-text-color-dark);
 }
 
-.dark .portfolio__photo {
-  border: 0.3px solid white;
+.portfolio__photo-container {
+  position: relative;
+  width: 250px;
+  height: 150px;
+}
+
+.portfolio__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(83, 77, 77, 0.434);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--box-light-color-light);
+  font-size: 24px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  border-radius: 25px;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-style: normal;
+}
+
+.portfolio__photo-container:hover .portfolio__overlay {
+  opacity: 1;
+}
+
+.portfolio__photo {
+  width: 100%;
+  height: 100%;
+  border-radius: 25px;
+  object-fit: cover;
+}
+
+.portfolio__photos {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 40px;
+  border-radius: 20px;
+  font-style: oblique;
+  margin: 10px 40px;
+}
+
+.portfolio__items {
+  margin: 20px 20px 5px 20px;
+  width: 20%;
+  display: flex;
+  flex-direction: column;
 }
diff --git a/my-app/src/Components/Portfolio/Portfolio.tsx b/my-app/src/Components/Portfolio/Portfolio.tsx
@@ -47,14 +47,19 @@ export const Portfolio = () => {
           {portfolioData.map((photo) => (
             <div key={photo.id} className={styles["portfolio__items"]}>
               <Link to={`/portfolio/${photo.id}`}>
-                <img
-                  src={photo.url}
-                  className={styles["portfolio__photo"]}
-                  data-id={photo.id}
-                  onClick={() => {
-                    setImageId(photo.id);
-                  }}
-                />
+                <div className={styles["portfolio__items"]}>
+                  <div className={styles["portfolio__photo-container"]}>
+                    <img
+                      src={photo.url}
+                      className={styles["portfolio__photo"]}
+                      data-id={photo.id}
+                      onClick={() => {
+                        setImageId(photo.id);
+                      }}
+                    />
+                    <div className={styles["portfolio__overlay"]}>open</div>
+                  </div>
+                </div>
               </Link>
             </div>
           ))}