Integrated Tailwind CSS

TenzDelek · Oct 23, 2024 · ab1f697 · ab1f697
1 parent 9d83fbe
commit ab1f697
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 103 deletions.
diff --git a/src/components/ReviewModal.css b/src/components/ReviewModal.css
diff --git a/src/components/ReviewModal.jsx b/src/components/ReviewModal.jsx
@@ -1,65 +1,68 @@
 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) => {
     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
+    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>
       )}
     </>