feat(InterviewBooking): fixed wording, added css to modal, and fixed error and error line

src/Interivew Booking/InterviewBooking.css

@@ -71,12 +71,16 @@
 }
 #InterviewSubmit button {
 	background-color: lightgreen;
-	width: 20%;
+	width: clamp(62px, 16svw, 180px);
+	/* width: 16svw; */
 	height: 5svh;
 	margin-bottom: 5svh;
 	font-size: large;
 	border: none;
+	padding: 0px;
+	color: black;
 }
+
 #InterviewText {
 	padding-left: var(--interviewspacing);
 	padding-right: var(--interviewspacing);
@@ -118,5 +122,45 @@
 }
 
 #CurrentSelected {
-	background-color: lightseagreen;
+	background-color: rgb(28.75, 93.2196969697, 143.75);
+	color: white;
+}
+
+#InterviewError {
+	opacity: 0%;
+	color: red;
+}
+
+#InterviewDialog[open] {
+	display: flex;
+	flex-direction: column;
+	width: 70%;
+	border: 4px solid grey;
+}
+
+#InterviewDialog::backdrop {
+	background-color: rgba(35, 35, 35, 0.7);
+	backdrop-filter: blur(2px);
+}
+
+#InterviewDialog a {
+	align-self: center;
+	margin-top: 1svh;
+}
+
+#InterviewDialog button {
+	border: 1px solid grey;
+	border-radius: 4px;
+	font-size: large;
+	margin-top: 1svh;
+	padding: 2svh 1svw;
+}
+
+#InterviewDialog h2,
+p {
+	margin-top: 0px;
+}
+
+#InterviewDialog p {
+	margin: 0px;
 }

src/Interivew Booking/InterviewForm.jsx

@@ -1,15 +1,16 @@
 import { useState, useRef } from "react";
+import { Link } from "react-router-dom";
 import TimeDateSelector from "./TimeDateSelector";
 
 /**
  * @param {null} null - Takes in nothing
  * @returns {JSX.element} JSX - HTML and JS functionality
  * @description Used for picking an interview slot
- * @author Ahmad <ahmadmuhammadofficial@gmail.com>
+ * @authors Ahmad <ahmadmuhammadofficial@gmail.com>, Brock <darkicewolf50@gmail.com>
  * @todo CSS
  */
 
-const InterviewForm = () => {
+export default function InterviewForm() {
 	const [isButtonDisabled, setIsButtonDisabled] = useState(false);
 	const dialogRef = useRef(null);
 	const [selectedTimeSlot, setSelectedTimeSlot] = useState(null);
@@ -19,11 +20,12 @@ const InterviewForm = () => {
 	 * @param {String HTML} event - Takes in form info
 	 * @returns {null} null - Returns in nothing
 	 * @description submits the form with the appropriate information
-	 * @author Ahmad <ahmadmuhammadofficial@gmail.com>
+	 * @authors Ahmad <ahmadmuhammadofficial@gmail.com>, Brock <darkicewolf50@gmail.com>
 	 * @todo imporper email and other erros from backend
 	 */
 	const formsubmit = async (event) => {
 		const errorLine = document.getElementById("InterviewError");
+		const submitButton = document.getElementById("InterviewButtonSubmit");
 
 		event.preventDefault();
 
@@ -33,6 +35,8 @@ const InterviewForm = () => {
 				errorLine.innerHTML = " ";
 				// disable button to stop multiple requests
 				setIsButtonDisabled(true);
+				submitButton.innerHTML = "Loading..";
+				submitButton.style.background = "grey";
 
 				// await new Promise((res) => setTimeout(res, 1000));
 				const formData = new FormData(event.target);
@@ -64,10 +68,18 @@ const InterviewForm = () => {
 
 				let data = await res.json();
 
-				if (data["body"]["Success"] === true) {
+				if (
+					data["body"]["Success"] === true &&
+					data["body"]["validEmail"] === true
+				) {
 					dialogRef.current.showModal();
 				} else {
+					// psuedo update, used to refresh page
 					setGetTimeDates(getTimeDates + "i");
+
+					errorLine.innerHTML = "Please input a vaild email";
+					// makes line visiable after we write the error message
+					errorLine.style.opacity = "100%";
 				}
 			} else {
 				formSubmitTimeErorrs(selectedTimeSlot, errorLine);
@@ -76,6 +88,9 @@ const InterviewForm = () => {
 			formSubmitTimeErorrs(selectedTimeSlot, errorLine);
 		}
 		setIsButtonDisabled(false);
+		// set button back
+		submitButton.innerHTML = "Submit";
+		submitButton.style.background = "";
 	};
 
 	/**
@@ -94,9 +109,12 @@ const InterviewForm = () => {
 		else if (missingError.date === null) {
 		errorLine.innerHTML = "Please Select a Date";
     */
-		else if (missingError.startTime) {
+		else if (missingError.startTime === "" || missingError.startTime) {
 			errorLine.innerHTML = "Please Select a Time";
 		}
+
+		// makes error line visible after we write the error message
+		errorLine.style.opacity = "100%";
 	};
 	return (
 		<>
@@ -148,24 +166,28 @@ const InterviewForm = () => {
 					</p>
 				</div>
 
-				<p id="InterviewError"> </p>
+				<p id="InterviewError">Space For Errors Here</p>
 
 				<div id="InterviewSubmit">
 					<button
 						type="submit"
-						disabled={isButtonDisabled}>
+						disabled={isButtonDisabled}
+						id="InterviewButtonSubmit">
 						Submit
 					</button>
 				</div>
 			</form>
 
 			{/* Success Dialog */}
-			<dialog ref={dialogRef}>
+			<dialog
+				ref={dialogRef}
+				id="InterviewDialog">
 				{" "}
 				{/* Add the `ref` attribute */}
 				<h2>Booking Successful!</h2>
 				<p>
-					Thank you for booking your interview slot. We’ll contact you soon.
+					Thank you for booking your interview. We'll send an email confirming
+					the time.
 				</p>
 				<h4>
 					What to do if I cannot make it to any of the avaliable time slots or
@@ -181,9 +203,17 @@ const InterviewForm = () => {
 					<a href="mailto:uofcbaja@gmail.com">uofcbaja@gmail.com</a> to work out
 					an alternate interview time or for rescheduling.
 				</p>
+				<Link to={"/"}>
+					<button>Check Out the rest of the site here</button>
+				</Link>
 			</dialog>
+
+			<button
+				onClick={() => {
+					dialogRef.current.showModal();
+				}}>
+				Show the modal
+			</button>
 		</>
 	);
-};
+}
-
-export default InterviewForm;

src/Interivew Booking/TimeDateSelector.jsx

@@ -66,13 +66,17 @@ export default function TimeDateSelector({
 
 		// get and set time slots for a given day
 		setTimeSlotsAvialable(Object.keys(allDatesAvailable[selectedDateStr]));
-		setSelectedTime(""); // clear because of date change
+		// clear because of date change
+		setSelectedTime("");
 		// set prematurely for better error messages
 		onTimeSlotSelect({
 			date: selectedDateStr,
-			startTime: selectedTime,
+			// used because setSelectedTime("") does nothing apearantly
+			startTime: "",
 		});
+		if (selectedTimeButton !== null) {
 			selectedTimeButton.id = "";
+		}
 		setSelectedTimeButton(null);
 	};