Merge pull request #375 from Edasgh/progbar-back-to-top/353

"Progressbar added & back-to-top button modified"

package.json

@@ -29,6 +29,8 @@
     "react-loader-spinner": "^6.1.6",
     "react-parallax-tilt": "^1.7.229",
     "react-player": "^2.16.0",
+    "react-router-dom": "^6.23.1",
+    "react-simple-scroll-up": "^0.2.3",
     "react-router-dom": "^6.27.0",
     "react-spinners": "^0.14.1",
     "react-top-loading-bar": "^2.3.1",

src/App.css

@@ -1,3 +1,11 @@
 body {
   cursor: none; 
-}
+  overflow-x: hidden;
+}
+
+.dark .scroll-to-top svg path{
+  color:#F5FBFA ;
+}
+.scroll-to-top svg{
+  height: 3rem;
+}

src/App.jsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import LoadingBar from "react-top-loading-bar";
+
 import { Context } from "./context/Context";
 
 import Navbar from "./components/shared/Navbar";
@@ -27,12 +27,13 @@ import "./App.css";
 import AnimatedCursor from "react-animated-cursor";
 
 import { FaAngleDoubleUp } from "react-icons/fa";
+import { ScrollToTop } from "react-simple-scroll-up";
 
 function App() {
-  const { progress, isDarkMode } = useContext(Context); // Assuming isDarkMode is provided in your context
-
+  const {isDarkMode } = useContext(Context); // Assuming isDarkMode is provided in your context
   const [showScroll, setShowScroll] = useState(false);
 
+
   // Function to handle scroll to top
   const scrollToTop = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
@@ -66,6 +67,8 @@ function App() {
     document.body.classList.toggle("dark", isDarkMode);
   }, [isDarkMode]);
 
+
+
   return (
     <div className={`d-flex flex-column ${isDarkMode ? "dark" : ""}`}>
       <AnimatedCursor
@@ -91,8 +94,6 @@ function App() {
       />
       <Router>
         <Navbar />
-        <LoadingBar height={3} color="#f11946" progress={progress} />
-
         <main className="container flex-grow-1 mt-4">
           <Routes>
             <Route exact path="/" element={<Home />} />
@@ -124,17 +125,17 @@ function App() {
 
         <Footer />
       </Router>
-      
+
       {/* Scroll to Top Button */}
-      <button
+      {/* <button
         className="scroll-to-top"
         onClick={scrollToTop}
         style={{
           position: "fixed",
           bottom: "50px",
           right: "30px",
           display: showScroll ? "flex" : "none",
-          backgroundColor: isDarkMode ? "#333333" : "#DFDFB0",
+          backgroundColor: isDarkMode ? "#6f9e6f" : "#DFDFB0",
           color: isDarkMode ? "#F5FBFA" : "#333",
           borderRadius: "50%",
           height: "50px",
@@ -149,8 +150,17 @@ function App() {
         }}
       >
         <FaAngleDoubleUp />
-      </button>
-
+      </button> */}
+      <ScrollToTop
+        className="scroll-to-top"
+        symbol={<FaAngleDoubleUp />}
+        size={90}
+        bgColor={isDarkMode ? "#2C2A2A" : "#dfdfb0"}
+        strokeWidth={6}
+        strokeFillColor={isDarkMode?"#fff":"rgb(0, 0, 0)"}
+        strokeEmptyColor="#505050"
+        symbolColor={isDarkMode ? "#F5FBFA" : "#333"}
+      />
     </div>
   );
 }