From 9d83fbecdaf14e9e200d735637b8b1d273c2a1fe Mon Sep 17 00:00:00 2001
From: Srishti Chamoli <146511619+SrishtiChamoli@users.noreply.github.com>
Date: Sun, 20 Oct 2024 20:08:01 +0000
Subject: [PATCH 1/2] Added a Rating Popup

---
 package-lock.json              | 14 ++++--
 package.json                   |  3 +-
 src/app/page.jsx               |  3 +-
 src/components/ReviewModal.css | 83 ++++++++++++++++++++++++++++++++++
 src/components/ReviewModal.jsx | 69 ++++++++++++++++++++++++++++
 5 files changed, 167 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ReviewModal.css
 create mode 100644 src/components/ReviewModal.jsx

diff --git a/package-lock.json b/package-lock.json
index 5732b58..23116aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.3.0",
+        "react-rating-stars-component": "^2.2.0",
         "tailwind-merge": "^2.5.3",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -5083,6 +5084,12 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-rating-stars-component": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-rating-stars-component/-/react-rating-stars-component-2.2.0.tgz",
+      "integrity": "sha512-A3lgLxumfFQQicKQmxacZ91fq/zRaVWlCPnVodJmJV6obvod4/yCotetN9WuyBiUfnKsEFDBo/8B85ocwmL7ng==",
+      "license": "ISC"
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6068,10 +6075,11 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
-      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
+      "license": "Apache-2.0",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
diff --git a/package.json b/package.json
index 58ea168..0f09d40 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
+    "react-rating-stars-component": "^2.2.0",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7"
   },
@@ -62,4 +63,4 @@
       "prettier --write"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 06f93b5..5f0b6c5 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,5 +1,5 @@
 "use client";
-
+import ReviewModal from '../components/ReviewModal';
 import { useEffect, useState } from "react";
 import Lenis from "lenis";
 import Link from "next/link";
@@ -85,6 +85,7 @@ export default function Home() {
               <SignUpButton>Sign Up Now</SignUpButton>
             </Button>
           )}
+          <ReviewModal />
         </div>
       </section>
     </main>
