diff --git a/client/src/App.css b/client/src/App.css index fa03ae18..98768472 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -121,8 +121,8 @@ a { /* text-align: center; */ } .button:hover { - background-color: #d7a9eb; - color: #5b1c36; + background-color: #232f3e; + color:#e645bb ; } /* Header Part */ @@ -536,7 +536,11 @@ footer .input-group-text { .auth-card{ padding: 10px; background-color:#decaec; - width: 800px; + width: 600px; + padding-left: 100px; + padding-right:100px; + padding-top:50px; + padding-bottom:20px; margin: 30px auto; /* margin-top: 5px; */ border-radius: 10px; @@ -839,8 +843,24 @@ footer .input-group-text { ::-webkit-scrollbar-corner { background-color: #fff; /* Set the color of the scrollbar corner (if needed) */ } -.divname{ - background-color: #270536; - border-width: 2px; +.divname:hover{ + background-color: #e645bb; + border-spacing: 5px; border-radius: 10px; } + +.Scroll2topBtn{ + padding: 20px; + background-color:#decaec; + padding: 10px; + text-align: center; + position: static; + left: 50px; + bottom: 110px; + float: right; + color: #131921; + font-size: 20px; + font-weight: 400; + + +} diff --git a/client/src/components/SpecialProduct.js b/client/src/components/SpecialProduct.js index 4b184b13..b3f32b12 100644 --- a/client/src/components/SpecialProduct.js +++ b/client/src/components/SpecialProduct.js @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect,useState } from "react"; import ReactStars from "react-rating-stars-component"; import { useDispatch, useSelector } from "react-redux"; import { Link, useParams } from "react-router-dom"; @@ -6,6 +6,14 @@ import { getShop } from "../actions/shopActions"; import Loader from "./Loader"; const SpecialProduct = () => { + const [showButton, setShowButton] = useState(false); + + const scrollTop = () => { + window.scrollTo({ + top: 10, + behavior: 'smooth' + }); + } const { keyword } = useParams(); const { location } = useParams(); const dispatch = useDispatch(); @@ -14,6 +22,18 @@ const SpecialProduct = () => { useEffect(() => { dispatch(getShop(keyword)); }, [dispatch]); + useEffect(() => { + + const handleScroll = () => { + if (window.scrollY > 50) { + setShowButton(true); + }else { + setShowButton(false); + } + }; + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + },[]) return ( <> @@ -50,6 +70,13 @@ const SpecialProduct = () => { ))} +
+ {showButton && ( + + )} +
); diff --git a/client/src/constants/top-button.jsx b/client/src/constants/top-button.jsx deleted file mode 100644 index d86234d4..00000000 --- a/client/src/constants/top-button.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -const BackToTopButton = () => { - const [isVisible, setIsVisible] = useState(false); - - // Scroll event listener to show/hide the button - const handleScroll = () => { - const scrollY = window.scrollY; - const triggerPoint = 300; - - if (scrollY > triggerPoint) { - setIsVisible(true); - } else { - setIsVisible(false); - } - }; - - // Add scroll event listener when the component mounts - useEffect(() => { - window.addEventListener('scroll', handleScroll); - - // Remove the event listener when the component unmounts - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, []); - - // Scroll to the top of the page - const scrollToTop = () => { - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); - }; - - return ( - - ); -}; - -export default BackToTopButton; diff --git a/client/src/pages/CreateItem.js b/client/src/pages/CreateItem.js index 7791ccd1..2a210f65 100644 --- a/client/src/pages/CreateItem.js +++ b/client/src/pages/CreateItem.js @@ -72,8 +72,8 @@ const CreateItem = () => {
+

Add Item

-

Add Item

{
+

Create store!

-

Create store!

+