Merge pull request #309 from Varshi45/main

update Rate-us and Log-out in navbar
VanshKing30 · Jun 15, 2024 · a75003e · a75003e
2 parents dd90d03 + ef526c0
commit a75003e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 25 deletions.
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -47,7 +47,9 @@ const Navbar = () => {
             <div>
               <Link to="/">
                 <button
-                  className="bg-green-400 hover:bg-green-600 hover:shadow-green text-white py-3 px-4 w-full h-auto text-l relative z-0 rounded-full transition-all duration-200 hover:scale-110"
+
+                  className={`py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}
+
                 >
                   Log out
                 </button>
@@ -88,7 +90,9 @@ const Navbar = () => {
               <MobileNavItem to="/">
               <Link to="/">
                 <button
-                  className="bg-green-400 hover:bg-green-600 hover:shadow-green text-white py-3 px-4 w-3/2 h-auto text-l relative z-0 rounded-full transition-all duration-200 hover:scale-110"
+
+                  className={`rounded transition duration-300 ease-in-out transform hover:scale-105 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-500 hover:bg-green-700 text-white py-1 px-2'}`}
+
                 >
                   Log out
                 </button>
@@ -133,4 +137,6 @@ const IconAbout = () => <span>ℹ️</span>;
 const IconNews = () => <span>📰</span>;
 const IconRateUs = () => <span>⭐</span>;
 
-export default Navbar;
+
+export default Navbar;
+
diff --git a/src/pages/Rateus.jsx b/src/pages/Rateus.jsx
@@ -1,12 +1,14 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useContext } from "react";
 import Footer from "../components/Footer";
 import Navbar from "../components/Navbar";
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { ThemeContext } from "../themeContext";
 
 const RateUs = () => {
   const [rating, setRating] = useState(0);
-  const [feedback, setFeedback] = useState('');
+  const [feedback, setFeedback] = useState("");
+  const { theme } = useContext(ThemeContext);
 
   const handleRatingChange = (value) => {
     setRating(value);
@@ -18,10 +20,12 @@ const RateUs = () => {
   };
 
   const handleSubmit = () => {
-    if (rating > 0 && feedback.trim() !== '') {
+    if (rating > 0 && feedback.trim() !== "") {
       toast.success("Thanks for Your Feedback :)");
-      console.log('Rating:', rating);
-      console.log('Feedback:', feedback);
+      console.log("Rating:", rating);
+      console.log("Feedback:", feedback);
+      setRating(0);
+      setFeedback("");
     } else {
       toast.error("Please Fill All The Details :(");
     }
@@ -32,31 +36,34 @@ const RateUs = () => {
     stars.forEach((star, index) => {
       if (index < rating) {
         star.checked = true;
-        star.nextElementSibling.style.color = '#ffcf00';
+        star.nextElementSibling.style.color = "#ffcf00";
       } else {
         star.checked = false;
-        star.nextElementSibling.style.color = '#ccc';
+        star.nextElementSibling.style.color = "#ccc";
       }
     });
   };
 
   return (
-    <div style={{ 
-        backgroundImage: "url('https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg')",
-        backgroundSize: 'cover',
-        backgroundAttachment: 'fixed',
-        minHeight: '100vh',
-        display: 'flex',
-        flexDirection: 'column'
-      }}
+    <div
+      className={`bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 min-h-screen ${
+        theme === "light" ? "dark:bg-none" : ""
+      }`}
     >
       <Navbar />
       <div className="flex items-center justify-center flex-grow">
         <div
-          className="w-full max-w-xl mx-0 p-4 bg-white bg-opacity-90 rounded-lg shadow-lg transition-transform transform hover:scale-105 hover:shadow-2xl"
-          style={{ marginBottom: '100px', marginTop: '150px', textAlign: 'center' }}
+          className="w-full max-w-xl mx-0 p-4 bg-gray-400 bg-opacity-90 rounded-lg shadow-lg transition-transform transform hover:shadow-2xl"
+          style={{
+            backgroundColor: theme === "light" ? "#2D848A" : "#CFD9DD",
+            marginBottom: "100px",
+            marginTop: "150px",
+            textAlign: "center",
+          }}
         >
-          <h1 className="text-3xl font-bold mb-0 text-black">Rate Our Website</h1>
+          <h1 className="text-3xl font-bold mb-0 text-black dark:text-white">
+            Rate Our Website
+          </h1>
           <div className="stars mb-7">
             {[1, 2, 3, 4, 5].map((value) => (
               <React.Fragment key={value}>
@@ -71,7 +78,9 @@ const RateUs = () => {
                 />
                 <label
                   htmlFor={`star${value}`}
-                  className={`cursor-pointer text-3xl ${rating >= value ? 'text-yellow-400' : 'text-gray-400'}`}
+                  className={`cursor-pointer text-3xl ${
+                    rating >= value ? "text-yellow-400" : "text-white"
+                  }`}
                   onClick={() => handleRatingChange(value)}
                 >
                   &#9733;
@@ -80,11 +89,15 @@ const RateUs = () => {
             ))}
           </div>
           <textarea
-            className="w-full h-32 p-2 mb-7 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
+            className="w-full h-32 p-2 mb-7 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none dark:bg-gray-500 dark:text-white dark:placeholder-gray-400"
+            style={{
+              backgroundColor: theme === "light" ? "rgba(0, 0, 0, 0.5)" : "",
+            }}
             placeholder="Tell us what you think..."
             value={feedback}
             onChange={handleFeedbackChange}
           ></textarea>
+
           <div>
             <button
               className="px-6 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transform hover:scale-105 transition"