Revert "<iman> update higlight button whatsapp"

This reverts commit b4b36c45de25305f43ee83441f13a75c48b07994.

3 files changed, 41 insertions, 67 deletions

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 99968ca0..62c74e3c 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -7,7 +7,7 @@ import { useProductContext } from '@/contexts/ProductContext';
 import odooApi from '@/core/api/odooApi';
 import whatsappUrl from '@/core/utils/whatsappUrl';
 import Navbar from '../elements/Navbar/Navbar';
-import styles from './BasicLayout.module.css'; // Import modul CSS jika perlu
+import styles from './BasicLayout.module.css'; // Import modul CSS
 
 const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
   ssr: false,
@@ -22,7 +22,6 @@ 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);
@@ -48,8 +47,9 @@ const BasicLayout = ({ children }) => {
   useEffect(() => {
     const handleMouseOut = (event) => {
       const rect = buttonRef.current.getBoundingClientRect();
+      console.log("rect",rect)
       if (event.clientY <= 0) {
-        setButtonPosition(rect)
+        console.log("ini pindah")
         setHighlight(true);
       } else {
         setHighlight(false);
@@ -63,14 +63,6 @@ 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 = [];
@@ -92,50 +84,44 @@ 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'>
-          <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>
+          <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>
       </AnimationLayout>
       <BasicFooter />
diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css
index 4945c420..b89aca9f 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]/30 z-[900];
-    animation: closeOverlay 1s forwards;
+    @apply fixed top-0 left-0 w-full h-full bg-[#4FB84A]/50 z-[900];
+    animation: closeOverlay 10s forwards;
   }
   
   @keyframes closeOverlay {
     from {
-        clip-path: circle(100% at 50% 50%);
+      clip-path: circle(100%);
     }
     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 799fdb02..f1c740d5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -116,19 +116,7 @@ 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')]