From 5786dcdfde5ab99b5edbaaea895c7cc6e874f6d5 Mon Sep 17 00:00:00 2001
From: mirnawong1 <mirna.wong@fishtownanalytics.com>
Date: Thu, 21 Dec 2023 10:33:31 -0500
Subject: [PATCH 1/4] add hover function + disclaimer css

---
 website/src/components/faqs/index.js          | 53 +++++++++++++------
 website/src/components/faqs/styles.module.css |  6 +++
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/website/src/components/faqs/index.js b/website/src/components/faqs/index.js
index 52c4573d883..58b59227cfb 100644
--- a/website/src/components/faqs/index.js
+++ b/website/src/components/faqs/index.js
@@ -3,10 +3,10 @@ import styles from './styles.module.css';
 import { usePluginData } from '@docusaurus/useGlobalData';
 
 function FAQ({ path, alt_header = null }) {
-
   const [isOn, setOn] = useState(false);
-  const [filePath, setFilePath] = useState(path)
-  const [fileContent, setFileContent] = useState({})
+  const [filePath, setFilePath] = useState(path);
+  const [fileContent, setFileContent] = useState({});
+  const [hoverTimeout, setHoverTimeout] = useState(null);
 
   // Get all faq file paths from plugin
   const { faqFiles } = usePluginData('docusaurus-build-global-data-plugin');
@@ -37,24 +37,45 @@ function FAQ({ path, alt_header = null }) {
     }
   }, [filePath])
 
-  const toggleOn = function () {
-    setOn(!isOn);
+  const handleMouseEnter = () => {
+    setHoverTimeout(setTimeout(() => {
+      setOn(true);
+    }, 500));
+  };
+
+  const handleMouseLeave = () => {
+  if (!isOn) {
+      clearTimeout(hoverTimeout);
+      setOn(false);
   }
+};
+
+  useEffect(() => {
+    return () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+    };
+  }, [hoverTimeout]);
+
+  const toggleOn = () => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+    }
+    setOn(!isOn);
+  };
 
   return (
-    <div className='faqs'>
+    <div className={styles.faqs} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       <span className={styles.link} onClick={toggleOn}>
-        <span className={styles.toggle}
-          style={{
-            transform: isOn ? null : 'rotateX(180deg)'
-          }}>
-        </span >&nbsp;
-        <span>{alt_header || fileContent?.meta && fileContent.meta.title}</span>
-      </span >
-      <div style={{ display: (isOn ? 'block' : 'none') }} className={styles.body}>
-        {fileContent?.contents && fileContent.contents}
+        <span className={styles.toggle} style={{ transform: isOn ? 'rotateX(0deg)' : 'rotateX(180deg)' }}></span>
+        &nbsp;{alt_header || (fileContent?.meta && fileContent.meta.title)}
+        <small className={styles.disclaimer}>Hover to view</small>
+      </span>
+      <div style={{ display: isOn ? 'block' : 'none' }} className={styles.body}>
+        {fileContent?.contents}
       </div>
-    </div >
+    </div>
   );
 }
 
diff --git a/website/src/components/faqs/styles.module.css b/website/src/components/faqs/styles.module.css
index e19156a3a7b..9ce7d4d8a40 100644
--- a/website/src/components/faqs/styles.module.css
+++ b/website/src/components/faqs/styles.module.css
@@ -24,6 +24,12 @@
     filter: invert(1);
 }
 
