From 7780b4dbb3655b2a082199e60cef54e70968b14b Mon Sep 17 00:00:00 2001
From: rachel <jrachelr1@gmail.com>
Date: Fri, 25 Aug 2023 13:30:24 -0700
Subject: [PATCH] feat/scroll-to-top: pushing changes from PR

---
 src/app/page.tsx                       |  2 +-
 src/components/ScrollButton.module.css | 10 +++++++---
 src/components/ScrollButton.tsx        | 10 ++++++----
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 57be668f..d926cda0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,7 +29,6 @@ export default async function Home({ searchParams }: HomeProps) {
 
 	return (
 		<>
-			<ScrollButton />
 			<MainArea as="main" className={styles.main}>
 				<h1 className={styles.h1}>tidelift-me-up</h1>
 				<p className={styles.p}>
@@ -37,6 +36,7 @@ export default async function Home({ searchParams }: HomeProps) {
 				</p>
 				<OptionsForm options={options} />
 				<ResultDisplay result={result} />
+				<ScrollButton />
 			</MainArea>
 			<Footer />
 		</>
diff --git a/src/components/ScrollButton.module.css b/src/components/ScrollButton.module.css
index e1f739fe..d0ca9ac7 100644
--- a/src/components/ScrollButton.module.css
+++ b/src/components/ScrollButton.module.css
@@ -15,13 +15,17 @@
 	text-align: center;
 	text-decoration: none;
 	text-shadow: 0 0 5px var(--color-shadow);
+	z-index: 1;
+	display: none;
+}
+
+.visible {
+	display: flex;
 }
 
 @media screen and (width <= 870px) {
 	.scrollButton {
-		position: fixed;
-		bottom: 40px;
-		right: 40%;
 		left: 40%;
+		right: 40%;
 	}
 }
diff --git a/src/components/ScrollButton.tsx b/src/components/ScrollButton.tsx
index 12bbde49..5e6d516b 100644
--- a/src/components/ScrollButton.tsx
+++ b/src/components/ScrollButton.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import { useState } from "react";
 
 import styles from "./ScrollButton.module.css";
@@ -19,16 +20,17 @@ export function ScrollButton() {
 		});
 	};
 
-	document.body.addEventListener("scroll", toggleVisible, { passive: true });
+	if (typeof document !== "undefined") {
+		document.body.addEventListener("scroll", toggleVisible, { passive: true });
+	}
 
 	return (
 		<button
-			className={styles.scrollButton}
+			className={clsx(styles.scrollButton, visible && styles.visible)}
 			onClick={scrollToTop}
-			style={{ display: visible ? "flex" : "none" }}
 			type="button"
 		>
-			Back to Top⬆
+			Back to Top ⬆
 		</button>
 	);
 }