From f95d9e8822ba821c08b1eb4cd86360a84dbe0813 Mon Sep 17 00:00:00 2001
From: AsmitaMishra24 <146121869+AsmitaMishra24@users.noreply.github.com>
Date: Wed, 26 Jun 2024 22:46:49 +0530
Subject: [PATCH] Corrected 'Back-To-Top' Button

Corrected Color of 'Back-To-Top' Button According to Website Theme and Appearing Time
---
 client/package.json                |  4 +-
 client/src/components/FloatBtn.jsx | 99 +++++++++++++++++++++++++-----
 2 files changed, 85 insertions(+), 18 deletions(-)

diff --git a/client/package.json b/client/package.json
index 04d0a7b..dcac2fe 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fortawesome/fontawesome-free": "^6.5.2",
     "@mui/material": "^5.15.19",
     "@tabler/icons-react": "^3.5.0",
     "axios": "^1.6.8",
@@ -25,7 +26,8 @@
     "react-dom": "^18.2.0",
     "react-heatmap-grid": "^0.9.0",
     "react-icons": "^5.2.1",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.23.1",
+    "react-scroll": "^1.9.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
diff --git a/client/src/components/FloatBtn.jsx b/client/src/components/FloatBtn.jsx
index 5d74616..a6b08c1 100644
--- a/client/src/components/FloatBtn.jsx
+++ b/client/src/components/FloatBtn.jsx
@@ -1,19 +1,84 @@
-const FloatBtn = () => {
-    const scrollToTop = () => {
-        window.scrollTo({
-          top: 0,
-          behavior: "smooth"
-        });
-      };
-
-    return (
-        <button
-            className="fixed bottom-10 right-5 bg-green-600 text-white border-none rounded-full w-12 h-12 text-2xl cursor-pointer flex justify-center items-center shadow-md transition-colors duration-300 hover:bg-gray-500"
-            onClick={scrollToTop}
-        >
-            &#9650;
-        </button>
-    );
+'use client';
+
+import React, { useState, useEffect } from "react";
+import { animateScroll } from 'react-scroll';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+const BackToTop = () => {
+  const [showButton, setShowButton] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 90) {
+        setShowButton(true);
+      } else {
+        setShowButton(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const handleClick = () => {
+    animateScroll.scrollToTop({
+      top: 0,
+      behavior: "smooth",
+      duration: 500
+    });
+  };
+
+  const buttonStyles = {
+    position: 'fixed',
+    bottom: '20px',
+    right: '10px',
+    zIndex: 1000,
+    backgroundColor: '#7E22CE',
+    color: '#ffffff',
+    border: 'none',
+    padding: '10px',
+    fontSize: '14px',
+    cursor: 'pointer',
+    opacity: showButton ? 1 : 0,
+    transition: 'opacity 0.1s ease',
+    borderRadius: '60%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '42px',
+    height: '42px'
+  };
+
+  const iconStyles = {
+    fontSize: '20px'
+  };
+
+  return (
+    <>
+      <style>{`
+        .back-to-top:hover {
+          background-color: #f3e8ff !important;
+          color: #7E22CE !important;
+        }
+        .back-to-top:focus {
+          outline: none;
+        }
+        .back-to-top:active {
+          transform: translateY(2px);
+        }
+      `}</style>
+      <button
+        className="back-to-top"
+        onClick={handleClick}
+        style={buttonStyles}
+      >
+        <i className="fas fa-arrow-up" style={iconStyles}></i>
+      </button>
+    </>
+  );
 };
 
-export default FloatBtn;
\ No newline at end of file
+export default BackToTop;
\ No newline at end of file