lots of changes

M-Farmaha · Jan 23, 2024 · 9a9bf8e · 9a9bf8e
1 parent 525b2e9
commit 9a9bf8e
Show file tree

Hide file tree

Showing 14 changed files with 107 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
 `;
diff --git 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
@@ -2,40 +2,34 @@ 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%;
 
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--primary-black-color);
 `;
 
 export const LoaderSvg = styled.svg`
   width: 100%;
   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
@@ -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
@@ -6,24 +6,49 @@ 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;
   z-index: 1000;
 `;
 
 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
@@ -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
@@ -11,14 +11,16 @@ 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;
   align-items: center;
 
   width: 50px;
   height: 50px;
+
   border: none;
   border-radius: 50%;
 

diff --git 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
@@ -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