feat(InterviewBooking): Started CSS for Booking Form (upto top half)

src/Interivew Booking/InterviewBookMain.jsx

@@ -1,6 +1,7 @@
 import InterviewForm from "./InterviewForm";
 import logo from "../Header/logo.webp";
 import Ender from "../Footer/Ender";
+import "./InterviewBooking.css";
 /**
  * @param {null} null - requires onthing
  * @returns {JSX.Element} Page - HTML tags and JS functionality
@@ -8,31 +9,34 @@ import Ender from "../Footer/Ender";
  * @author Brock <darkicewolf50@gmail.com>
  * @todo add who helped developed the site and finalize css
  */
-export default function InterviewBooking () {
+export default function InterviewBooking() {
   return (
-    <>
-      <img id="logo" src={logo} alt="Schulich Off-Road's logo" />
-      <h1>UofC Baja Interview Form</h1>
-      <p>Please kindly fill out the form and our team will contact you.</p>
-      <InterviewForm />
-      <h4>
-        What to do if I cannot make it to any of the avaliable time slots or
-        need to rescedule?
-      </h4>
-      <p>
-        While we highly encourage sceduling an interview in one of the above
-        time slots, we recongize that not everyone can make it work with their
-        personal and university schedules.
-      </p>
-      <p>
-        Please email us at{" "}
-        <a href="mailto:uofcbaja@gmail.com">uofcbaja@gmail.com</a> to work out
-        an alternate interview time or for rescheduling.
-      </p>
-      {/* <DateTimePicker /> */}
+    <div id="InterviewBooking">
+      <header>
+        <img id="logo" src={logo} alt="Schulich Off-Road's logo" />
+        <h1>UCalgary Baja</h1>
+      </header>
+      <div id="MainForm">
+        <h2>Booking Interview Form</h2>
+        <p>Please kindly fill out the form and our team will contact you.</p>
+        <InterviewForm />
+        <h4>
+          What to do if I cannot make it to any of the avaliable time slots or
+          need to rescedule?
+        </h4>
+        <p>
+          While we highly encourage sceduling an interview in one of the above
+          time slots, we recongize that not everyone can make it work with their
+          personal and university schedules.
+        </p>
+        <p>
+          Please email us at{" "}
+          <a href="mailto:uofcbaja@gmail.com">uofcbaja@gmail.com</a> to work out
+          an alternate interview time or for rescheduling.
+        </p>
+        {/* <DateTimePicker /> */}
+      </div>
       <Ender />
-
-
-    </>
+    </div>
   );
-};
+}

src/Interivew Booking/InterviewBooking.css

@@ -0,0 +1,44 @@
+:root {
+  --interviewspacing: clamp(5px, 2.5svw, 200px);
+}
+#InterviewBooking header {
+  display: flex;
+  flex-direction: row;
+  background-color: aqua;
+  justify-content: space-around;
+  margin: 0px;
+}
+#InterviewBooking form {
+  width: 80%;
+}
+#InterviewForm {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+#InterviewForm div {
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--interviewspacing);
+  padding-right: var(--interviewspacing);
+  font-weight: 700;
+  text-align: start;
+}
+
+#InterviewForm div input {
+  width: 20.3svw;
+  margin-top: 1svh;
+  height: 30px;
+}
+#MainForm {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+#MainForm form {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}

src/Interivew Booking/InterviewForm.jsx

@@ -13,7 +13,7 @@ const InterviewForm = () => {
   const [isButtonDisabled, setIsButtonDisabled] = useState(false);
   const dialogRef = useRef(null);
   const [selectedTimeSlot, setSelectedTimeSlot] = useState(null);
-  const [getTimeDates, setGetTimeDates] = useState('');
+  const [getTimeDates, setGetTimeDates] = useState("");
 
   /**
    * @param {String HTML} event - Takes in form info
@@ -33,7 +33,6 @@ const InterviewForm = () => {
     // disable button to stop multiple requests
     setIsButtonDisabled(true);
 
-    
     // await new Promise((res) => setTimeout(res, 1000));
     const formData = new FormData(event.target);
     const formObject = Object.fromEntries(formData.entries());
@@ -60,38 +59,43 @@ const InterviewForm = () => {
     //     body: JSON.stringify(formObject),
     //   }
     // );
-    
 
     let data = await res.json();
 
     if (data["body"]["Success"] === true) {
       dialogRef.current.showModal();
     } else {
-      setGetTimeDates(getTimeDates+'i');
+      setGetTimeDates(getTimeDates + "i");
     }
-    
+
     setIsButtonDisabled(false);
   };
 
   return (
     <>
       <form onSubmit={formsubmit}>
-        <label for="name">Name (What to call you):</label>
-        <input
-          type="text"
-          id="fname"
-          name="intervieweeName"
-          placeholder="Jaeinceins"
-          required
-        />
-        <label for="email">UCalgary Email:</label>
-        <input
-          type="text"
-          id="email"
-          name="intervieweeEmail"
-          placeholder="jaeinceins.bhaja@ucalgary.ca"
-          required
-        />
+        <div id="InterviewForm">
+          <div>
+            <label for="name">Name (What to call you):</label>
+            <input
+              type="text"
+              id="fname"
+              name="intervieweeName"
+              placeholder="Jaeinceins"
+              required
+            />
+          </div>
+          <div>
+            <label for="email">UCalgary Email:</label>
+            <input
+              type="text"
+              id="email"
+              name="intervieweeEmail"
+              placeholder="jaeinceins.bhaja@ucalgary.ca"
+              required
+            />
+          </div>
+        </div>
 
         {/* Time Slot Selector */}
         <TimeDateSelector