Merge pull request #377 from pani2004/issue#370

fix position
Akshatchaube01 · Jul 15, 2024 · f0d314a · f0d314a
2 parents 1ad4b53 + 636b067
commit f0d314a
Showing 1 changed file with 7 additions and 26 deletions.
diff --git a/src/components/BottomToTop.jsx b/src/components/BottomToTop.jsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import styled from "styled-components";
 import { FaArrowUp } from "react-icons/fa";
 
 const GoToTop = () => {
@@ -25,34 +24,16 @@ const GoToTop = () => {
   return (
     <>
       {isVisible && (
-        <Wrapper onClick={goToTop}>
-          <FaArrowUp className="top-btn--icon" />
-        </Wrapper>
+        <div
+          onClick={goToTop}
+          className="flex justify-center items-center fixed bottom-20 right-5 w-12 h-12 bg-blue-500 text-white rounded-full cursor-pointer transition-transform transform hover:bg-blue-700 hover:-translate-y-1"
+        >
+          <FaArrowUp className="text-lg" />
+        </div>
       )}
     </>
   );
 };
 
-const Wrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  bottom: 17px;
-  right: 10px;
-  color: white;
-  background-color: rgb(59 130 246);
-  width: 48px;
-  height: 48px;
-  z-index: 9999;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: transform 0.3s ease, background-color 0.3s ease;
-  
-  &:hover {
-    background-color: #003a79;
-    transform: translateY(-5px);
-  }
-`;
-
 export default GoToTop;
+