feat(InterviewBooking): Added more CSS and refined the interviewform

src/Interivew Booking/InterviewBookMain.jsx

@@ -1,5 +1,5 @@
 import InterviewForm from "./InterviewForm";
-import logo from "../Header/logo.webp";
+import logo from "../Header/logo.png";
 import Ender from "../Footer/Ender";
 import "./InterviewBooking.css";
 /**
@@ -13,27 +13,19 @@ export default function InterviewBooking() {
   return (
     <div id="InterviewBooking">
       <header>
-        <img id="logo" src={logo} alt="Schulich Off-Road's logo" />
+        <img
+          id="logo"
+          src={logo}
+          alt="Schulich Off-Road's logo"
+          style={{ backgroundColor: "inherit" }}
+        />
         <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 />

src/Interivew Booking/InterviewBooking.css

@@ -1,19 +1,18 @@
 :root {
   --interviewspacing: clamp(5px, 2.5svw, 200px);
+  --interviewwidth: 260px;
 }
 #InterviewBooking header {
   display: flex;
   flex-direction: row;
-  background-color: aqua;
+  background-color: lightslategray;
   justify-content: space-around;
   margin: 0px;
 }
-#InterviewBooking form {
-  width: 80%;
-}
 #InterviewForm {
   display: flex;
   flex-direction: row;
+  width: 100%;
   justify-content: center;
 }
 #InterviewForm div {
@@ -22,18 +21,8 @@
   padding-left: var(--interviewspacing);
   padding-right: var(--interviewspacing);
   text-align: start;
+  width: var(--interviewwidth);
 }
-#TimeDate {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-#TimeDate h4 {
-  padding-left: var(--interviewspacing);
-  padding-right: var(--interviewspacing);
-  text-align: start;
-}
-
 #InterviewForm div label {
   font-weight: 700;
 }
@@ -42,28 +31,54 @@
   margin: 0px;
 }
 #InterviewForm div input {
-  width: 200px;
   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;
+  align-items: center;
+  width: 80%;
 }
 #TimeSlotSelector {
   display: flex;
   flex-direction: row;
+  width: 100%;
   justify-content: center;
 }
 .TimeSlot {
   padding-left: var(--interviewspacing);
   padding-right: var(--interviewspacing);
+  width: var(--interviewwidth);
+}
+.TimeSlot h4 {
+  margin: 0px;
+  margin-top: 30px;
+}
+.TimeSlot p {
+  margin: 0px;
+  margin-bottom: 20px;
+}
+#InterviewSubmit {
+  display: flex;
+  justify-content: center;
+  width: inherit;
+}
+#InterviewSubmit button {
+  background-color: lightgreen;
+  width: 20%;
+  height: 5svh;
+  margin-bottom: 5svh;
+  font-size: large;
+  border: none;
+}
+#InterviewText {
+  padding-left: var(--interviewspacing);
+  padding-right: var(--interviewspacing);
+  width: 80%;
 }

src/Interivew Booking/InterviewForm.jsx

@@ -98,18 +98,34 @@ const InterviewForm = () => {
             <p>(for interview confirmation email)</p>
           </div>
         </div>
-        <div id="TimeDate">
+
-          <h4>Interview Date</h4>
-          <h4>Interview Time</h4>
-        </div>
         {/* Time Slot Selector */}
         <TimeDateSelector
           onTimeSlotSelect={(timeSlot) => setSelectedTimeSlot(timeSlot)}
           timeDateSelectorGet={getTimeDates}
         />
-        <button type="submit" disabled={isButtonDisabled}>
+        <div id="InterviewText">
-          Submit
+          <h4>
-        </button>
+            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>
+        </div>
+        <p id="InterviewError"> </p>
+        <div id="InterviewSubmit">
+          <button type="submit" disabled={isButtonDisabled}>
+            Submit
+          </button>
+        </div>
       </form>
 
       {/* Success Dialog */}

src/Interivew Booking/TimeDateSelector.jsx

@@ -76,8 +76,9 @@ export default function TimeDateSelector({
       {Object.keys(allDatesAvailable).length > 0 ? (
         <>
           <div className="TimeSlot">
+            <h4>Interview Date</h4>
             <label htmlFor="date-picker">
-              <h4>Select a Date:</h4>
+              <p>Select a Date:</p>
             </label>
             <DatePicker
               selected={selectedDate}
@@ -89,18 +90,27 @@ export default function TimeDateSelector({
             />
           </div>
           <div className="TimeSlot">
+            <h4>Interview Time</h4>
             {!selectedDate ? (
               <>
-                <h4>Available Time Slots:</h4>
+                <p>Available Time Slots:</p>
-                <p>Please select the a date to see time slots.</p>
+                <div
+                  style={{
+                    height: "241.633px",
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                >
+                  <p>Please select the a date to see time slots.</p>
+                </div>
               </>
             ) : (
               <>
                 <label htmlFor="time-picker">
-                  <h4>
+                  <p>
                     Available Time Slots for{" "}
                     {selectedDate.toISOString().split("T")[0]}:
-                  </h4>
+                  </p>
                 </label>
                 {selectedDate === undefined ? (
                   <>