From a79e9bfa144d1a4b05425b78ef4182830deb429d Mon Sep 17 00:00:00 2001
From: Souradeep858 <csouradeep3@gmail.com>
Date: Mon, 15 Jun 2026 13:11:02 +0530
Subject: [PATCH 1/3] back to top added

---
 frontend/src/App.jsx                         |  2 +
 frontend/src/components/shared/Backtotop.jsx | 46 ++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 frontend/src/components/shared/Backtotop.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 4e1b5ce..be6e73c 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -28,6 +28,7 @@ import ProtectedRoute from "./components/shared/ProtectedRoute";
 import PublicRoute from "./components/shared/PublicRoute";
 import BugReportsPage from "./pages/BugReportsPage";
 import Contact from "./pages/Contact";
+import BackToTop from './components/shared/Backtotop';
 export default function App() {
   return (
     <AuthProvider>
@@ -119,6 +120,7 @@ export default function App() {
             <Route path="*" element={<NotFoundPage />} />
           </Routes>
         </MainLayout>
+        <BackToTop/>
       </BrowserRouter>
     </AuthProvider>
     
diff --git a/frontend/src/components/shared/Backtotop.jsx b/frontend/src/components/shared/Backtotop.jsx
new file mode 100644
index 0000000..844a850
--- /dev/null
+++ b/frontend/src/components/shared/Backtotop.jsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { FaArrowUp } from 'react-icons/fa6';
+
+const BackToTop = () => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setVisible(window.scrollY > 300);
+    };
+
+    window.addEventListener('scroll', toggleVisibility);
+
+    return () => window.removeEventListener('scroll', toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      aria-label="Back to top"
+      className={`fixed bottom-6 right-6 z-50
+        h-12 w-12 rounded-full
+        bg-black text-white
+        shadow-lg shadow-cyan-500/30
+        flex items-center justify-center
+        transition-all duration-300
+        hover:scale-110 hover:bg-cyan-400
+        ${
+          visible
+            ? 'opacity-100 translate-y-0'
+            : 'opacity-0 translate-y-4 pointer-events-none'
+        }`}
+    >
+      <FaArrowUp />
+    </button>
+  );
+};
+
+export default BackToTop;
\ No newline at end of file

From 123f89fc105a7e66a80d17b82e6bdcdb52de8908 Mon Sep 17 00:00:00 2001
From: Souradeep Chakraborty <csouradeep3@gmail.com>
Date: Mon, 15 Jun 2026 20:58:16 +0530
Subject: [PATCH 2/3] Replace FaArrowUp with ArrowUp and update styles

---
 frontend/src/components/shared/Backtotop.jsx | 24 +++++++++-----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/shared/Backtotop.jsx b/frontend/src/components/shared/Backtotop.jsx
index 844a850..91a5388 100644
--- a/frontend/src/components/shared/Backtotop.jsx
+++ b/frontend/src/components/shared/Backtotop.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { FaArrowUp } from 'react-icons/fa6';
+import { ArrowUp } from 'lucide-react';
 
 const BackToTop = () => {
   const [visible, setVisible] = useState(false);
@@ -9,6 +9,8 @@ const BackToTop = () => {
       setVisible(window.scrollY > 300);
     };
 
+    toggleVisibility(); // Initialize on mount
+
     window.addEventListener('scroll', toggleVisibility);
 
     return () => window.removeEventListener('scroll', toggleVisibility);
@@ -21,26 +23,22 @@ const BackToTop = () => {
     });
   };
 
+  if (!visible) return null;
+
   return (
     <button
       onClick={scrollToTop}
       aria-label="Back to top"
-      className={`fixed bottom-6 right-6 z-50
-        h-12 w-12 rounded-full
-        bg-black text-white
+      className="fixed bottom-6 right-6 z-50
+        flex h-12 w-12 items-center justify-center
+        rounded-full bg-black text-white
         shadow-lg shadow-cyan-500/30
-        flex items-center justify-center
         transition-all duration-300
-        hover:scale-110 hover:bg-cyan-400
-        ${
-          visible
-            ? 'opacity-100 translate-y-0'
-            : 'opacity-0 translate-y-4 pointer-events-none'
-        }`}
+        hover:scale-110 hover:bg-cyan-400"
     >
-      <FaArrowUp />
+      <ArrowUp size={20} />
     </button>
   );
 };
 
-export default BackToTop;
\ No newline at end of file
+export default BackToTop;

From 512fbcec6f654d5722752866a05f240720dc18a2 Mon Sep 17 00:00:00 2001
From: Souradeep Chakraborty <csouradeep3@gmail.com>
Date: Mon, 15 Jun 2026 21:02:02 +0530
Subject: [PATCH 3/3] Enhance BackToTop component visibility and accessibility

Updated BackToTop component to improve visibility handling and accessibility attributes.
---
 frontend/src/components/shared/Backtotop.jsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/shared/Backtotop.jsx b/frontend/src/components/shared/Backtotop.jsx
index 91a5388..ae99fd5 100644
--- a/frontend/src/components/shared/Backtotop.jsx
+++ b/frontend/src/components/shared/Backtotop.jsx
@@ -9,7 +9,7 @@ const BackToTop = () => {
       setVisible(window.scrollY > 300);
     };
 
-    toggleVisibility(); // Initialize on mount
+    toggleVisibility();
 
     window.addEventListener('scroll', toggleVisibility);
 
@@ -23,18 +23,23 @@ const BackToTop = () => {
     });
   };
 
-  if (!visible) return null;
-
   return (
     <button
       onClick={scrollToTop}
       aria-label="Back to top"
-      className="fixed bottom-6 right-6 z-50
+      aria-hidden={!visible}
+      tabIndex={visible ? 0 : -1}
+      className={`fixed bottom-6 right-6 z-50
         flex h-12 w-12 items-center justify-center
         rounded-full bg-black text-white
         shadow-lg shadow-cyan-500/30
         transition-all duration-300
-        hover:scale-110 hover:bg-cyan-400"
+        hover:scale-110 hover:bg-cyan-400
+        ${
+          visible
+            ? 'opacity-100 translate-y-0'
+            : 'pointer-events-none opacity-0 translate-y-4'
+        }`}
     >
       <ArrowUp size={20} />
     </button>