Skip to content

Added and Redesigned feedback page #689

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 12, 2025
Merged

Added and Redesigned feedback page #689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
03c08b6
Added and Redesigned feedback page
deepeshahlawat Feb 12, 2025
a48a3c3
Fixed a issue
deepeshahlawat Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ const App = () => {
<Route path="/admin-dashboard" element={<AdminDashboard />} />
<Route path="/Privacy-Policy" element={<PrivacyPolicy />} />
<Route path="/Terms-Conditions" element={<TermsConditions />} />
<Route path="/Feedback" element={<Feedback />} />
<Route path="/comingsoon" element={<ComingSoon />} />
</Routes>
)}
Expand Down
150 changes: 52 additions & 98 deletions src/components/Feedback/Feedback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,128 +1,82 @@
/* Container for feedback form */
.feedback-form-container {
background-color: #ccdada;
border: 3px solid rgb(164, 2, 19);
border-radius: 10px;
padding: 50px;
width: 600px; /* Slightly increased width for a spacious feel */
margin: 50px auto;
color: rgb(10, 10, 10);
text-align: center;
box-shadow: 0 5px 15px rgba(6, 4, 4, 0.4);
.feedback-container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 130px;
margin-bottom: 60px;
background-color: #f0f4f8;
}

/* Form headings */
.title {
margin-bottom: 30px; /* Increased spacing below heading */
font-size: 48px; /* Increased font size for the heading */
color: #d20808;
}

