From 9a9bf8ede6bbcb247dd94af956c95e019a706a0e Mon Sep 17 00:00:00 2001
From: M-Farmaha <115003821+M-Farmaha@users.noreply.github.com>
Date: Tue, 23 Jan 2024 05:19:48 +0200
Subject: [PATCH] lots of changes

---
 src/Layout/Layout-styled.jsx                  |  5 ---
 src/Layout/Layout.jsx                         | 13 +++---
 src/components/AppBar/AppBar-styled.jsx       |  2 +-
 .../HeroSection/HeroSection-styled.jsx        |  9 +++-
 .../ImageGallery/ImageGallery-styled.jsx      |  2 +-
 src/components/ImageGallery/ImageGallery.jsx  |  6 +++
 src/components/Loaders/Loaders-styled.jsx     | 24 ++++-------
 src/components/Loaders/Loaders.jsx            | 14 +++---
 src/components/Modal/Modal-styled.jsx         | 43 +++++++++++++++----
 src/components/Modal/Modal.jsx                | 21 +++++++--
 .../ScrollToTopButton-styled.jsx              |  4 +-
 .../ScrollToTopButton/ScrollToTopButton.jsx   |  1 -
 src/index.css                                 | 15 +++++--
 src/sprite.svg                                |  5 +++
 14 files changed, 107 insertions(+), 57 deletions(-)

diff --git a/src/Layout/Layout-styled.jsx b/src/Layout/Layout-styled.jsx
index 6ec07a0..8b13789 100644
--- a/src/Layout/Layout-styled.jsx
+++ b/src/Layout/Layout-styled.jsx
@@ -1,6 +1 @@
-import styled from "styled-components";
 
-export const ScrollWrap = styled.div`
-  height: 100vh;
-  overflow-y: scroll;
-`;
diff --git a/src/Layout/Layout.jsx b/src/Layout/Layout.jsx
index 54bc635..53a3ed1 100644
--- a/src/Layout/Layout.jsx
+++ b/src/Layout/Layout.jsx
@@ -2,21 +2,18 @@ import { Outlet } from "react-router-dom";
 import { AppBar } from "../components/AppBar/AppBar";
 import { Footer } from "../components/Footer/Footer";
 import { ScrollToTopButton } from "../components/ScrollToTopButton/ScrollToTopButton";
-import { ScrollWrap } from "./Layout-styled";
 
 export const Layout = () => {
   return (
     <>
       <AppBar />
 
-      <ScrollWrap>
-        <main style={{ paddingTop: "100px" }}>
-          <Outlet />
-        </main>
+      <main style={{ paddingTop: "100px" }}>
+        <Outlet />
+      </main>
 
-        <Footer />
-        <ScrollToTopButton />
-      </ScrollWrap>
+      <Footer />
+      <ScrollToTopButton />
     </>
   );
 };
diff --git a/src/components/AppBar/AppBar-styled.jsx b/src/components/AppBar/AppBar-styled.jsx
index 45222b2..dc3f65c 100644
--- a/src/components/AppBar/AppBar-styled.jsx
+++ b/src/components/AppBar/AppBar-styled.jsx
@@ -10,7 +10,7 @@ export const HeaderFilter = styled.div`
   z-index: 998;
 
   backdrop-filter: blur(8px);
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, 0.7);
 `;
 
 export const Header = styled.header`
diff --git a/src/components/HeroSection/HeroSection-styled.jsx b/src/components/HeroSection/HeroSection-styled.jsx
index e111e3b..3f1f719 100644
--- a/src/components/HeroSection/HeroSection-styled.jsx
+++ b/src/components/HeroSection/HeroSection-styled.jsx
@@ -20,7 +20,11 @@ export const VideoFilter = styled.div`
   height: 100%;
   z-index: -5;
 
-  background: linear-gradient(to right, var(--secondary-black-color), var(--primary-black-color));
+  background: linear-gradient(
+    to right,
+    var(--secondary-black-color),
+    var(--primary-black-color)
+  );
 
   opacity: 0.6;
 `;
@@ -89,7 +93,8 @@ export const ButtonLink = styled(Link)`
   align-items: center;
 
   background-color: var(--accent-color);
-  color: var(--primary-white-color);
+  color: var(--button-color);
+  box-shadow: var(--box-shadow);
 
   font-size: 16px;
   font-family: "Manrope";
diff --git a/src/components/ImageGallery/ImageGallery-styled.jsx b/src/components/ImageGallery/ImageGallery-styled.jsx
index b2d4124..e437a3d 100644
--- a/src/components/ImageGallery/ImageGallery-styled.jsx
+++ b/src/components/ImageGallery/ImageGallery-styled.jsx
@@ -41,6 +41,6 @@ export const ImageGalleryImg = styled.img`
 
 export const ImageGalleryModalImg = styled.img`
   max-width: 100vw;
