Corrected 'Back-To-Top' Button

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",

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;
+export default BackToTop;