/* Input fields styling */
.name,
.email,
.message {
margin-top: 30px; /* Increased top margin for space between inputs */
.feedback-card {
width: 100%;
padding: 10px; /* Increased padding for larger inputs */
background-color: #faf5f5;
border: 2px solid rgb(9, 9, 8);
border-radius: 5px;
color: rgb(21, 20, 20);
font-size: 18px; /* Slightly increased font size for input text */
box-sizing: border-box;
max-width: 500px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

textarea {
height: 100px; /* Increased height of the textarea */
resize: none;
.feedback-title {
text-align: center;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
}

/* Star rating styling */
.stars {
margin-top: 30px; /* Ensure consistent spacing */
display: flex;
justify-content: center;
margin: 10px 0;
gap: 20px;
.feedback-success {
color: green;
text-align: center;
}

.star,
.star-filled {
font-size: 35px; /* Slightly larger stars for better visibility */
cursor: pointer;
transition: color 0.3s;
.feedback-error {
color: red;
text-align: center;
}

.star {
color: rgb(108, 106, 106);
.feedback-form {
display: flex;
flex-direction: column;
gap: 10px;
}

.star-filled {
color: gold;
.feedback-form label {
font-weight: bold;
}

/* Submit button */
.post-button {
margin-top: 40px; /* More space between the last input and button */
background-color: #000504;
color: #fdfafa;
border: 2px solid rgb(205, 6, 6);
padding: 15px 30px; /* Bigger button for easier clicking */
.feedback-form input,
.feedback-form textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.post-button:hover {
background-color: #cbd3f5;
border: 2px solid rgb(8, 7, 7);
color: black;
}

/* Pop-up overlay styling */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
.feedback-stars {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}

.popup {
background-color: #faf9fc;
padding: 28px;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
color: black;
border: 1px solid rgb(4, 4, 4);
}

.popup h3 {
margin-bottom: 10px;
color: #0d0d0d;
.star-selected {
color: gold;
cursor: pointer;
}

.popup p {
margin-bottom: 20px;
color: #0f0e0e;
.star-unselected {
color: gray;
cursor: pointer;
}

.close-popup-button {
background-color: #0a0370;
color: #fdfbfb;
border: 2px solid rgb(245, 242, 242);
padding: 10px 20px;
.feedback-submit {
width: 100%;
padding: 10px;
background-color: #093360;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}

/* .close-popup-button:hover {
background-color: #e3e4e5;
} */
.feedback-submit:hover {
background-color: #031c36;
}
160 changes: 57 additions & 103 deletions src/components/Feedback/Feedback.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,76 @@
import React, { useState } from "react";
import { useState,useEffect } from "react";
import { Star } from "lucide-react";
import "./Feedback.css";
import Footer from "../Footer-section/Footer";
import RentNavbar from "../Header-section/RentNavbar";
import Footer from "../Footer-section/Footer";

const Feedback = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [rating, setRating] = useState(0);
const [hoverRating, setHoverRating] = useState(0);
const [feedback, setFeedback] = useState("");
const [isSubmitted, setIsSubmitted] = useState(false);
export default function FeedbackPage() {
const [feedback, setFeedback] = useState({ name: "", email: "", rating: 0, message: "" });
const [submitted, setSubmitted] = useState(false);
const [error, setError] = useState("");
useEffect(() => {
window.scrollTo(0, 0);
}, []);

const handleRating = (rate) => {
setRating(rate);
const handleInputChange = (e) => {
const { name, value } = e.target;
setFeedback({ ...feedback, [name]: value });
};

const handleRating = (rating) => {
setFeedback({ ...feedback, rating });
};

const handleSubmit = (e) => {
e.preventDefault();
if (name && email && rating && feedback) {
setIsSubmitted(true);
// Here, handle actual submission, such as sending to a backend API
console.log({
name,
email,
rating,
feedback,
});
// Reset form after submission
setName("");
setEmail("");
setRating(0);
setFeedback("");
setHoverRating(0);
if (feedback.name && feedback.email && feedback.message) {
setError("");
setSubmitted(true);
setFeedback({ name: "", email: "", rating: 0, message: "" });
setTimeout(() => setSubmitted(false), 3000);
} else {
alert("Please fill out all fields");
setError("Please fill out all required fields.");
}
};

const closePopup = () => {
setIsSubmitted(false);
};

return (
<>
<div className="feedback-form-container">
<RentNavbar />

<form onSubmit={handleSubmit}>
<h1 className="title">Feedback Form</h1>

{/* Name Input */}
<input
className="name"
type="text"
placeholder="Your Name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>

{/* Email Input */}
<input
className="email"
type="email"
placeholder="Your Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>

{/* Star Rating */}
<div className="stars">
{[1, 2, 3, 4, 5].map((star) => (
<span
key={star}
className={
star <= (hoverRating || rating) ? "star-filled" : "star"
}
onClick={() => handleRating(star)}
onMouseEnter={() => setHoverRating(star)}
onMouseLeave={() => setHoverRating(0)}
>
★
</span>
))}
</div>

{/* Feedback Textarea */}
<textarea
className="message"
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
placeholder="Describe your experience.."
required
/>

{/* Submit Button */}
<button type="submit" className="post-button">
Submit
</button>
</form>

{/* Success Pop-up */}
{isSubmitted && (
<div className="popup-overlay">
<div className="popup">
<h3>Thank You!</h3>
<p>Your feedback has been successfully submitted.</p>
<button onClick={closePopup} className="close-popup-button">
Close
</button>
<RentNavbar />
<div className="feedback-container">
<div className="feedback-card">
<h2 className="feedback-title">We Value Your Feedback</h2>
{submitted && <p className="feedback-success">🎉 Feedback submitted! Thank you!</p>}
{error && <p className="feedback-error">⚠️ {error}</p>}
<form onSubmit={handleSubmit} className="feedback-form">
<div className="input-group">
<label>Name</label>
<input type="text" name="name" value={feedback.name} onChange={handleInputChange} placeholder="Enter your name" required />
</div>
</div>
)}
<div className="input-group">
<label>Email</label>
<input type="email" name="email" value={feedback.email} onChange={handleInputChange} placeholder="Enter your email" required />
</div>
<div className="input-group">
<label>Rating</label>
<div className="feedback-stars">
{[1, 2, 3, 4, 5].map((star) => (
<Star
key={star}
onClick={() => handleRating(star)}
className={feedback.rating >= star ? "star-selected" : "star-unselected"}
/>
))}
</div>
</div>
<div className="input-group">
<label>Message</label>
<textarea name="message" value={feedback.message} onChange={handleInputChange} placeholder="Write your feedback here..." required />
</div>
<button type="submit" className="feedback-submit">Submit Feedback</button>
</form>
</div>
</div>
<Footer />
</>
);
};

export default Feedback;
}