Skip to content

Commit

Permalink
Merge pull request #388 from Vivisteria11/feedback
Browse files Browse the repository at this point in the history 
improved the feedback form
  • Loading branch information
@Avdhesh-Varshney
Avdhesh-Varshney authored Nov 11, 2024
2 parents 55859f2 + 5de3159 commit 06a38b4
Show file tree
Hide file tree
Showing 2 changed files with 518 additions and 25 deletions.
230 changes: 211 additions & 19 deletions src/css/Feedback.css
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
/* Container for feedback form */
/* Container for feedback form
.feedback-form-container {
background-color: #f5e6f6;
border: 5px solid rgb(178, 163, 123);
border-radius: 10px;
padding: 50px;
width: 600px; /* Slightly increased width for a spacious feel */
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(0, 0, 0, 0.7);
}
/* Form headings */
/* Form headings
h2 {
margin-bottom: 30px; /* Increased spacing below heading */
font-size: 48px; /* Increased font size for the heading */
margin-bottom: 30px; /* Increased spacing below heading
font-size: 48px; /* Increased font size for the heading
color: #f5f4ef;
}
/* Input fields styling */
/* Input fields styling
.name,
.email,
.message {
margin-top: 30px; /* Increased top margin for space between inputs */
.message
margin-top: 30px; /* Increased top margin for space between inputs
width: 100%;
padding: 15px; /* Increased padding for larger inputs */
padding: 15px; /* Increased padding for larger inputs
background-color: #faf5f5;
border: 3px solid rgb(178, 163, 123);
border-radius: 5px;
color: rgb(21, 20, 20);
font-size: 22px; /* Slightly increased font size for input text */
font-size: 22px; /* Slightly increased font size for input text
box-sizing: border-box;
}
textarea {
height: 100px; /* Increased height of the textarea */
height: 100px; /* Increased height of the textarea
resize: none;
}
/* Star rating styling */
/* Star rating styling
.stars {
margin-top: 30px; /* Ensure consistent spacing */
margin-top: 30px; /* Ensure consistent spacing
display: flex;
justify-content: center;
margin: 10px 0;
Expand All @@ -49,7 +49,7 @@ textarea {
.star,
.star-filled {
font-size: 35px; /* Slightly larger stars for better visibility */
font-size: 35px; /* Slightly larger stars for better visibility
cursor: pointer;
transition: color 0.3s;
}
Expand All @@ -62,13 +62,13 @@ textarea {
color: gold;
}
/* Submit button */
/* Submit button
.post-button {
margin-top: 40px; /* More space between the last input and button */
margin-top: 40px; /* More space between the last input and button
background-color: #91918f;
color: #fdfafa;
border: 2px solid black;
padding: 15px 30px; /* Bigger button for easier clicking */
padding: 15px 30px; /* Bigger button for easier clicking
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
Expand All @@ -79,7 +79,7 @@ textarea {
color: black;
}
/* Pop-up overlay styling */
/* Pop-up overlay styling
.popup-overlay {
position: fixed;
top: 0;
Expand Down Expand Up @@ -122,4 +122,196 @@ textarea {
.close-popup-button:hover {
background-color: #e3e4e5;
}*/
/* Container for feedback form */
/* Container for feedback form */
/* Container for feedback form */
.feedback-form-container {
background-color: #fff6e6; /* Light soft orange background */
border: 3px solid #ffcc99; /* Soft orange border */
border-radius: 10px;
padding: 40px;
width: 600px;
margin: 50px auto;
color: #333333;
text-align: left;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
gap: 30px; /* Increased spacing between form fields */
}

/* Input fields styling */
.name,
.email,
.message {
width: 100%;
padding: 14px; /* Increased padding */
background-color: #fff2e0; /* Lighter orange shade */
border: 2px solid #ffad66; /* Another shade of orange for the outline */
border-radius: 8px; /* Increased border radius for rounded edges */
color: #333333;
font-size: 16px;
box-sizing: border-box;
text-align: left;
}

textarea {
height: 120px;
resize: none;
}

/* Star rating styling */
.stars {
display: flex;
justify-content: center;
gap: 15px;
}

.star,
.star-filled {
font-size: 30px;
cursor: pointer;
transition: color 0.3s;
}

.star {
color: #88775c; /* Soft orange for unfilled stars */
}

.star-filled {
color: #ff6600; /* Darker orange for filled stars */
}

/* Submit button */
.post-button {
background-color: #ff944d; /* Bright orange for button */
color: white;
border: none;
padding: 14px 25px; /* Increased padding */
border-radius: 8px; /* Increased border radius for rounded edges */
cursor: pointer;
transition: background-color 0.3s;
}

.post-button:hover {
background-color: #ff6600;
color: #ffffff;
}

/* Checkbox styling */
input[type="checkbox"] {
width: 24px; /* Slightly reduced checkbox size */
height: 24px;
margin-right: 10px;
cursor: pointer;
}

/* Label styling */
label {
font-size: 16px; /* Reduced font size for labels */
display: block;
margin-top: 15px;
color: #ff6600;
cursor: pointer;
}

/* Align checkbox options vertically */
.checkbox-group {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}

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

.popup {
background-color: #fff3e0;
padding: 25px;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
color: #333333;
}

.popup h3 {
margin-bottom: 10px;
color: #d97706;
}

.popup p {
margin-bottom: 15px;
color: #666666;
}

.close-popup-button {
background-color: #ffb84d;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

.close-popup-button:hover {
background-color: #ff944d;
}
.personal-insights,
.suggestions {
width: 100%;
padding: 12px;
background-color: #fff2e0;
border: 2px solid #ffad66;
border-radius: 8px;
color: #333333;
font-size: 16px;
box-sizing: border-box;
resize: none;
margin-top: 20px;
}

.personal-insights:focus,
.suggestions:focus {
outline: none;
border-color: #ff6600;
}

/* Style for select dropdown */
select {
margin-top: 20px; /* Space between previous questions */
margin-bottom: 40px; /* Space between select dropdown and next textbox */
width: 100%; /* Take up full container width */
max-width: 600px; /* Keep width within the form container */
padding: 15px; /* Padding for space inside the dropdown */
background-color: #fff2e0; /* Light orange background */
border: 2px solid #ffad66; /* Orange border */
border-radius: 10px; /* Rounded corners */
font-size: 16px; /* Font size for the option text */
color: #333333; /* Text color */
box-sizing: border-box; /* Ensures padding is included in width */
transition: border-color 0.3s ease-in-out; /* Smooth transition for border color */
}

/* Focus effect for select dropdown */
select:focus {
outline: none; /* Remove default focus outline */
border-color: #ff6600; /* Darker orange when focused */
}
/* Set the background color of the entire page */
body {
background-color: #ffffff; /* Set the background color to white */
}

/* If you have any container elements or sections that should also have a white background */
Loading

0 comments on commit 06a38b4

Please sign in to comment.