From fe519e8685505f12580e00394bfe98b0fd312164 Mon Sep 17 00:00:00 2001
From: mirnawong1 <mirna.wong@fishtownanalytics.com>
Date: Tue, 30 Jan 2024 20:20:45 +0000
Subject: [PATCH] remove hover

---
 website/src/components/detailsToggle/index.js | 41 +------------------
 website/src/components/faqs/index.js          | 15 +------
 2 files changed, 2 insertions(+), 54 deletions(-)

diff --git a/website/src/components/detailsToggle/index.js b/website/src/components/detailsToggle/index.js
index 514ca52ba13..9f69d60aba6 100644
--- a/website/src/components/detailsToggle/index.js
+++ b/website/src/components/detailsToggle/index.js
@@ -3,47 +3,12 @@ import styles from './styles.module.css';
 
 function detailsToggle({ children, alt_header = null }) {
   const [isOn, setOn] = useState(false);
-  const [isScrolling, setIsScrolling] = useState(false); // New state to track scrolling
   const [hoverTimeout, setHoverTimeout] = useState(null);
 
   const handleToggleClick = () => {
-    setOn(current => !current); // Toggle the current state
+    setOn(current => !current);
   };
 
-  const handleMouseEnter = () => {
-    if (isOn || isScrolling) return; // Ignore hover if already open or if scrolling
-    const timeout = setTimeout(() => {
-      if (!isScrolling) setOn(true);
-    }, 700); // 
-    setHoverTimeout(timeout);
-  };
-  
-  const handleMouseLeave = () => {
-    if (!isOn) {
-      clearTimeout(hoverTimeout);
-      setOn(false);
-    }
-  };
-
-  const handleScroll = () => {
-    setIsScrolling(true);
-    clearTimeout(hoverTimeout);
-    //setOn(false);
-
-
-    // Reset scrolling state after a  delay
-    setTimeout(() => {
-      setIsScrolling(false);
-    }, 800);
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-
   useEffect(() => {
     return () => clearTimeout(hoverTimeout);
   }, [hoverTimeout]);
@@ -53,13 +18,9 @@ function detailsToggle({ children, alt_header = null }) {
       <span 
         className={styles.link} 
         onClick={handleToggleClick}
-        onMouseEnter={handleMouseEnter} 
-        onMouseLeave={handleMouseLeave}
       >
         <span className={`${styles.toggle} ${isOn ? null : styles.toggleUpsideDown}`}></span>&nbsp;
         <span className={styles.headerText}>{alt_header}</span>
-        {/* Visual disclaimer */}
-        <small className={styles.disclaimer}>Hover to view</small>
       </span>
       <div 
         style={{ display: isOn ? 'block' : 'none' }} 
diff --git a/website/src/components/faqs/index.js b/website/src/components/faqs/index.js
index 0741a29cd89..ccacaf66071 100644
--- a/website/src/components/faqs/index.js
+++ b/website/src/components/faqs/index.js
@@ -37,18 +37,6 @@ function FAQ({ path, alt_header = null }) {
     }
   }, [filePath])
 
-  const handleMouseEnter = () => {
-    setHoverTimeout(setTimeout(() => {
-      setOn(true);
-    }, 500));
-  };
-
-  const handleMouseLeave = () => {
-  if (!isOn) {
-      clearTimeout(hoverTimeout);
-      setOn(false);
-  }
-};
 
   useEffect(() => {
     return () => {
@@ -66,11 +54,10 @@ function FAQ({ path, alt_header = null }) {
   };
 
   return (
-    <div className={styles.faqs} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+    <div className={styles.faqs}>
       <span className={styles.link} onClick={toggleOn}>
         <span className={styles.toggle} style={{ transform: isOn ? 'rotateX(0deg)' : 'rotateX(180deg)' }}></span>
         <span className={styles.headerText}>{alt_header || (fileContent?.meta && fileContent.meta.title)}</span>
-        <small className={styles.disclaimer}>Hover to view</small>
       </span>
       <div style={{ display: isOn ? 'block' : 'none' }} className={styles.body}>
         {fileContent?.contents}