From 358e5d393609ca4bfe947ebfcf05cb78d43c2e5e Mon Sep 17 00:00:00 2001
From: Cooper Werner <cooperwerner824@gmail.com>
Date: Thu, 2 May 2024 21:25:49 -0400
Subject: [PATCH] fixing more bugs with the subway motif

---
 components/faq/faq.tsx | 15 +++++++++++++--
 pages/index.tsx        | 19 ++++++++++++++++---
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/components/faq/faq.tsx b/components/faq/faq.tsx
index 2ca75d0..7f913bc 100644
--- a/components/faq/faq.tsx
+++ b/components/faq/faq.tsx
@@ -59,26 +59,34 @@ const faqs: FAQ[] = [
 	},
 ];
 
+function isMobileDevice() {
+	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+
 const FAQPage = () => {
 	const [highlightFAQ, setHighlightFAQ] = useState(false);
 	const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+	const [faqTop, setFaqTop] = useState(0);
 
 	useEffect(() => {
 		// Highlight the FAQ section in the navbar when the user scrolls to it
 		let faqStart = (document.getElementById("faq")?.offsetTop || window.innerHeight) - 140;
 		let faqEnd = faqStart + (document.getElementById("faq")?.offsetHeight || window.innerHeight);
+		setFaqTop(faqStart + 140);
 
 		// Update whether the faq should be highlighted when the user scrolls
 		const handleScroll = () => {
 			setHighlightFAQ(window.scrollY > faqStart && window.scrollY < faqEnd);
 			faqStart = (document.getElementById("faq")?.offsetTop || window.innerHeight) - 140;
 			faqEnd = faqStart + (document.getElementById("faq")?.offsetHeight || window.innerHeight);
+			setFaqTop(faqStart + 140);
 		};
 
 		// Update the faqStart and faqEnd when the user resizes the window
 		const handleResize = () => {
 			faqStart = (document.getElementById("faq")?.offsetTop || window.innerHeight) - 140;
 			faqEnd = faqStart + (document.getElementById("faq")?.offsetHeight || window.innerHeight);
+			setFaqTop(faqStart + 140);
 		};
 
 		window.addEventListener("resize", handleResize);
@@ -101,8 +109,11 @@ const FAQPage = () => {
 				<div>
 					<div
 						className={`${
-							highlightFAQ ? "fixed top-32 bg-white" : "absolute bg-hackrpi-secondary-dark-blue"
-						} w-12 h-12 rounded-full border-[6px] border-hackrpi-primary-blue transition-colors duration-300 z-[5] right-1.5 2xs:right-3.5`}
+							highlightFAQ ? `fixed bg-white ${isMobileDevice() ? "right-9" :"right-3.5"}` : "absolute bg-hackrpi-secondary-dark-blue right-3.5"
+						} w-12 h-12 rounded-full border-[6px] border-hackrpi-primary-blue transition-colors duration-300 z-[5]  `}
+						style={{
+							top: highlightFAQ ? "8rem" : faqTop - 20 + "px",
+						}}
 					></div>
 				</div>
 			</div>
diff --git a/pages/index.tsx b/pages/index.tsx
index eab9376..0089106 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,18 +10,25 @@ import { useEffect, useState } from "react";
 export default function Home() {
 	const [lineStart, setLineStart] = useState(0);
 	const [lineEnd, setLineEnd] = useState(0);
+	const [faqStart, setFaqStart] = useState(0);
 
 	useEffect(() => {
 		setLineStart(document.getElementById("about")!.offsetTop);
 		setLineEnd(document.getElementById("faq")!.offsetTop + document.getElementById("faq")!.offsetHeight);
+		setFaqStart(document.getElementById("faq")!.offsetTop);
 
 		const handleResize = () => {
 			setLineStart(document.getElementById("about")!.offsetTop);
 			setLineEnd(document.getElementById("faq")!.offsetTop + document.getElementById("faq")!.offsetHeight);
+			setFaqStart(document.getElementById("faq")!.offsetTop);
 		};
 
 		window.addEventListener("resize", handleResize);
-		return () => window.removeEventListener("resize", handleResize);
+		window.addEventListener("scroll", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+			window.removeEventListener("scroll", handleResize);
+		};
 	}, []);
 
 	return (
@@ -50,13 +57,19 @@ export default function Home() {
 					}}
 				></div>
 				<div
-					className={`absolute bg-hackrpi-secondary-dark-blue  w-12 h-12 rounded-full  border-[6px] border-hackrpi-primary-blue transition-colors duration-300 z-0 right-1.5 2xs:right-3.5`}
+					className={`absolute bg-hackrpi-secondary-dark-blue  w-12 h-12 rounded-full  border-[6px] border-hackrpi-primary-blue transition-colors duration-300 z-0 right-3.5`}
 					style={{
 						top: lineStart - 20 + "px",
 					}}
 				></div>
 				<div
-					className={`absolute bg-hackrpi-secondary-dark-blue w-12 h-12 rounded-full  border-[6px] border-hackrpi-primary-blue transition-colors duration-300 z-0 right-1.5 2xs:right-3.5`}
+					className={`absolute bg-hackrpi-secondary-dark-blue  w-12 h-12 rounded-full  border-[6px] border-hackrpi-primary-blue transition-colors duration-300 z-0 right-3.5`}
+					style={{
+						top: faqStart - 22 + "px",
+					}}
+				></div>
+				<div
+					className={`absolute bg-hackrpi-secondary-dark-blue w-12 h-12 rounded-full  border-[6px] border-hackrpi-primary-blue transition-colors duration-300 z-0 right-3.5`}
 					style={{
 						top: lineEnd - 20 + "px",
 					}}