From 34e752fecaf6f80fcf89d3d612f44f7841166bed Mon Sep 17 00:00:00 2001
From: "ahmad.ahmad1" <ahmad.ahmad1@ucalgary.ca>
Date: Sat, 5 Apr 2025 14:07:16 -0600
Subject: [PATCH] feat(InterviewBookig): Added more CSS alignment)

---
 src/Interivew Booking/InterviewBooking.css |  29 ++++-
 src/Interivew Booking/InterviewForm.jsx    |   9 +-
 src/Interivew Booking/TimeDateSelector.jsx | 123 ++++++++++++---------
 3 files changed, 104 insertions(+), 57 deletions(-)

diff --git a/src/Interivew Booking/InterviewBooking.css b/src/Interivew Booking/InterviewBooking.css
index 3bb226e..b2b70e6 100644
--- a/src/Interivew Booking/InterviewBooking.css	
+++ b/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);
+}
diff --git a/src/Interivew Booking/InterviewForm.jsx b/src/Interivew Booking/InterviewForm.jsx
index a34a58a..2d4e2bb 100644
--- a/src/Interivew Booking/InterviewForm.jsx	
+++ b/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)}
diff --git a/src/Interivew Booking/TimeDateSelector.jsx b/src/Interivew Booking/TimeDateSelector.jsx
index 0ace5f2..69604f2 100644
--- a/src/Interivew Booking/TimeDateSelector.jsx	
+++ b/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>
-      {Object.keys(allDatesAvailable).length > 0 ? ( 
+    <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,44 +87,50 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
               dateFormat="yyyy-MM-dd"
               required // Make date selection required
             />
-      {!selectedDate ? (
-        <>
-          <h4>Available Time Slots:</h4>
-          <p>Please select the a date to see time slots.</p>
-        </>
-      ) : (
-        <>
-          <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 !== '' ? (
-            <>
-              {Object.values(timeSlotsAvialable).map((time) => {
-                return (
-                  <button
-                    key={time}
-                    type="button"
-                    onClick={(self) => {
-                      handleTimeSlotChange(self);
-                    }}
-                  >
-                    {time}
-                  </button>
-                );
-              })}
-            </>
-          ) : (
-            <>
-              <p>No available time slots for the selected date.</p>
-            </>
-          )}
-          
-        </>
-        
-      )}
-      {/* {selectedDate && selectedTime && (
+          </div>
+          <div className="TimeSlot">
+            {!selectedDate ? (
+              <>
+                <h4>Available Time Slots:</h4>
+                <p>Please select the a date to see time slots.</p>
+              </>
+            ) : (
+              <>
+                <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 !== "" ? (
+                  <>
+                    {Object.values(timeSlotsAvialable).map((time) => {
+                      return (
+                        <button
+                          key={time}
+                          type="button"
+                          onClick={(self) => {
+                            handleTimeSlotChange(self);
+                          }}
+                        >
+                          {time}
+                        </button>
+                      );
+                    })}
+                  </>
+                ) : (
+                  <>
+                    <p>No available time slots for the selected date.</p>
+                  </>
+                )}
+              </>
+            )}
+          </div>
+          {/* {selectedDate && selectedTime && (
         <div>
           <p>
             You have selected:
@@ -124,9 +141,9 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
           </p>
         </div>)} */}
         </>
-      ): 
-      <p>Loading ...</p>}
+      ) : (
+        <p>Loading ...</p>
+      )}
     </div>
   );
-};
-
+}