<iman> update highlight button

3 files changed, 66 insertions, 40 deletions

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 62c74e3c..c4674344 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -22,6 +22,7 @@ const BasicLayout = ({ children }) => {
   const [urlPath, setUrlPath] = useState(null);
   const [highlight, setHighlight] = useState(false);
   const [buttonPosition, setButtonPosition] = useState(null);
+  const [wobble, setWobble] = useState(false);
 
   const router = useRouter();
   const buttonRef = useRef(null);
@@ -47,9 +48,8 @@ const BasicLayout = ({ children }) => {
   useEffect(() => {
     const handleMouseOut = (event) => {
       const rect = buttonRef.current.getBoundingClientRect();
-      console.log("rect",rect)
       if (event.clientY <= 0) {
-        console.log("ini pindah")
+        setButtonPosition(rect)
         setHighlight(true);
       } else {
         setHighlight(false);
@@ -63,6 +63,14 @@ const BasicLayout = ({ children }) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (highlight) {
+      // Set wobble animation after overlay highlight animation completes
+      const timer = setTimeout(() => setWobble(true), 1000); // Adjust timing if needed
+      return () => clearTimeout(timer);
+    }
+  }, [highlight]);
+
   const recordActivity = async (pathname) => {
     const ONLY_ON_PATH = false;
     const recordedPath = [];
@@ -84,44 +92,50 @@ const BasicLayout = ({ children }) => {
 
   return (
     <>
+    {highlight && buttonPosition && (
+        <div
+          className={styles['overlay-highlight']}
+          style={{
+            '--button-x': `${buttonPosition.x + buttonPosition.width  / 2}px`,
+            '--button-y': `${buttonPosition.y + buttonPosition.height / 2}px`,
+            '--button-radius': `${Math.max(buttonPosition.width, buttonPosition.height) / 2}px`
+          }}
+          onAnimationEnd={() => setHighlight(false)}
+        />
+      )}
       <Navbar />
       <AnimationLayout>
         {children}
-        {highlight && buttonPosition && (
-          <div
-            className={styles['overlay-highlight']}
-            style={{
-              '--button-x': `${buttonPosition.x + buttonPosition.width / 2}px`,
-              '--button-y': `${buttonPosition.y + buttonPosition.height / 2}px`,
-              '--button-radius': `${Math.max(buttonPosition.width, buttonPosition.height) / 2}px`
-            }}
-            onAnimationEnd={() => setHighlight(false)}
-          />
-        )}
         <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
-          <a
-            href={whatsappUrl(templateWA, payloadWA, urlPath)}
-            className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
-            rel='noopener noreferrer'
-            target='_blank'
-            ref={buttonRef}
-          >
-            <Image
-              src='/images/socials/WHATSAPP.svg'
-              alt='Whatsapp'
-              className='block sm:hidden'
-              width={36}
-              height={36}
-            />
-            <Image
-              src='/images/socials/WHATSAPP.svg'
-              alt='Whatsapp'
-              className='hidden sm:block'
-              width={44}
-              height={44}
-            />
-            <span className='text-white font-bold ml-1.5'>Whatsapp</span>
-          </a>
+        <div className='flex flex-row items-center'>
+            <a href={whatsappUrl(templateWA, payloadWA, urlPath)} className='flex flex-row items-center' rel='noopener noreferrer' target='_blank'>
+              <span className={`text-green-300 text-lg font-bold mr-4 ${wobble ? 'animate-wobble' : ''}`} onAnimationEnd={() => setWobble(false)}>
+                Whatsapp
+              </span>
+            </a>
+            <a
+              href={whatsappUrl(templateWA, payloadWA, urlPath)}
+              className='elemen-whatsapp p-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
+              rel='noopener noreferrer'
+              target='_blank'
+              ref={buttonRef}
+            >
+              <Image
+                src='/images/socials/WHATSAPP.svg'
+                alt='Whatsapp'
+                className='block sm:hidden'
+                width={36}
+                height={36}
+              />
+              <Image
+                src='/images/socials/WHATSAPP.svg'
+                alt='Whatsapp'
+                className='hidden sm:block'
+                width={44}
+                height={44}
+              />
+            </a>
+          </div>
         </div>
       </AnimationLayout>
       <BasicFooter />
diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css
index b89aca9f..4945c420 100644
--- a/src/core/components/layouts/BasicLayout.module.css
+++ b/src/core/components/layouts/BasicLayout.module.css
@@ -1,11 +1,11 @@
 .overlay-highlight {
-    @apply fixed top-0 left-0 w-full h-full bg-[#4FB84A]/50 z-[900];
-    animation: closeOverlay 10s forwards;
+    @apply fixed top-0 left-0 w-full h-full  bg-[#4FB84A]/30 z-[900];
+    animation: closeOverlay 1s forwards;
   }
   
   @keyframes closeOverlay {
     from {
-      clip-path: circle(100%);
+        clip-path: circle(100% at 50% 50%);
     }
     to {
       clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y));
diff --git a/tailwind.config.js b/tailwind.config.js
index f1c740d5..799fdb02 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -116,7 +116,19 @@ module.exports = {
           800: '#760A26',
           900: '#610625'
         }
-      }
+      },
+      keyframes: {
+        wobble: {
+          '0%': { transform: 'translateY(0)' },
+          '25%': { transform: 'translateY(-10px)' },
+          '50%': { transform: 'translateY(0)' },
+          '75%': { transform: 'translateY(10px)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+      },
+      animation: {
+        wobble: 'wobble 0.5s ease forwards',
+      },
     }
   },
   plugins: [require('@tailwindcss/line-clamp'), require('@tailwindcss/typography')]