-  max-height: calc(100vh - 50px);
+  max-height: calc(100vh - 48px);
   object-fit: scale-down;
 `;
\ No newline at end of file
diff --git a/src/components/ImageGallery/ImageGallery.jsx b/src/components/ImageGallery/ImageGallery.jsx
index 9841cdb..da6d988 100644
--- a/src/components/ImageGallery/ImageGallery.jsx
+++ b/src/components/ImageGallery/ImageGallery.jsx
@@ -10,9 +10,11 @@ import {
 } from "./ImageGallery-styled";
 
 import { Modal } from "../Modal/Modal";
+import { Loader } from "../Loaders/Loaders";
 
 export const ImageGallery = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [selectedImageIndex, setSelectedImageIndex] = useState(0);
   const [galleryArray, setGalleryArray] = useState([]);
 
@@ -32,6 +34,7 @@ export const ImageGallery = () => {
   const openModal = (index) => {
     setSelectedImageIndex(index);
     setIsModalOpen(true);
+    setIsLoading(true);
   };
 
   const closeModal = () => {
@@ -59,11 +62,14 @@ export const ImageGallery = () => {
         </Section>
       )}
 
+      {isLoading && <Loader />}
       {isModalOpen && (
         <Modal closeModal={closeModal}>
+          {isLoading && <Loader />}
           <ImageGalleryModalImg
             src={galleryArray[selectedImageIndex].largeImageURL}
             alt={galleryArray[selectedImageIndex].tags}
+            onLoad={() => setIsLoading(false)}
           />
         </Modal>
       )}
diff --git a/src/components/Loaders/Loaders-styled.jsx b/src/components/Loaders/Loaders-styled.jsx
index 0d6675c..9ffbb07 100644
--- a/src/components/Loaders/Loaders-styled.jsx
+++ b/src/components/Loaders/Loaders-styled.jsx
@@ -2,27 +2,20 @@ import styled, { keyframes } from "styled-components";
 
 const rotate360 = keyframes`
   from {
-    transform:  perspective(500px) rotateY(0deg);
+    transform: rotate(0deg);
   }
 
   to {
-    transform:  perspective(500px) rotateY(360deg);
+    transform: rotate(360deg);
   }
 `;
 
-export const LoaderOverlay = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 99999;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 export const LoaderWWrap = styled.div`
-  color: var(--primary-black-color);
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 
   width: 25%;
   height: 25%;
@@ -30,6 +23,7 @@ export const LoaderWWrap = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--primary-black-color);
 `;
 
 export const LoaderSvg = styled.svg`
@@ -37,5 +31,5 @@ export const LoaderSvg = styled.svg`
   height: 100%;
   fill: currentColor;
 
-  animation: ${rotate360} 1s linear infinite;
+  animation: ${rotate360} 5s linear infinite;
 `;
diff --git a/src/components/Loaders/Loaders.jsx b/src/components/Loaders/Loaders.jsx
index dc18c4a..ebcf7d0 100644
--- a/src/components/Loaders/Loaders.jsx
+++ b/src/components/Loaders/Loaders.jsx
@@ -1,16 +1,14 @@
-import { LoaderOverlay, LoaderSvg, LoaderWWrap } from "./Loaders-styled";
+import { LoaderSvg, LoaderWWrap } from "./Loaders-styled";
 import sprite from "../../sprite.svg";
 
 export const Loader = () => {
   return (
     <>
-      <LoaderOverlay>
-        <LoaderWWrap>
-          <LoaderSvg>
-            <use href={sprite + "#logo-full"}></use>
-          </LoaderSvg>
-        </LoaderWWrap>
-      </LoaderOverlay>
+      <LoaderWWrap>
+        <LoaderSvg>
+          <use href={sprite + "#logo-full"}></use>
+        </LoaderSvg>
+      </LoaderWWrap>
     </>
   );
 };