+:local(.disclaimer) {
+    font-size: 0.8em;
+    color: #666;
+    margin-left: 10px; /* Adjust as needed */
+}
+
 :local(.body) {
     margin-left: 2em;
     margin-bottom: 10px;

From c3e07e7dde5cd85271d88c16d81c49076bf31a4a Mon Sep 17 00:00:00 2001
From: mirnawong1 <89008547+mirnawong1@users.noreply.github.com>
Date: Wed, 3 Jan 2024 12:51:17 -0500
Subject: [PATCH 2/4] Update index.js

---
 website/src/components/detailsToggle/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/detailsToggle/index.js b/website/src/components/detailsToggle/index.js
index ba53192e54b..076d053846c 100644
--- a/website/src/components/detailsToggle/index.js
+++ b/website/src/components/detailsToggle/index.js
@@ -40,7 +40,7 @@ useEffect(() => {
         onMouseLeave={handleMouseLeave}
       >
         <span className={`${styles.toggle} ${isOn ? null : styles.toggleUpsideDown}`}></span>&nbsp;
-        <span>{alt_header}</span>
+        <span className={styles.headerText}>{alt_header}</span>
         {/* Visual disclaimer */}
         <small className={styles.disclaimer}>Hover to view</small>
       </span>

From cf0e36f1b7031edf994525ccb6278253d54d3959 Mon Sep 17 00:00:00 2001
From: mirnawong1 <89008547+mirnawong1@users.noreply.github.com>
Date: Wed, 3 Jan 2024 12:51:27 -0500
Subject: [PATCH 3/4] Update styles.module.css

---
 website/src/components/detailsToggle/styles.module.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/website/src/components/detailsToggle/styles.module.css b/website/src/components/detailsToggle/styles.module.css
index 446d3197128..b9c2f09df06 100644
--- a/website/src/components/detailsToggle/styles.module.css
+++ b/website/src/components/detailsToggle/styles.module.css
@@ -1,9 +1,11 @@
-:local(.link) {
+:local(.link) :local(.headerText) {
     color: var(--ifm-link-color);
-    transition: background-color 0.3s; /* Smooth transition for background color */
+    text-decoration: none;
+    transition: text-decoration 0.3s; /* Smooth transition */
 }
 
-:local(.link:hover), :local(.link:focus) {
+:local(.link:hover) :local(.headerText),
+:local(.link:focus) :local(.headerText) {
     text-decoration: underline;
     cursor: pointer;
 }
@@ -12,6 +14,7 @@
     font-size: 0.8em;
     color: #666;
     margin-left: 10px; /* Adjust as needed */
+    text-decoration: none;
 }
 
 :local(.toggle) {

From c6296980b40eb2867fe93bc420004f7a9aa98535 Mon Sep 17 00:00:00 2001
From: mirnawong1 <mirna.wong@fishtownanalytics.com>
Date: Wed, 3 Jan 2024 16:08:20 -0500
Subject: [PATCH 4/4] remove underline

---
 website/src/components/faqs/index.js          | 2 +-
 website/src/components/faqs/styles.module.css | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/website/src/components/faqs/index.js b/website/src/components/faqs/index.js
index 58b59227cfb..0741a29cd89 100644
--- a/website/src/components/faqs/index.js
+++ b/website/src/components/faqs/index.js
@@ -69,7 +69,7 @@ function FAQ({ path, alt_header = null }) {
     <div className={styles.faqs} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       <span className={styles.link} onClick={toggleOn}>
         <span className={styles.toggle} style={{ transform: isOn ? 'rotateX(0deg)' : 'rotateX(180deg)' }}></span>
-        &nbsp;{alt_header || (fileContent?.meta && fileContent.meta.title)}
+        <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}>
diff --git a/website/src/components/faqs/styles.module.css b/website/src/components/faqs/styles.module.css
index 9ce7d4d8a40..c179aa85cdc 100644
--- a/website/src/components/faqs/styles.module.css
+++ b/website/src/components/faqs/styles.module.css
@@ -1,9 +1,12 @@
 
-:local(.link) {
+:local(.link) :local(.headerText) {
     color: var(--ifm-link-color);
+    text-decoration: none;
+    transition: text-decoration 0.3s; /* Smooth transition */
 }
 
-:local(.link:hover) {
+:local(.link:hover) :local(.headerText),
+:local(.link:focus) :local(.headerText) {
     text-decoration: underline;
     cursor: pointer;
 }
@@ -28,6 +31,7 @@
     font-size: 0.8em;
     color: #666;
     margin-left: 10px; /* Adjust as needed */
+    text-decoration: none;
 }
 
 :local(.body) {