Merge pull request #5 from mitul-garg/move-to-top-arrow

Added Move to Top Arrow

package.json

@@ -14,6 +14,7 @@
     "react-lazy-load-image-component": "^1.6.2",
     "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0.1",
+    "react-scroll-to-top": "^3.0.0",
     "uuid": "^10.0.0",
     "web-vitals": "^4.1.1"
   },

src/App.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import ScrollToTop from "react-scroll-to-top";
 
 // import pages
 import { Home } from "./pages/Home";
@@ -20,6 +21,7 @@ import { AllIssues } from "./components/AllIssues";
 const App = () => {
   return (
     <Router>
+      <ScrollToTop smooth className="scroll-to-top-arrow" />
       <Navbar />
       <Sidebar />
       <Routes>

src/components/Education/styles.css

@@ -33,7 +33,8 @@
   height: 300px;
   width: 400px;
   padding: 20px 40px;
-  background: linear-gradient(to top, #35d7e6, #72f3ff);
+  /* background: linear-gradient(to top, #35d7e6, #72f3ff); */
+  background: #d0f4f8;
   color: black;
   font-family: "Montserrat", sans-serif;
   transition: all 0.5s ease-in-out;

src/index.css

@@ -38,3 +38,8 @@ body {
   background: var(--clr-grey-10);
   min-height: calc(100vh - 9rem);
 }
+
+.scroll-to-top-arrow {
+  cursor: url("./assets/pointer.svg"), auto !important;
+  background-color: hsl(184, 80%, 74%) !important;
+}