feat(InterviewBookig): Added more CSS alignment)

src/Interivew Booking/InterviewBooking.css

@@ -21,12 +21,28 @@
   flex-direction: column;
   padding-left: var(--interviewspacing);
   padding-right: var(--interviewspacing);
-  font-weight: 700;
+  text-align: start;
+}
+#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;
+}
+#InterviewForm div p {
+  font-size: x-small;
+  margin: 0px;
+}
 #InterviewForm div input {
-  width: 20.3svw;
+  width: 200px;
   margin-top: 1svh;
   height: 30px;
 }
@@ -42,3 +58,12 @@
   flex-direction: column;
   text-align: center;
 }
+#TimeSlotSelector {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.TimeSlot {
+  padding-left: var(--interviewspacing);
+  padding-right: var(--interviewspacing);
+}

src/Interivew Booking/InterviewForm.jsx

@@ -76,7 +76,7 @@ const InterviewForm = () => {
       <form onSubmit={formsubmit}>
         <div id="InterviewForm">
           <div>
-            <label for="name">Name (What to call you):</label>
+            <label for="name">Name:</label>
             <input
               type="text"
               id="fname"
@@ -84,6 +84,7 @@ const InterviewForm = () => {
               placeholder="Jaeinceins"
               required
             />
+            <p>(what to call you)</p>
           </div>
           <div>
             <label for="email">UCalgary Email:</label>
@@ -94,9 +95,13 @@ const InterviewForm = () => {
               placeholder="jaeinceins.bhaja@ucalgary.ca"
               required
             />
+            <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)}

src/Interivew Booking/TimeDateSelector.jsx

@@ -1,12 +1,15 @@
 import React, { useState, useEffect } from "react";
-import DatePicker from 'react-datepicker';
+import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
-export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGet }) {
+export default function TimeDateSelector({
+  onTimeSlotSelect,
+  timeDateSelectorGet,
+}) {
   const [allDatesAvailable, setAllDatesAvailable] = useState({});
   const [selectedDate, setSelectedDate] = useState(null);
   const [timeSlotsAvialable, setTimeSlotsAvialable] = useState([]);
-  const [selectedTime, setSelectedTime] = useState('');
+  const [selectedTime, setSelectedTime] = useState("");
 
   useEffect(() => {
     getInterviewDates();
@@ -44,30 +47,38 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
    * @author Brock <darkicewolf50@gmail.com>
    */
   const isDateAvailable = (date) => {
-    return Object.keys(allDatesAvailable).includes(date.toISOString().split('T')[0]);
+    return Object.keys(allDatesAvailable).includes(
-  }
+      date.toISOString().split("T")[0]
+    );
+  };
 
   const handleDateChange = (date) => {
     setSelectedDate(date); // Capture the selected date in date object
-    const selectedDateStr = date.toISOString().split('T')[0];
+    const selectedDateStr = date.toISOString().split("T")[0];
 
     // get and set time slots for a given day
     setTimeSlotsAvialable(Object.keys(allDatesAvailable[selectedDateStr]));
-    setSelectedTime(''); // clear because of date change
+    setSelectedTime(""); // clear because of date change
   };
 
   const handleTimeSlotChange = (e) => {
     let startTime = e.target.innerHTML;
     setSelectedTime(startTime);
 
-    onTimeSlotSelect({"date": selectedDate.toLocaleDateString(), "startTime": selectedTime });
+    onTimeSlotSelect({
+      date: selectedDate.toLocaleDateString(),
+      startTime: selectedTime,
+    });
   };
 
   return (
-    <div>
+    <div id="TimeSlotSelector">
       {Object.keys(allDatesAvailable).length > 0 ? (
         <>
-      <label htmlFor="date-picker"><h3>Select a Date:</h3></label>
+          <div className="TimeSlot">
+            <label htmlFor="date-picker">
+              <h4>Select a Date:</h4>
+            </label>
             <DatePicker
               selected={selectedDate}
               onChange={handleDateChange}
@@ -76,6 +87,8 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
               dateFormat="yyyy-MM-dd"
               required // Make date selection required
             />
+          </div>
+          <div className="TimeSlot">
             {!selectedDate ? (
               <>
                 <h4>Available Time Slots:</h4>
@@ -83,12 +96,17 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
               </>
             ) : (
               <>
-          <label htmlFor="time-picker"><h4>Available Time Slots for {selectedDate.toISOString().split('T')[0]}:</h4></label>
+                <label htmlFor="time-picker">
+                  <h4>
+                    Available Time Slots for{" "}
+                    {selectedDate.toISOString().split("T")[0]}:
+                  </h4>
+                </label>
                 {selectedDate === undefined ? (
                   <>
                     <p>Please select a date.</p>
                   </>
-          ) : timeSlotsAvialable !== '' ? (
+                ) : timeSlotsAvialable !== "" ? (
                   <>
                     {Object.values(timeSlotsAvialable).map((time) => {
                       return (
@@ -109,10 +127,9 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
                     <p>No available time slots for the selected date.</p>
                   </>
                 )}
-          
               </>
-        
             )}
+          </div>
           {/* {selectedDate && selectedTime && (
         <div>
           <p>
@@ -124,9 +141,9 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
           </p>
         </div>)} */}
         </>
-      ): 
+      ) : (
-      <p>Loading ...</p>}
+        <p>Loading ...</p>
+      )}
     </div>
   );
-};
+}
-