Revert "Blurry load"

This reverts commit fab698d676d43a46b0fd5df592915ca12111dbcb.

6 files changed, 14 insertions, 83 deletions

diff --git a/client/src/blurry-load.css b/client/src/blurry-load.css
deleted file mode 100644
index df1dd09..0000000
--- a/client/src/blurry-load.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.blurry-load {
-    filter: blur(6px);
-    transition: all .6s ease-in;
-}
-
-.blur-out {
-    filter: none!important
-}
\ No newline at end of file
diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx
index 4d722e8..f1f676f 100644
--- a/client/src/components/AdminLogin.tsx
+++ b/client/src/components/AdminLogin.tsx
@@ -107,7 +107,7 @@ function GuestLogin() {
             endAdornment: (
               <InputAdornment position="end">
                 <IconButton onClick={handleClickShowPassword}>
-                  {showPassword ? <Visibility /> : <VisibilityOff />}
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
                 </IconButton>
               </InputAdornment>
             ),
diff --git a/client/src/components/BlurryLoadImg.tsx b/client/src/components/BlurryLoadImg.tsx
deleted file mode 100644
index c28aa45..0000000
--- a/client/src/components/BlurryLoadImg.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { ClassAttributes, ImgHTMLAttributes } from 'react';
-import { JSX } from 'react/jsx-runtime';
-import { useBlurryLoad } from '../useBlurryLoad.ts';
-
-export const BlurryLoadImg = (
-  props: JSX.IntrinsicAttributes &
-    ClassAttributes<HTMLImageElement> &
-    ImgHTMLAttributes<HTMLImageElement> & { 'data-large': string }
-) => {
-  useBlurryLoad();
-  return (
-    <img alt="" {...props} className={`blurry-load ${props.className}`}></img>
-  );
-};
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index 79743a5..f735195 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -1,33 +1,30 @@
 import React from 'react';
 import { useEffect, useState } from 'react';
 import './Carousel.css';
-import { BlurryLoadImg } from './BlurryLoadImg';
-
-const images = [
-  { small: '/small/engagement1.webp', full: '/full/engagement1.jpg' },
-  { small: '/small/engagement2.webp', full: '/full/engagement2.jpg' },
-  { small: '/small/engagement3.webp', full: '/full/engagement3.jpg' },
-  { small: '/small/engagement4.webp', full: '/full/engagement4.jpg' },
-  { small: '/small/engagement5.webp', full: '/full/engagement5.jpg' },
-  { small: '/small/engagement6.webp', full: '/full/engagement6.jpg' },
-];
+import p0 from '/EngagmentSession_06.23.2024-131.jpg';
+import p1 from '/EngagmentSession_06.23.2024-161.jpg';
+import p2 from '/EngagmentSession_06.23.2024-164.jpg';
+import p3 from '/EngagmentSession_06.23.2024-259.jpg';
+import p4 from '/EngagmentSession_06.23.2024-267.jpg';
+import p5 from '/EngagmentSession_06.23.2024-284.jpg';
 
 function Home() {
   const [currentIndex, setIndex] = useState<number>(0);
+  const photos = [p0, p1, p2, p3, p4, p5];
 
   useEffect(() => {
     const interval = setInterval(() => {
       setIndex((prevIndex) =>
-        prevIndex === images.length - 1 ? 0 : prevIndex + 1
+        prevIndex === photos.length - 1 ? 0 : prevIndex + 1
       );
     }, 3000);
     return () => clearInterval(interval);
-  }, [images.length]);
+  }, [photos.length]);
 
   return (
     <div className="carousel-container">
       <div className="carousel">
-        {images.map((image, index) => (
+        {photos.map((photo, index) => (
           <div
             key={index}
             className={
@@ -36,10 +33,7 @@ function Home() {
                 : 'carousel-slide'
             }
           >
-            <BlurryLoadImg
-              src={image.small}
-              data-large={`${image.full}`}
-            ></BlurryLoadImg>
+            <img src={photo}></img>
           </div>
         ))}
       </div>
diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx
index fc1fb64..64140e4 100644
--- a/client/src/components/Schedule.tsx
+++ b/client/src/components/Schedule.tsx
@@ -6,6 +6,7 @@ import {
   useMediaQuery,
   useTheme,
 } from '@mui/material';
+import divineShepherd from '/divine-shepherd.jpg';
 import InsertInvitationIcon from '@mui/icons-material/InsertInvitation';
 import { useAppDispatch } from '../hooks';
 import { showDialog } from '../slices/uiSlice';
@@ -26,12 +27,9 @@ function Schedule() {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundImage: `url(${
-          isMobile ? 'none' : '/small/divine-shepherd.webp'
-        })`,
+        backgroundImage: `url(${isMobile ? 'none' : divineShepherd})`,
         backgroundSize: 'cover',
       }}
-      data-large="/full/divine-shepherd.jpg"
     >
       <Paper
         elevation={3}
diff --git a/client/src/useBlurryLoad.ts b/client/src/useBlurryLoad.ts
deleted file mode 100644
index 59069d2..0000000
--- a/client/src/useBlurryLoad.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useEffect } from 'react';
-import './blurry-load.css';
-
-export interface UseBlurryLoadProps {
-  toBlurImages?: Element[];
-}
-
-export const useBlurryLoad = (props?: UseBlurryLoadProps) => {
-  const { toBlurImages = [] } = props ?? {};
-
-  useEffect(() => {
-    const images: Element[] = [...toBlurImages];
-    if (toBlurImages.length === 0) {
-      images.push(...document.querySelectorAll('.blurry-load'));
-    }
-
-    const lazyImageObserver = new IntersectionObserver(function (entries) {
-      entries.forEach(function (entry) {
-        if (!entry.isIntersecting) return;
-
-        const image = entry.target;
-        const currentImage = new Image();
-        currentImage.setAttribute(
-          'src',
-          image.getAttribute('data-large') ?? ''
-        );
-
-        currentImage.onload = () => {
-          image.setAttribute('src', currentImage.src);
-          image.classList.add('blur-out');
-        };
-        lazyImageObserver.unobserve(image);
-      });
-    });
-
-    images.forEach((img) => lazyImageObserver.observe(img));
-  }, [toBlurImages]);
-};