diff --git a/src/components/Modal/Modal-styled.jsx b/src/components/Modal/Modal-styled.jsx
index 8b2e7a3..6890910 100644
--- a/src/components/Modal/Modal-styled.jsx
+++ b/src/components/Modal/Modal-styled.jsx
@@ -6,7 +6,7 @@ export const ModalOverlay = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  /* backdrop-filter: blur(8px); */
+  backdrop-filter: blur(10px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -14,16 +14,41 @@ export const ModalOverlay = styled.div`
 `;
 
 export const ModalWrap = styled.div`
+  position: relative;
   border-radius: 10px;
-  background-color: var(--primary-black-color);
+  background-color: var(--primary-white-color);
   overflow: hidden;
-  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
-    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
-    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+  box-shadow: var(--box-shadow);
 `;
 
-export const ModalImage = styled.img`
-  max-width: 100vw;
-  max-height: calc(100vh - 50px);
-  object-fit: scale-down;
+export const ButtonClose = styled.button`
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 40px;
+  height: 40px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: var(--accent-color);
+  color: var(--button-color);
+  box-shadow: var(--box-shadow);
+
+  border: none;
+  border-radius: 50%;
+
+  transition: var(--main-transition);
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--accent-hover-color);
+  }
+`;
+
+export const CloseIcon = styled.svg`
+  width: 75%;
+  height: 75%;
+  stroke: currentcolor;
 `;
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
index b6b2a8b..28ae3f0 100644
--- a/src/components/Modal/Modal.jsx
+++ b/src/components/Modal/Modal.jsx
@@ -1,5 +1,12 @@
 import { useEffect } from "react";
-import { ModalOverlay, ModalWrap } from "./Modal-styled";
+import {
+  ButtonClose,
+  CloseIcon,
+  ModalOverlay,
+  ModalWrap,
+} from "./Modal-styled";
+
+import sprite from "../../sprite.svg";
 
 export const Modal = ({ children, closeModal }) => {
   useEffect(() => {
@@ -8,9 +15,10 @@ export const Modal = ({ children, closeModal }) => {
     };
 
     window.addEventListener("keydown", handlePressESC);
-
+    document.body.classList.add("modal-open");
     return () => {
       window.removeEventListener("keydown", handlePressESC);
+      document.body.classList.remove("modal-open");
     };
   }, [closeModal]);
 
@@ -21,7 +29,14 @@ export const Modal = ({ children, closeModal }) => {
   return (
     <>
       <ModalOverlay onClick={handleOverlayClick}>
-        <ModalWrap>{children}</ModalWrap>
+        <ModalWrap>
+          <ButtonClose type="button" onClick={closeModal}>
+            <CloseIcon>
+              <use href={sprite + "#icon-close"}></use>
+            </CloseIcon>
+          </ButtonClose>
+          {children}
+        </ModalWrap>
       </ModalOverlay>
     </>
   );
diff --git a/src/components/ScrollToTopButton/ScrollToTopButton-styled.jsx b/src/components/ScrollToTopButton/ScrollToTopButton-styled.jsx
index 3b34e21..759feaf 100644
--- a/src/components/ScrollToTopButton/ScrollToTopButton-styled.jsx
+++ b/src/components/ScrollToTopButton/ScrollToTopButton-styled.jsx
@@ -11,7 +11,8 @@ export const Button = styled.button`
   }}
 
   background-color: var(--accent-color);
-  color: var(--primary-white-color);
+  color: var(--button-color);
+  box-shadow: var(--box-shadow);
 
   display: flex;
   justify-content: center;
@@ -19,6 +20,7 @@ export const Button = styled.button`
 
   width: 50px;
   height: 50px;
+
   border: none;
   border-radius: 50%;
 
diff --git a/src/components/ScrollToTopButton/ScrollToTopButton.jsx b/src/components/ScrollToTopButton/ScrollToTopButton.jsx
index f250ffc..9b7be22 100644
--- a/src/components/ScrollToTopButton/ScrollToTopButton.jsx
+++ b/src/components/ScrollToTopButton/ScrollToTopButton.jsx
@@ -9,7 +9,6 @@ export const ScrollToTopButton = () => {
 
   const handleScroll = () => {
     const scrollTop = window.scrollY;
-    console.log(scrollTop);
     const scrollBottom =
       document.documentElement.scrollHeight -
       window.innerHeight -
diff --git a/src/index.css b/src/index.css
index bb6203f..2ab532a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,15 @@
 :root {
   --main-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
 
+  --box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
+    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
+    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+
   --accent-color: rgb(105, 150, 0);
   --accent-hover-color: rgb(151, 211, 0);
 
+  --button-color: rgb(255, 255, 255);
+
   --primary-red-color: #ff004c;
 
   --primary-black-color: #222c44;
@@ -21,7 +27,10 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  overflow: hidden;
+  &.modal-open {
+    overflow: hidden;
+  }
+
 
 }
 
@@ -66,8 +75,8 @@ input {
 }
 
 ::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+  width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-track {
diff --git a/src/sprite.svg b/src/sprite.svg
index 031a7e4..4dc3b4a 100644
--- a/src/sprite.svg
+++ b/src/sprite.svg
@@ -485,5 +485,10 @@
 <path d="M10.225 24.854c1.728-1.13 3.877-1.989 6.243-2.513-0.47-0.556-0.897-1.176-1.265-1.844-0.95-1.726-1.453-3.627-1.453-5.497 0-2.689 0-5.228 0.956-7.305 0.928-2.016 2.598-3.265 4.976-3.734-0.529-2.39-1.936-3.961-5.682-3.961-6 0-6 4.029-6 9 0 3.096 1.797 6.191 4 7.432v1.649c-6.784 0.555-12 3.888-12 7.918h8.719c0.454-0.403 0.956-0.787 1.506-1.146z"></path>
 </symbol>
 
+<symbol id="icon-close" viewBox="0 0 32 32">
+    <path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M24 8l-16 16"></path>
+    <path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M8 8l16 16"></path>
+</symbol>
+
 </defs>
 </svg>