diff --git a/src/components/ReviewModal.css b/src/components/ReviewModal.css
new file mode 100644
index 0000000..78b2940
--- /dev/null
+++ b/src/components/ReviewModal.css
@@ -0,0 +1,83 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);  /* Black overlay */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  width: 400px;
+  text-align: center;
+  font-family: 'GeistGF', sans-serif;
+}
+
+.modal-heading {
+  font-size: 24px;
+  font-weight: bold;  /* Make "Rate Our Website" bold */
+  margin-bottom: 15px;
+  color: #000;
+}
+
+.stars-container {
+  display: flex;
+  justify-content: center;  /* Center align the stars */
+  margin-bottom: 20px;
+}
+
+textarea {
+  width: 100%;
+  height: 80px;
+  padding: 10px;
+  border: 1px solid #000;
+  font-family: 'GeistGF', sans-serif;
+  font-size: 14px;
+  color: #000;  /* Set text color to black */
+  background-color: #fff;  /* Ensure background is white */
+}
+
+textarea::placeholder {
+  color: #ccc;  /* Gray color for placeholder text */
+}
+
+button {
+  margin-top: 15px;
+  border-radius: 25px;
+  background-color: #000;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  cursor: pointer;
+  font-family: 'GeistGF', sans-serif;
+}
+
+button:hover {
+  background-color: #333;
+}
+
+.thank-you-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* Center the message */
+  background-color: #fff; /* Optional: Set a white background */
+  padding: 20px;
+  border-radius: 8px; /* Optional: Round the corners */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Add shadow for depth */
+}
+
+.thank-you-message {
+  margin: 0; /* Remove margin for consistent alignment */
+  color: #000; /* Text color for the thank you message */
+  font-weight: bold; /* Make it bold */
+  text-align: center; /* Center align text */
+}
+
+
diff --git a/src/components/ReviewModal.jsx b/src/components/ReviewModal.jsx
new file mode 100644
index 0000000..2c5fb26
--- /dev/null
+++ b/src/components/ReviewModal.jsx
@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import ReactStars from 'react-rating-stars-component';
+import './ReviewModal.css'; // Your CSS styles
+
+const ReviewModal = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [rating, setRating] = useState(0);
+  const [comment, setComment] = useState('');
+  const [thankYouVisible, setThankYouVisible] = useState(false); // State for thank you message
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, 15000); // 15 seconds
+    return () => clearTimeout(timer); // Cleanup the timer
+  }, []);
+
+  const handleRatingChange = (newRating) => {
+    setRating(newRating);
+  };
+
+  const handleSubmit = () => {
+    // Handle form submission (e.g., send data to a server)
+    console.log('Rating:', rating);
+    console.log('Comment:', comment);
+    setIsVisible(false);
+    setThankYouVisible(true); // Show thank you message
+
+    // Hide thank you message after 3 seconds
+    setTimeout(() => {
+      setThankYouVisible(false);
+    }, 3000); // 3 seconds
+  };
+
+  return (
+    <>
+      {isVisible && !thankYouVisible && ( // Only show modal if thank-you is not visible
+        <div className="modal-overlay">
+          <div className="modal-content">
+            <h2 className="modal-heading">Rate Our DearDiary</h2>
+            <div className="stars-container">
+              <ReactStars
+                count={5}
+                value={rating}
+                onChange={handleRatingChange}
+                size={40}  // Increased star size
+                activeColor="#000"  // Black stars
+                color="#ccc"        // Light grey for unselected stars
+              />
+            </div>
+            <textarea
+              placeholder="Leave your comments here..."
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+            />
+            <button onClick={handleSubmit}>Submit</button>
+          </div>
+        </div>
+      )}
+      {thankYouVisible && ( // Show thank-you message without overlay
+        <div className="thank-you-container">
+          <p className="thank-you-message">Thank you for your feedback!</p>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ReviewModal;

From ab1f6975f40cef27548f58f4b093fe3bd28d01a7 Mon Sep 17 00:00:00 2001
From: Srishti Chamoli <146511619+SrishtiChamoli@users.noreply.github.com>
Date: Wed, 23 Oct 2024 17:43:59 +0000
Subject: [PATCH 2/2] Integrated Tailwind CSS

---
 src/components/ReviewModal.css | 83 ----------------------------------
 src/components/ReviewModal.jsx | 43 ++++++++++--------
 2 files changed, 23 insertions(+), 103 deletions(-)
 delete mode 100644 src/components/ReviewModal.css

diff --git a/src/components/ReviewModal.css b/src/components/ReviewModal.css
deleted file mode 100644
index 78b2940..0000000
--- a/src/components/ReviewModal.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);  /* Black overlay */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.modal-content {
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  width: 400px;
-  text-align: center;
-  font-family: 'GeistGF', sans-serif;
-}
-
-.modal-heading {
-  font-size: 24px;
-  font-weight: bold;  /* Make "Rate Our Website" bold */
-  margin-bottom: 15px;
-  color: #000;
-}
-
-.stars-container {
-  display: flex;
-  justify-content: center;  /* Center align the stars */
-  margin-bottom: 20px;
-}
-
-textarea {
-  width: 100%;
-  height: 80px;
-  padding: 10px;
-  border: 1px solid #000;
-  font-family: 'GeistGF', sans-serif;
-  font-size: 14px;
-  color: #000;  /* Set text color to black */
-  background-color: #fff;  /* Ensure background is white */
-}
-
-textarea::placeholder {
-  color: #ccc;  /* Gray color for placeholder text */
-}
-
-button {
-  margin-top: 15px;
-  border-radius: 25px;
-  background-color: #000;
-  color: #fff;
-  padding: 10px 20px;
-  border: none;
-  cursor: pointer;
-  font-family: 'GeistGF', sans-serif;
-}
-
-button:hover {
-  background-color: #333;
-}
-
-.thank-you-container {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%); /* Center the message */
-  background-color: #fff; /* Optional: Set a white background */
-  padding: 20px;
-  border-radius: 8px; /* Optional: Round the corners */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Add shadow for depth */
-}
-
-.thank-you-message {
-  margin: 0; /* Remove margin for consistent alignment */
-  color: #000; /* Text color for the thank you message */
-  font-weight: bold; /* Make it bold */
-  text-align: center; /* Center align text */
-}
-
-
diff --git a/src/components/ReviewModal.jsx b/src/components/ReviewModal.jsx
index 2c5fb26..fd31ec8 100644
--- a/src/components/ReviewModal.jsx
+++ b/src/components/ReviewModal.jsx
@@ -1,18 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import ReactStars from 'react-rating-stars-component';
-import './ReviewModal.css'; // Your CSS styles
 
 const ReviewModal = () => {
   const [isVisible, setIsVisible] = useState(false);
   const [rating, setRating] = useState(0);
   const [comment, setComment] = useState('');
-  const [thankYouVisible, setThankYouVisible] = useState(false); // State for thank you message
+  const [thankYouVisible, setThankYouVisible] = useState(false);
 
   useEffect(() => {
     const timer = setTimeout(() => {
       setIsVisible(true);
-    }, 15000); // 15 seconds
-    return () => clearTimeout(timer); // Cleanup the timer
+    }, 15000);
+    return () => clearTimeout(timer);
   }, []);
 
   const handleRatingChange = (newRating) => {
@@ -20,46 +19,50 @@ const ReviewModal = () => {
   };
 
   const handleSubmit = () => {
-    // Handle form submission (e.g., send data to a server)
     console.log('Rating:', rating);
     console.log('Comment:', comment);
     setIsVisible(false);
-    setThankYouVisible(true); // Show thank you message
+    setThankYouVisible(true);
 
-    // Hide thank you message after 3 seconds
     setTimeout(() => {
       setThankYouVisible(false);
-    }, 3000); // 3 seconds
+    }, 3000);
   };
 
   return (
     <>
-      {isVisible && !thankYouVisible && ( // Only show modal if thank-you is not visible
-        <div className="modal-overlay">
-          <div className="modal-content">
-            <h2 className="modal-heading">Rate Our DearDiary</h2>
-            <div className="stars-container">
+      {isVisible && !thankYouVisible && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="bg-white p-6 rounded-lg w-96 text-center font-sans">
+            <h1 className="text-2xl font-bold mb-1 text-black">Rate Our DearDiary</h1>
+            <div className="flex justify-center mb-3">
               <ReactStars
                 count={5}
                 value={rating}
                 onChange={handleRatingChange}
-                size={40}  // Increased star size
-                activeColor="#000"  // Black stars
-                color="#ccc"        // Light grey for unselected stars
+                size={50}
+                activeColor="#000"
+                color="#ccc"
               />
             </div>
             <textarea
+              className="w-full h-20 p-2 border border-black text-black bg-white text-sm"
               placeholder="Leave your comments here..."
               value={comment}
               onChange={(e) => setComment(e.target.value)}
             />
-            <button onClick={handleSubmit}>Submit</button>
+            <button
+              onClick={handleSubmit}
+              className="mt-4 bg-black text-white px-4 py-2 rounded-full hover:bg-gray-800"
+            >
+              Submit
+            </button>
           </div>
         </div>
       )}
-      {thankYouVisible && ( // Show thank-you message without overlay
-        <div className="thank-you-container">
-          <p className="thank-you-message">Thank you for your feedback!</p>
+      {thankYouVisible && (
+        <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-lg">
+          <p className="text-black font-bold text-center">Thank you for your feedback!</p>
         </div>
       )}
     </>