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,11 +9,15 @@ 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 (
-    <>
+    <div id="InterviewBooking">
+      <header>
         <img id="logo" src={logo} alt="Schulich Off-Road's logo" />
-      <h1>UofC Baja Interview Form</h1>
+        <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>
@@ -30,9 +35,8 @@ export default function InterviewBooking () {
           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());
@@ -61,13 +60,12 @@ const InterviewForm = () => {
     //   }
     // );
 
-
     let data = await res.json();
 
     if (data["body"]["Success"] === true) {
       dialogRef.current.showModal();
     } else {
-      setGetTimeDates(getTimeDates+'i');
+      setGetTimeDates(getTimeDates + "i");
     }
 
     setIsButtonDisabled(false);
@@ -76,6 +74,8 @@ const InterviewForm = () => {
   return (
     <>
       <form onSubmit={formsubmit}>
+        <div id="InterviewForm">
+          <div>
             <label for="name">Name (What to call you):</label>
             <input
               type="text"
@@ -84,6 +84,8 @@ const InterviewForm = () => {
               placeholder="Jaeinceins"
               required
             />
+          </div>
+          <div>
             <label for="email">UCalgary Email:</label>
             <input
               type="text"
@@ -92,6 +94,8 @@ const InterviewForm = () => {
               placeholder="jaeinceins.bhaja@ucalgary.ca"
               required
             />
+          </div>
+        </div>
 
         {/* Time Slot Selector */}
         <TimeDateSelector