From 69cebfd1564e5348dd14bfab4a247c6107428613 Mon Sep 17 00:00:00 2001 From: maitri-vv Date: Sat, 5 Oct 2024 10:13:35 +0530 Subject: [PATCH 1/4] Added Button. Issue: #66 I have added button according to UI --- frontend/package.json | 2 +- frontend/src/App.css | 29 ++++++++++++- frontend/src/App.jsx | 48 +++++++++++++++++++-- frontend/src/components/ui/FeedbackForm.jsx | 3 ++ 4 files changed, 77 insertions(+), 5 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 9d065422..ebb1115d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,7 +19,7 @@ "gsap": "^3.12.5", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-icons": "^5.2.1", + "react-icons": "^5.3.0", "react-intersection-observer": "^9.13.0", "react-pageflip": "^2.0.3", "react-router-dom": "^6.24.1", diff --git a/frontend/src/App.css b/frontend/src/App.css index 9b6403be..0cf8fa4f 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -16,4 +16,31 @@ body, body{ background: #F1EADC; -} \ No newline at end of file +} + +/* App.css */ +.back-to-top-btn { + position: fixed; + bottom: 10px; + right: 10px; + padding: 16px; + background-color: black; + color: white; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + cursor: pointer; + animation: bounce 1s infinite; + } + + @keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } + } + \ No newline at end of file diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index d1cf126b..1f3efccb 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,16 +1,58 @@ // src/App.js -import React from 'react'; +import React, { useEffect, useState } from 'react'; import './App.css'; -import Navbar from '../src/components/Shared/Navbar'; -import Footer from "../src/components/Shared/Footer" +import Navbar from './components/Shared/Navbar'; +import Footer from './components/Shared/Footer'; import { Outlet } from 'react-router-dom'; +import { FaArrowUp } from 'react-icons/fa'; // For the arrow icon function App() { + const [showButton, setShowButton] = useState(false); + + // Show the "Back to Top" button when the user scrolls down + useEffect(() => { + const handleScroll = () => { + const isBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 100; + setShowButton(isBottom); + }; + + window.addEventListener("scroll", handleScroll); + + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + const scrollToTop = () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + return (
+ + {/* "Back to Top" button, visible when scrolled to the bottom */} + {showButton && ( + + )} + + {/* Keyframes for bounce animation */} +
); } diff --git a/frontend/src/components/ui/FeedbackForm.jsx b/frontend/src/components/ui/FeedbackForm.jsx index 5f02be21..8d1b04ac 100644 --- a/frontend/src/components/ui/FeedbackForm.jsx +++ b/frontend/src/components/ui/FeedbackForm.jsx @@ -73,6 +73,7 @@ const FeedbackForm = () => { value={name} onChange={(e) => setName(e.target.value)} required + autoComplete="off" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]" /> @@ -89,6 +90,7 @@ const FeedbackForm = () => { value={email} onChange={(e) => setEmail(e.target.value)} required + autoComplete="off" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]" /> @@ -105,6 +107,7 @@ const FeedbackForm = () => { value={feedback} onChange={(e) => setFeedback(e.target.value)} required + autoComplete="off" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]" > From 33972d7a18d39784503ffdbe106c9629266e49bc Mon Sep 17 00:00:00 2001 From: maitri-vv Date: Mon, 7 Oct 2024 09:32:59 +0530 Subject: [PATCH 2/4] Updated the CSS for button I have resolved the error and updated the CSS for button Closes Issue: #84 --- frontend/src/App.jsx | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 60d4a43d..00de78c8 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,9 +1,9 @@ // src/App.js -import React from 'react'; import './App.css'; import Navbar from './components/Shared/Navbar'; import Footer from './components/Shared/Footer'; import { Outlet } from 'react-router-dom'; +import React, { useState, useEffect } from 'react'; function App() { const [showButton, setShowButton] = useState(false); @@ -29,6 +29,25 @@ function App() {