Merge pull request #674 from RadhikaMalpani1702/main

Enhanced the Scroll to Top Button and Re-Style the Vertical Scroll Bar
Priyaaa1 · Aug 2, 2024 · b55d33d · b55d33d
2 parents 58adbc0 + 7c4494e
commit b55d33d
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 25 deletions.
diff --git a/src/Components/GoToTop.jsx b/src/Components/GoToTop.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import { FaArrowUp } from "react-icons/fa";
+import { FaChevronUp } from "react-icons/fa"; 
 
 const GoToTop = () => {
  const [isVisible, setIsVisible] = useState(false);
@@ -27,44 +27,59 @@ const GoToTop = () => {
  <>
  {isVisible && (
  <Wrapper onClick={goToTop}>
- <FaArrowUp className="top-btn--icon" />
+ <div className="icon-container">
+ <FaChevronUp className="top-btn--icon" />
+ <FaChevronUp className="top-btn--icon double" />
+ </div>
  </Wrapper>
  )}
  </>
  );
 };
 
 const Wrapper = styled.div`
-@media (max-width:481px){
-display: flex;
- justify-content: center;
- align-items: center;
- position: fixed;
- bottom: 68px;
- left: 86%;
- color: white;
- background-color: blue;
- width: 48px;
- height: 48px;
- border-radius: 50%;
- cursor: pointer;
- &:hover {
- background-color: #007bff;
- }}
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 17px;
- left: 85px;
+ left: 15px;
  color: white;
- background-color: blue;
+ background: radial-gradient(circle, navy 0%, #0000ff 100%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
+ transition: transform 0.3s ease, background-color 0.3s ease;
+
  &:hover {
- background-color: #007bff;
+ background: navy;
+ transform: scale(1.1); 
+ }
+
+ .icon-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .top-btn--icon {
+ color: white; 
+ transition: transform 0.3s ease;
+ }
+
+ .top-btn--icon.double {
+ margin-top: -8px; 
+ }
+
+ &:hover .top-btn--icon {
+ transform: translateY(-2px); 
+ }
+
+ @media (max-width: 481px) {
+ bottom: 68px;
+ left: 86%;
  }
 `;
 

diff --git a/src/index.css b/src/index.css
@@ -15,25 +15,26 @@ body {
 
 /*Scrollbar*/
 body::-webkit-scrollbar {
- width: 8px;
+ width: 9px;
 
 }
 
 
 body::-webkit-scrollbar-track {
- background: #f1f1f1;
+ background: #11131f;
+
 
 }
 
 body::-webkit-scrollbar-thumb {
- background: #007bff;
+ background: blue;
 
  border-radius: 6px;
 
 }
 
 body::-webkit-scrollbar-thumb:hover {
- background: #4d79fd;
+ background: rgb(0, 128, 255);
  /* Color of the thumb on hover */
 }